jquery.customSelect

Lightweight, unobtrusive, custom style select boxes with jQuery

  • 所有者: adamcoulombe/jquery.customSelect
  • 平台:
  • 许可证:
  • 分类:
  • 主题:
  • 喜欢:
    0
      比较:

Github星跟踪图

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.

主要指标

概览
名称与所有者adamcoulombe/jquery.customSelect
主编程语言JavaScript
编程语言JavaScript (语言数: 1)
平台
许可证
所有者活动
创建于2012-03-26 16:28:03
推送于2018-10-06 14:58:15
最后一次提交2014-03-19 11:03:57
发布数0
用户参与
星数583
关注者数37
派生数280
提交数74
已启用问题?
问题数78
打开的问题数38
拉请求数9
打开的拉请求数11
关闭的拉请求数14
项目设置
已启用Wiki?
已存档?
是复刻?
已锁定?
是镜像?
是私有?