阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.customSelect 中文API文档

      插件 jQuery.customSelect 中文API文档 https://github.com/adamcoulombe/jquery.customSelect

      Custom Select Box CSS Style Plugin: jQuery + CSS

      Getting started

      See Basic Demo

      Initiate the plugin

      $(document).ready(function(){
      	$('#someSelectBox').customSelect();
      });
      

      Style using CSS however you like

      .customSelect { 
      /* This is the default class that is used */
      /* Put whatever custom styles you want here */
      }
      
      .customSelect.customSelectHover {
      /* Styles for when the select box is hovered */
      }
      
      .customSelect.customSelectOpen {
      /* Styles for when the select box is open */
      }
      
      .customSelect.customSelectFocus {
      /* Styles for when the select box is in focus */
      }
      
      .customSelect.customSelectDisabledOption {
      /* Styles for when the selected item is a disabled one */
      }
      
      .customSelect.customSelectDisabled {
      /* Styles for when the select box itself is disabled */
      }
      
      .customSelectInner {
      /* You can style the inner box too */
      }
      

      More Examples

      Cookbook

      Trigger an update on the select box

      Useful if any modifications are made to the select box after customSelect() has been applied

      $('#someSelectBox').customSelect();
      
      // as an example....
      $('#someSelectBox').width(500).append('<option>New!</option>');
      
      // Trigger an refresh on the select box. Good as new!
      $('#someSelectBox').trigger('render');
      

      Making customSelect responsive

      In a responsive layout, you may need to change the size / style of the select box. The best way to do this is with matchMedia. Consider using a matchMedia polyfill for better browser support. The addListener extension makes it very easy to update the customSelect:

      // add a media query listener and trigger a customSelect update whenever the query gets matched or unmatched
      matchMedia('only screen and (max-width: 480px)').addListener(function(list){
          $('#mySelectBox').trigger('render');
      });
      

      Options

      There are a few extra options if you need them

      $('#someSelectBox').customSelect({
          customClass: "mySexySelect", // Specify a different class name (default is 'customSelect')
          mapClass:    true, // Copy any existing classes from the given select element (defaults to true)
          mapStyle:    true // Copy the value of the style attribute from the given select element (defaults to true)
      });
      

      Changelog

      Version 0.5.1 (19/03/2013)

      • Merge fix for #60 by gu3st (Fixes issue when select box moves from display:none; to display:block;)

      Version 0.5.0 (19/03/2013)

      • Namespaced events
      • API Change: ‘update’ event changed to ‘render’ to fix some compatibility issues

      Version 0.4.1 (26/05/2013)

      • Fixed multiple customSelectOpen handling in FF
      • Esc & Enter key support

      Version 0.4.0 (26/04/2013)

      • Some optimizations for better compression/minification
      • If you specify a customClass, that classname will be used for all states.
      • eg. {customClass:'mySexySelect'} will produce class names like mySexySelectOpen, mySexySelectFocus, mySexySelectHover
      • The only exception is the hasCustomSelect class, which will maintain the plugin’s default namespace since it is applied to the select box to distinguish it from an unstyled select.

      Version 0.3.7 (26/04/2013)

      • Support for disabled <option> via customSelectDisabledOption class

      Version 0.3.6 (16/04/2013)

      • Calls change function instead of invoking change event to fix double-fire

      Version 0.3.5 (16/04/2013)

      • Much improved logic for customSelectOpen
      • Bug fix for Firefox keyboard selection

      Version 0.3.4 (15/04/2013)

      Version 0.3.3 (04/03/2013)

      • Pass original customSelectSpan reference to changed() function

      Version 0.3.2 (28/02/2013)

      • Patch for incorrect select height caused by 0.3.0
      • Support for disabled select boxes via customSelectDisabled class

      Version 0.3.0 (12/02/2013)

      • Refactored coding style
      • Changed filenames to standard jQuery plugin naming conventions
      • Fixed IE6 Filtering
      • Added component.json for bower
      • Moved method ‘changed’ to local scope
      • Update to Dual GPL/MIT license

      Version 0.2.5 (04/02/2013)

      • Updates/fixes to .customSelectChanged class usage
      • customSelectChanged class is added to span when select value changes
      • customSelectChanged class is removed on mousedown or on blur

      Version 0.2.4 (03/02/2013)

      • Supports hover via .customSelectHover class on customSelect span

      Version 0.2.3 (30/01/2013)

      • Fixes change event not firing for Firefox keyboard users
      • customSelect no longer triggers the change event on initiation

      Version 0.2.1 (17/12/2012)

      • Select box listens for ‘update’ event which can be triggered to update the size and content if needed
      • Removed dependency on $.browser

      Version 0.2.0

      CHANGES IN 0.2.0

      • Streamlined creation/selection of span elements
      • Renamed span classes to “customSelect” and “customSelectInner” to coinside with plugin name
      • You can now have styles for when select box is open or focused via the classes .customSelectOpen and .customSelectFocus
      • ability to set a custom class by passing in {customClass:‘myClassName’}

      Copyright 2013 Adam Coulombe

      Dual licensed under the MIT and GPL licenses:

      This lightweight, unintrusive technique uses the native select box functionality of the web browser, and overlays a stylable element in order to acheive your desired look. Since it makes use of default browser functionality,it can be treated just like any ordinary HTML select box.

      目录
      目录