Standard Select Form Replacement Plugin - Selectik
File Size: | 25.6 KB |
---|---|
Views Total: | 1705 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Selectik is a replacement based on jQuery for Standard Select Form elements. Selectik helps you create an easy-to-use, cross-browser and completely customizable selects with CSS.
Features:
- TAB Key Supported
- Mouse wheel Supported
- search by first letter
- smart positioning
- Customizable scrollbar
- Change/add methods for custom select
- and more.
Basic Usage:
1. Include jQuery Library and selectik.js before </head> tag
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.selectik.js"></script>
2. Include Mousewheel Support JS according to your need
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
3. Include default Selectik CSS
<link rel="stylesheet" type="text/css" href="css/selectik.css" />
4. Markup
<div class="selects"> <div class="first select-block"> <form> <select> <option value="0">Choose hero</option> <option value="1">Spider Man</option> <option value="2">Wolverine</option> <option value="3">Captain America</option> <option value="X-Men">X-Men</option> <option value="Crocodile">Crocodile</option> <option value="Cheburashka">Cheburashka</option> <option value="Elephant">Elephant</option> <option value="New">New</option> </select> <br/> <input type="reset" value="Reset select" /> </form> </div> <div class="second select-block"> <select> <option value="Choose hero">Choose hero</option> <option value="Spider Man">Spider Man</option> <option value="Wolverine">Wolverine</option> <option value="Captain America">Captain America</option> <option value="New">New</option> </select> </div> <div class="third select-block"> <select> <option value="Choose hero">Choose hero</option> <option value="Wolverine">Wolverine</option> </select> </div> </div>
5. Call the function
<script type="text/javascript"> $(document).ready(function() { // attach the plugin to all selects $('.selects select').selectik({maxItems: 8}, { _generateHtml: function(){ this.$collection = this.$cselect.children(); var html = ''; for (var i = 0; i < this.$collection.length; i++){ var $this = $(this.$collection[i]); var textOption = $this[0].text; var valueOption = $this[0].value; html += '<li class="'+ ($this.attr('disabled') === 'disabled' ? 'disabled' : '') +' new" data-value="'+valueOption+'">'+textOption+'</li>'; }; return html; } } ); // only for demo newSelect(); }); function newSelect(){ var selectCount = 1; $('#new').click(function(){ var html = ''; var quantity = parseInt($('#quantity').val()); var width = parseInt($('#width').val()); var type = $('#type').val(); var speed = parseInt($('#speed').val()); var maxEl = parseInt($('#maxEl').val()); for ( var i = 0; i < quantity; i++ ){ html += '<option value="Option'+i+'">Option'+i+'</option>'; } html = '<div class="new'+selectCount+' select-block"><select>'+html+'</select></div>'; $(html).appendTo('.selects'); d0 = new Date(); $('.new'+selectCount+' select').selectik({ width: width, maxItems: maxEl, customScroll: type, speedAnimation: speed }); d1 = new Date(); selectCount++; time(d1-d0, quantity, type); }); } function time(e, quantity, type){ $('#info').html($('#info').html()+'Time of insert Selectik: <b>'+e+'ms</b><br/>'); } </script>
This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.