阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.selectBox 中文API文档

      插件 jQuery.selectBox 中文API文档 https://github.com/marcj/jquery-selectBox

      jQuery selectBox: A styleable replacement for SELECT elements

      _Licensed under the MIT license: http://opensource.org/licenses/MIT_

      Features

      • Supports OPTGROUPS
      • Supports standard dropdown controls
      • Supports multi-select controls (i.e. multiple=“multiple”)
      • Supports inline controls (i.e. size=“5”)
      • Fully accessible via keyboard
      • Shift + click (or shift + enter) to select a range of options in multi-select controls
      • Type to search when the control has focus
      • Auto-height based on the size attribute (to use, omit the height property in your CSS!)
      • Tested in IE7-IE9, Firefox 3-4, recent WebKit browsers, and Opera

      Usage

      Download the latest version: https://github.com/marcj/jquery-selectBox/releases

      Link to the JS file:

      <script src="jquery.selectbox.js" type="text/javascript"></script>
      

      Add the CSS file (or append contents to your own stylesheet):

      <link href="jquery.selectbox.css" rel="stylesheet" type="text/css" />
      

      To initialize:

      // default
      $('select').selectBox();
      
      // or with custom settings
      $('select').selectBox({
          mobile: true,
          menuSpeed: 'fast'
      });
      

      Settings

      KeyDefaultValuesDescription
      mobilefalseBooleanDisables the widget for mobile devices
      menuTransitiondefaultdefault, slide, fadeThe show/hide transition for dropdown menus
      menuSpeednormalslow, normal, fastThe show/hide transition speed
      loopOptionsfalseBooleanFlag to allow arrow keys to loop through options
      topPositionCorrelation0IntegerWill be plused to top position if droplist will be show at the top
      bottomPositionCorrelation0IntegerWill be substracted from top position if droplist will be shown at the bottom
      hideOnWindowScrolltrueBooleanIf false then showed droplist will not hide itself on window scroll event
      keepInViewporttrueBooleanIf set to false, the droplist will be always open towards the bottom

      To specify settings after the init, use this syntax:

      $('select').selectBox('settings', {settingName: value, ... });
      

      Methods

      To call a method use this syntax:

      $('select').selectBox('methodName', [option]);
      

      Available methods

      KeyDescription
      createCreates the control (default)
      destroyDestroys the selectBox control and reverts back to the original form control
      disableDisables the control (i.e. disabled=“disabled”)
      enableEnables the control
      valueIf passed with a value, sets the control to that value; otherwise returns the current value
      optionsIf passed either a string of HTML or a JSON object, replaces the existing options; otherwise Returns the options container element as a jQuery object
      controlReturns the selectBox control element (an anchor tag) for working with directly
      refreshUpdates the selectBox control’s options based on the original controls options
      instanceReturns the SelectBox instance, where you have more methods available (only in v1.2.0-dev
      available) as in the SelectBox class below.

      API SelectBox

      You can instantiate the selectBox also through a classic OOP way:

      var selectBox = new SelectBox($('#mySelectBox'), settings = {});
      selectBox.showMenu();
      

      The public methods are:

      refresh()
      destroy()
      disable()
      enable()
      
      getLabelClass()
      getLabelText()
      getSelectElement()
      getOptions(String type = 'inline'|'dropdown')
      
      hideMenus()
      showMenu()
      
      setLabel()
      setOptions(Object options)
      setValue(String value)
      
      removeHover(HTMLElement li)
      addHover(HTMLElement li)
      
      disableSelection(HTMLElement selector)
      generateOptions(jQuery self, jQuery options)
      handleKeyDown(event)
      handleKeyPress(event)
      init(options)
      keepOptionInView(jQuery li, Boolean center)
      refresh()
      removeHover(HTMLElement li)
      selectOption(HTMLElement li, event)
      

      Events

      Events are fired on the original select element. You can bind events like this:

      $('select').selectBox().change(function () {
          alert($(this).val());
      });
      

      Available events

      KeyDescription
      focusFired when the control gains focus
      blurFired when the control loses focus
      changeFired when the value of a control changes
      beforeopenFired before a dropdown menu opens (cancelable)
      openFired after a dropdown menu opens (not cancelable)
      beforecloseFired before a dropdown menu closes (cancelable)
      closeFired after a dropdown menu closes (not cancelable)

      Known Issues

      • The blur and focus callbacks are not very reliable in IE7. The change callback works fine.

      Credits

      Original plugin by Cory LaViska of A Beautiful Site, LLC. (http://www.abeautifulsite.net/)

      Bitdeli Badge

      目录
      目录