Cool jQuery Based Select Box Replacement - fancyspinbox

fancyspinbox is a jQuery plugin for converting a regular select list into a cool CSS3 animated spin box that allows the select options to be changed using either the arrow keys or embedded spin buttons.

Basic usage:

1. Include the jQuery fancyspinbox plugin's stylesheet file in the document's head section.

<link href="jquery.fancyspinbox.css" rel="stylesheet">

2. Create a standard select box on the webpage.

<select id="demo">
  <option value="JavaScript">JavaScript</option>
  <option value="C++" selected>C++</option>
  <option value="Ruby">Ruby</option>
  <option value="jQuery">jQuery</option>
  <option value="Python">Python</option>
  <option value="Golang">Golang</option>
</select>

3. Include jQuery library and the jQuery fancyspinbox plugin's script at the bottom of the document..

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.fancyspinbox.js"></script>

4. Initialize the plugin to generate a nice spin box.

$('#demo').fancyspinbox();

5. Possible options to customize the spin box.

// An array of items to add to the list on initialisation. 
// Items can be strings or objects like {"value": "foo", "text": "bar"}
"items": [],                

// Display spin buttons.
"spinButtons": true,        

// Display a dropdown button. 
// Overrides the spinButtons option and sets dropdown to true.
"dropdownButton": false,    

// Display the dropdown. 
"dropdown": true,           

// Cycle through the items, don't stop at the end.
"cycle": false,             

// Animate the spinbox.
"scroll": true,           

// Duration of the scroll transition.  
"scrollDuration": 300,      

// Flip the spin button's direction.
"flipSpinDirection": false, 

// Give focus to the spinbox if a spin button is clicked 
"focusOnSpin": false        

Change log:

2015-08-19

• add styles to reset padding and borders
• fix a bug for spinboxes that are empty on init and filled later

---

This awesome jQuery plugin is developed by mayakokits. For more Advanced Usages, please check the demo page or visit the official website.