selectric
Version:
Fast, simple and light jQuery plugin to customize HTML selects
748 lines (670 loc) • 29.4 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Fast, simple and light jQuery plugin to customize HTML selects">
<meta name="robots" content="all">
<title>jQuery Selectric</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico?v=5">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Ubuntu">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="selectric.css">
<link rel="stylesheet" href="customoptions.css">
<link rel="stylesheet" href="lib/prism.css">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<meta property="og:title" content="jQuery Selectric">
<meta property="og:type" content="website">
<meta property="og:description" content="Fast, simple and light jQuery plugin to customize HTML selects">
<meta property="og:url" content="http://lcdsantos.github.io/jQuery-Selectric/">
<meta property="og:site_name" content="jQuery Selectric">
<meta property="og:image" content="http://lcdsantos.github.io/jQuery-Selectric/share.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@lcdsantos">
<meta name="twitter:creator" content="@lcdsantos">
<meta name="twitter:title" content="jQuery Selectric">
<meta name="twitter:description" content="Fast, simple and light jQuery plugin to customize HTML selects">
<meta name="twitter:image:src" content="http://lcdsantos.github.io/jQuery-Selectric/share.jpg">
<link rel="author" href="https://plus.google.com/110463198138936295653/posts">
</head>
<body>
<div id="fb-root"></div>
<div class="header">
<h1>jQuery Selectric <img src="img/icon.png" alt="Selectric ⚡"></h1>
<p>Fast, simple and light jQuery plugin <br> to customize HTML selects</p>
</div>
<div class="center">
<ul class="features cf">
<li>
<div class="ico ico-keyboard"><b></b></div>
<p>Keyboard navigation</p>
</li>
<li>
<div class="ico ico-lightweight"><b></b></div>
<p>Lightweight</p>
</li>
<li>
<div class="ico ico-custom"><b></b></div>
<p>Easily customizable</p>
</li>
<li>
<div class="ico ico-options"><b></b></div>
<p>Options box always stay visible</p>
</li>
<li>
<div class="ico ico-jquery"><b></b></div>
<p>Doesn't rely on external libraries (besides jQuery)</p>
</li>
<li>
<div class="ico ico-latinchar"><b></b></div>
<p>Word search works with western latin characters set (e.g.: á, ñ, ç...)</p>
</li>
</ul>
<div class="button-group">
<a class="bt" href="./demo.html">Demos</a>
<a class="bt" target="_blank" href="https://github.com/lcdsantos/jQuery-Selectric">View on Github</a>
<a class="bt" target="_blank" href="https://github.com/lcdsantos/jQuery-Selectric/zipball/master">Download (ZIP)</a>
<a class="bt" target="_blank" href="https://github.com/lcdsantos/jQuery-Selectric/tarball/master">Download (TAR)</a>
<div class="clear"></div>
<a class="link" href="https://raw.githubusercontent.com/lcdsantos/jQuery-Selectric/master/public/jquery.selectric.js">jquery.selectric.js</a>
<a class="link" href="https://raw.githubusercontent.com/lcdsantos/jQuery-Selectric/master/public/jquery.selectric.min.js">jquery.selectric.min.js</a>
<a class="link" href="https://raw.githubusercontent.com/lcdsantos/jQuery-Selectric/master/public/selectric.css">selectric.css</a>
</div>
<ul class="social-buttons">
<li class="gh-btn">
<iframe width="85" height="30" title="Star on GitHub" src="http://ghbtns.com/github-btn.html?user=lcdsantos&repo=jQuery-Selectric&type=watch&count=true"></iframe>
</li>
<li class="tweet-btn">
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Fast, simple and light jQuery plugin to customize HTML selects" data-via="lcdsantos" data-related="lcdsantos">Tweet</a>
</li>
<li class="fb-btn">
<div class="fb-like" data-href="http://lcdsantos.github.io/jQuery-Selectric/" data-colorscheme="light" data-layout="button_count" data-action="like" data-show-faces="false" data-send="false"></div>
</li>
<li class="flattr-btn">
<a href="https://flattr.com/submit/auto?user_id=lcdsantos&url=http%3A%2F%2Flcdsantos.github.io%2FjQuery-Selectric%2F" target="_blank"><img src="//api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0"></a>
</li>
<li class="gplus-btn">
<div class="g-plusone" data-annotation="inline" data-width="80" data-size="medium"></div>
</li>
</ul>
<div class="section">
<h2>How to use</h2>
<div class="how-to">
<ul>
<li>
<p>1. Make sure to include jQuery in your page:</p>
<pre><code class="language-markup"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script></code></pre>
</li>
<li>
<p>2. Include <strong>jQuery Selectric:</strong></p>
<pre><code class="language-markup"><script src="jquery.selectric.min.js"></script></code></pre>
</li>
<li>
<p>3. Include <strong>jQuery Selectric</strong> styles, and change it to your taste :D <span class="note">(please refer to our <a href="./demo.html">demo page</a> for more themes and other customizations)</span></p>
<pre><code class="language-markup"><link rel="stylesheet" href="selectric.css"></code></pre>
</li>
<li>
<p>4. Initialize <strong>jQuery Selectric:</strong></p>
<pre><code class="language-javascript">$(function() {
$('select').selectric();
});</code></pre>
</li>
</ul>
</div>
</div>
<div class="section">
<h2>Options</h2>
<p>You can pass an options object as the first parameter when you call the plugin. For example:</p>
<pre><code class="language-javascript">$('select').selectric({
maxHeight: 200
});</code></pre>
<pre><code class="language-javascript">{
/*
* Type: Function
* Description: Function called before plugin initialize
*/
onBeforeInit: function() {},
/*
* Type: Function
* Description: Function called plugin has been fully initialized
*/
onInit: function() {},
/*
* Type: Function
* Description: Function called plugin has been fully initialized
*/
onBeforeOpen: function() {},
/*
* Type: Function
* Description: Function called after select options opens
*/
onOpen: function() {},
/*
* Type: Function
* Description: Function called before select options closes
*/
onBeforeClose: function() {},
/*
* Type: Function
* Description: Function called after select options closes
*/
onClose: function() {},
/*
* Type: Function
* Description: Function called before select options change
*/
onBeforeChange: function() {},
/*
* Type: Function
* Description: Function called when select options change
*/
onChange: function(element) {
$(element).change();
},
/*
* Type: Function
* Description: Function called when the Selectric is refreshed
*/
onRefresh: function() {},
/*
* Type: Integer
* Description: Maximum height options box can be
*/
maxHeight: 300,
/*
* Type: Integer
* Description: After this time without pressing
* any key, the search string is reset
*/
keySearchTimeout: 500,
/*
* Type: String [HTML]
* Description: Markup for open options button
*/
arrowButtonMarkup: '<b class="button">&#x25be;</b>',
/*
* Type: Boolean
* Description: Initialize plugin on mobile browsers
*/
disableOnMobile: false,
/*
* Type: Boolean
* Description: Retain native dropdown behavior on mobile devices
*/
nativeOnMobile: true,
/*
* Type: Boolean
* Description: Open select box on hover, instead of click
*/
openOnHover: false,
/*
* Type: Integer
* Description: Timeout to close options box after mouse leave plugin area
*/
hoverIntentTimeout: 500,
/*
* Type: Boolean
* Description: Expand options box past wrapper
*/
expandToItemText: false,
/*
* Type: Boolean
* Description: The select element become responsive
*/
responsive: false,
/*
* Type: Object
* Description: Customize classes.
*/
customClass: {
prefix: 'selectric', // Type: String. Description: Prefixed string of every class name.
camelCase: false // Type: Boolean. Description: Switch classes style between camelCase or dash-case.
},
/*
* Type: String or Function
* Description: Define how each option should be rendered inside its <li> element.
*
* If it's a string, all keys wrapped in brackets will be replaced by
* the respective values in itemData. Available keys are:
* 'value', 'text', 'slug', 'index'.
*
* If it's a function, it will be called with the following parameter:
* (itemData). The function must return a string. If available all keys
* will be replaced by the respective values in itemData.
*
* itemData<Object> {
* className // Type: String. Description: option class names.
* disabled // Type: Boolean. Description: option is disabled true/false
* selected // Type: Boolean. Description: option is selected true/false
* element // Type: HTMLDomElement. Description: current select element
* index // Type: Number. Description: current option index
* slug // Type: String. Description: option slug
* text // Type: String. Description: option text
* value // Type: String. Description: option value
* }
*
* EXAMPLE:
*
* function(itemData) {
* return '<span class="item-{index}">{text}</span>';
* }
*
* // you're free to build and return your own strings
* function(itemData) {
* return itemData.text + '(' + itemData.index + ')';
* }
*/
optionsItemBuilder: '{text}',
/*
* Type: String or Function
* Description: Define how each select label should be rendered. Allows HTML.
*
* If it's a string, all keys wrapped in brackets will be replaced by
* the respective values in currItem. Available keys are:
* 'value', 'text', 'slug', 'disabled'.
*
* If it's a function, it will be called with the following parameters:
* (currItem). The function must return a string, no keys will be
* replaced in this method.
*/
labelBuilder: '{text}',
/*
* Type: Boolean
* Description: Prevent scroll on window when using mouse wheel inside options box
* to match common browsers behavior.
*/
preventWindowScroll: true,
/*
* Type: Boolean
* Description: Inherit width from original element
*/
inheritOriginalWidth: false,
/*
* Type: Boolean
* Description: call stopProgation on onOpen click event
*/
stopPropagation: true,
/*
* Type: Boolean
* Description: Determine if current selected option should jump to
* first (or last) once reach the end (or start) item of list upon
* keyboard arrow navigation.
*/
allowWrap: true,
/*
* Type: Boolean
* Description: By default the options box gets opened above if it's outside the window.
* In case this auto detection doesn't work as expected (e.g. in transform/relative scopes)
* you may force opening above.
*/
forceRenderAbove: false,
/*
* Type: Boolean
* Description: In some cases the options box gets opened above even though the desired behavior would be below.
* If the auto dectection doesn't work as expected you may force opening below.
*/
forceRenderBelow: false,
/*
* Type: Object
* Description: Customize select "multiple" behavior
*/
multiple: {
separator: ', ', // Type: String. Description: Items separator.
keepMenuOpen: true, // Type: Boolean. Description: Close after an item is selected.
maxLabelEntries: false // Type: Boolean or Integer. Description: Max selected items do show.
}
}</code></pre>
</div>
<div class="section">
<h2>Events</h2>
<p>All events are called on original element. Within the callback you have access to the <code>event object</code>, the original
<code>select element</code> and to the current <code>selectric instance</code>. It can be bound like this:</p>
<pre><code class="language-javascript">/**
* @param {Object} event - jQuery event object
* @param {HTMLElement} element - Original DOM element
* @param {Object} selectric - Current Selectric instance
*/
$('select').on('eventname', function(event, element, selectric) {
// your code
});</code></pre>
<p><code>eventname</code> can be one of the following:</p>
<table>
<tr>
<td><strong>Event name</strong></td>
<td><strong>Description</strong></td>
</tr>
<tr>
<td><code>selectric-before-init</code></td>
<td>Fired before plugin initialization</td>
</tr>
<tr>
<td><code>selectric-init</code></td>
<td>Fired after plugin has been fully initialized</td>
</tr>
<tr>
<td><code>selectric-before-open</code></td>
<td>Fired before dropdown opens</td>
</tr>
<tr>
<td><code>selectric-open</code></td>
<td>Fired after dropdown has been opened</td>
</tr>
<tr>
<td><code>selectric-before-close</code></td>
<td>Fired before the dropdown is closed</td>
</tr>
<tr>
<td><code>selectric-close</code></td>
<td>Fired after dropdown has been closed</td>
</tr>
<tr>
<td><code>selectric-before-highlight</code></td>
<td>Fired before a select option is highlighted</td>
</tr>
<tr>
<td><code>selectric-highlight</code></td>
<td>Fired when a select option is highlighted</td>
</tr>
<tr>
<td><code>selectric-before-select</code></td>
<td>Fired before a select option is selected</td>
</tr>
<tr>
<td><code>selectric-select</code></td>
<td>Fired after a select option was selected</td>
</tr>
<tr>
<td><code>selectric-before-change</code></td>
<td>Fired before a select option changed</td>
</tr>
<tr>
<td><code>selectric-change</code></td>
<td>Fired when a select option changed</td>
</tr>
<tr>
<td><code>selectric-refresh</code></td>
<td>Fired after Selectric was refreshed</td>
</tr>
</table>
</div>
<div class="section">
<h2>Public methods</h2>
<pre><code class="language-javascript">$('select').selectric('open'); // Open options
$('select').selectric('close'); // Close options
$('select').selectric('destroy'); // Destroy select and go back to normal
$('select').selectric('refresh'); // Reconstruct the plugin options box
$('select').selectric('init'); // Reinitialize the plugin
// Or...
var Selectric = $('select').data('selectric');
Selectric.open(); // Open options
Selectric.close(); // Close options
Selectric.destroy(); // Destroy select and go back to normal
Selectric.refresh(); // Reconstruct the plugin options box
Selectric.init(); // Reinitialize the plugin</code></pre>
</div>
<div class="section">
<h2>Browser support</h2>
<ul>
<li>Firefox</li>
<li>Chrome</li>
<li>Safari</li>
<li>Internet Explorer 7+</li>
<li>Opera</li>
</ul>
</div>
<div class="section">
<h2>Basic demos</h2>
<h4><a href="./demo.html">view more advanced demos and customization →</a></h4>
<div class="examples">
<div class="item">
<select>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</select>
</div>
<div class="item">
<select multiple>
<option value="">Select with "multiple" attribute</option>
<option value="ant">Ant</option>
<option value="bird">Bird</option>
<option value="cat">Cat</option>
<option value="chicken">Chicken</option>
<option value="cow">Cow</option>
<option value="dog">Dog</option>
<option value="elephant">Elephant</option>
<option value="fish">Fish</option>
<option value="fox">Fox</option>
<option value="horse">Horse</option>
<option value="kangaroo">Kangaroo</option>
<option value="lion">Lion</option>
<option value="monkey">Monkey</option>
<option value="penguin">Penguin</option>
<option value="pig">Pig</option>
<option value="rabbit">Rabbit</option>
<option value="sheep">Sheep</option>
<option value="tiger">Tiger</option>
<option value="whale">Whale</option>
<option value="wolf">Wolf</option>
</select>
</div>
<div class="item">
<select>
<option>Select with optgroup</option>
<optgroup label="Group 1">
<option>Option 1.1</option>
</optgroup>
<optgroup label="Group 2">
<option>Option 2.1</option>
<option>Option 2.2</option>
</optgroup>
<optgroup label="Group 3" disabled>
<option>Option 3.1</option>
<option>Option 3.2</option>
<option>Option 3.3</option>
</optgroup>
</select>
</div>
<div class="item">
<select>
<option value="">Select with big option mauris nec orci ut tortor consectetuer dapibus mauris nec orci ut tortor consectetuer dapibus</option>
<option value="apple">Apple</option>
<option selected value="apricot">Apricot</option>
<option value="banana">Banana</option>
<option value="bilberry">Bilberry</option>
<option value="blackberry">Blackberry</option>
<option value="blackcurrant">Blackcurrant</option>
<option value="blueberry">Blueberry</option>
<option value="cantaloupe">Cantaloupe</option>
<option value="cherimoya">Cherimoya</option>
<option value="cherry">Cherry</option>
<option value="clementine">Clementine</option>
<option value="coconut">Coconut</option>
<option value="currant">Currant</option>
<option value="damson">Damson</option>
<option value="date">Date</option>
<option value="durian">Durian</option>
<option value="elderberry">Elderberry</option>
<option value="feijoa">Feijoa</option>
<option value="fig">Fig</option>
<option value="gooseberry">Gooseberry</option>
<option value="grape">Grape</option>
<option value="grapefruit">Grapefruit</option>
<option value="honeydew">Honeydew</option>
<option value="huckleberry">Huckleberry</option>
<option value="jackfruit">Jackfruit</option>
<option value="jambul">Jambul</option>
<option value="jujube">Jujube</option>
<option value="kiwifruit">Kiwifruit</option>
<option value="kumquat">Kumquat</option>
<option value="lemon">Lemon</option>
<option value="lime">Lime</option>
<option value="loquat">Loquat</option>
<option value="lychee">Lychee</option>
<option value="mango">Mango</option>
<option value="mangostine">Mangostine</option>
<option value="melon">Melon</option>
<option value="nectarine">Nectarine</option>
<option value="orange">Orange</option>
<option value="passionfruit">Passionfruit</option>
<option value="peach">Peach</option>
<option value="pear">Pear</option>
<option value="pineapple">Pineapple</option>
<option value="plum">Plum</option>
<option value="pomegranate">Pomegranate</option>
<option value="pomelo">Pomelo</option>
<option value="prune">Prune</option>
<option value="raisin">Raisin</option>
<option value="rambutan">Rambutan</option>
<option value="raspberry">Raspberry</option>
<option value="redcurrant">Redcurrant</option>
<option value="rock melon">Rock melon</option>
<option value="satsuma">Satsuma</option>
<option value="strawberry">Strawberry</option>
<option value="tangerine">Tangerine</option>
<option value="ugli fruit">Ugli Fruit</option>
<option value="watermelon">Watermelon</option>
</select>
</div>
<div class="item">
<select class="custom-options">
<option value="">Select with icons</option>
<option value="firefox">Firefox</option>
<option value="chrome">Chrome</option>
<option value="safari">Safari</option>
<option value="ie">Internet Explorer</option>
<option value="opera">Opera</option>
</select>
</div>
<div class="item">
<select class="custom-label">
<option value="">Select with custom label builder</option>
<option value="ant">Ant</option>
<option value="bird">Bird</option>
<option value="cat">Cat</option>
<option value="chicken">Chicken</option>
<option value="cow">Cow</option>
<option value="dog">Dog</option>
<option value="elephant">Elephant</option>
<option value="fish">Fish</option>
<option value="fox">Fox</option>
<option value="horse">Horse</option>
<option value="kangaroo">Kangaroo</option>
<option value="lion">Lion</option>
<option value="monkey">Monkey</option>
<option value="penguin">Penguin</option>
<option value="pig">Pig</option>
<option value="rabbit">Rabbit</option>
<option value="sheep">Sheep</option>
<option value="tiger">Tiger</option>
<option value="whale">Whale</option>
<option value="wolf">Wolf</option>
</select>
</div>
<div class="item">
<select disabled>
<option value="">Select disabled</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</select>
</div>
<div class="item">
<select>
<option value="">Select with disabled options</option>
<option disabled value="apple">Apple</option>
<option disabled value="apricot">Apricot</option>
<option disabled value="banana">Banana</option>
<option value="bilberry">Bilberry</option>
<option value="blackberry">Blackberry</option>
<option value="blackcurrant">Blackcurrant</option>
<option disabled value="blueberry">Blueberry</option>
<option value="cantaloupe">Cantaloupe</option>
<option value="cherimoya">Cherimoya</option>
<option disabled value="cherry">Cherry</option>
<option value="clementine">Clementine</option>
<option value="coconut">Coconut</option>
<option value="currant">Currant</option>
<option disabled value="damson">Damson</option>
<option value="date">Date</option>
<option value="durian">Durian</option>
<option value="elderberry">Elderberry</option>
<option value="feijoa">Feijoa</option>
<option value="fig">Fig</option>
<option value="gooseberry">Gooseberry</option>
<option value="grape">Grape</option>
<option disabled value="grapefruit">Grapefruit</option>
<option value="honeydew">Honeydew</option>
<option value="huckleberry">Huckleberry</option>
<option value="jackfruit">Jackfruit</option>
<option value="jambul">Jambul</option>
<option value="jujube">Jujube</option>
<option value="kiwifruit">Kiwifruit</option>
<option value="kumquat">Kumquat</option>
<option disabled value="lemon">Lemon</option>
<option value="lime">Lime</option>
<option disabled value="loquat">Loquat</option>
<option disabled value="lychee">Lychee</option>
<option disabled value="mango">Mango</option>
<option value="mangostine">Mangostine</option>
<option value="melon">Melon</option>
<option value="nectarine">Nectarine</option>
<option disabled value="orange">Orange</option>
<option value="passionfruit">Passionfruit</option>
<option value="peach">Peach</option>
<option value="pear">Pear</option>
<option value="pineapple">Pineapple</option>
<option value="plum">Plum</option>
<option value="pomegranate">Pomegranate</option>
<option value="pomelo">Pomelo</option>
<option disabled value="prune">Prune</option>
<option value="raisin">Raisin</option>
<option disabled value="rambutan">Rambutan</option>
<option value="raspberry">Raspberry</option>
<option value="redcurrant">Redcurrant</option>
<option value="rock melon">Rock melon</option>
<option disabled value="satsuma">Satsuma</option>
<option value="strawberry">Strawberry</option>
<option value="tangerine">Tangerine</option>
<option value="ugli fruit">Ugli Fruit</option>
<option disabled value="watermelon">Watermelon</option>
</select>
</div>
</div>
</div>
<div class="bottom-spacer"></div>
<div class="copy">
<p style="float: left;">Project maintained by <b>Leonardo Santos</b> <br>
<a href="https://github.com/lcdsantos">Github</a> • <a href="https://twitter.com/lcdsantos">Twitter</a> • <a href="mailto:leocs.1991@gmail.com">Email</a></p>
<p style="float: right;">Hosted on GitHub Pages</p>
</div>
</div>
<script src="lib/jquery.min.js"></script>
<script src="lib/prism.js"></script>
<script src="jquery.selectric.js"></script>
<script>
$(function() {
$('.custom-options').selectric({
optionsItemBuilder: function(itemData) {
return itemData.value.length ? '<span class="ico ico-' + itemData.value + '"></span>' + itemData.text : itemData.text;
}
});
$('.custom-label').selectric({
labelBuilder: function(currItem) {
return '<strong><em>' + currItem.text + '</em></strong>';
}
});
$('select').selectric();
});
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-42240250-1', 'auto');
ga('require', 'displayfeatures');
ga('send', 'pageview');
function getScript(a,b,c,e){var d=a.getElementsByTagName(b)[0];a.getElementById(c)||(a=a.createElement(b),a.id=c,a.src=e,d.parentNode.insertBefore(a,d))};
getScript(document, 'script', 'facebook-jssdk', '//connect.facebook.net/en_US/all.js#xfbml=1&appId=146929405493694');
getScript(document, 'script', 'twitter-wjs', '//platform.twitter.com/widgets.js');
getScript(document, 'script', 'googleplus-wjs', '//apis.google.com/js/plusone.js');
</script>
</body>
</html>