Cool jQuery Based Select Box Replacement - fancyspinbox

Cool jQuery Based Select Box Replacement - fancyspinbox
File Size: 10.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.