WidgetSlider jQuery Plugin

Das jquery.widgetSlider Plugin ist das erste unter der MIT Lizenz veröffentlichte OpenSource Script der INCAS. Es wurde für den Website Relaunch im März 2012 geschrieben und steht zur freien Verwendung, Vervielfältigung sowie Änderung zur freien Verfügung: https://github.com/INCAS/jquery.widgetSlider

Die Anwendung ist denkbar einfach, das Plugin erwartet eine `h2` als Überschrift und ein `.content` als Inhalt:

<script type="text/javascript" src="js/jquery.widgetSlider.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
  $('.element').widgetSlider();
});
</script>

Die Standardoptionen des Sliders ermöglichen ein paar individuelle Einstellungen sowie das Speichern des Zustandes, wenn das jStorage Script vorhanden ist:

// Default Options
$('.element').widgetSlider({
  header            : 'h2',                         // default header and trigger element -> always visible
  content           : '.content',                   // default content element that is hided
  classOpen         : 'open',                       // default css class added to the wrapper when opened
  classClosed       : 'closed',                     // default css class added to the wrapper when closed
  event             : {
    trigger         : 'click',                      // default event that triggers the hiding/showing
    triggerCustom   : false,                        // whether to trigger the created/open/close custom events
    created         : 'widgetCreated',              // default eventname when created
    open            : 'widgetOpen',                 // default eventname when opened
    close           : 'widgetClose'                 // default eventname when closed
  },
  speed             : 250,                          // open/close speed in ms. set to zero when no effect is needed
  saveState         : true,                         // save the current state in jStorage (requires http://www.jstorage.info/)
  statePrefix       : 'widgetState_',               // simple prefix for local storage keys. header needs it to identify
  openHashId        : true,                         // open anchors when opened and id is equal to header id
  classSkipSave     : 'no-widget-saving',           // classname for widgets that don't need to be saved
  callback          : function(widget) {},          // callback function on every opening/closing action
  callbackOpen      : function(widget) {},          // callback function on opening
  callbackClosed    : function(widget) {},          // callback function on closing
  headerPrevDefault : true                          // whether to prevent the default event or not (when a link is inside and clicked)
});

Beispiele der INCAS Seite:

  • Widget, das nur bei Klick auf das Icon `span.fold` reagiert:
    $('#seminarSearchElement').widgetSlider({
      header      : 'h3',
      content     : '.content',
      trigger     : 'span.fold',
      triggerOnly : true
    });
    
  • Anmeldeformular mit versteckten Feldern, die nicht abgeschickt werden sollen, wenn das Widget geschlossen ist:
    $('#registrationForm').find('.optional').widgetSlider({
      header   : '.toggler',
      content  : '.content',
      callbackOpen: function(widget) {
        // aktiviere formular felder
        widget.content.find('input, select, textarea').attr('disabled', false);
      },
      callbackClose: function(widget) {
        // deaktiviere formular felder
        widget.content.find('input, select, textarea').attr('disabled', true);
      }
    });
    
Leave A Comment

You must be logged in to post a comment.

Kategorien

Archiv