Cool jQuery Based Select Box Replacement fancyspinbox - Download Cool jQuery Based Select Box Replacement - fancyspinbox

Download Cool jQuery Based Select Box Replacement – fancyspinbox

By Posted on

This time I will share jQuery Plugin and tutorial about Cool jQuery Based Select Box Replacement – fancyspinbox, hope it will help you in programming stack.

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

Demo Download

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.

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

2. Create a standard select box on the webpage.

view source
1 <select id="demo">
2   <option value="JavaScript">JavaScript</option>
3   <option value="C++" selected>C++</option>
4   <option value="Ruby">Ruby</option>
5   <option value="jQuery">jQuery</option>
6   <option value="Python">Python</option>
7   <option value="Golang">Golang</option>
8 </select>

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

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

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

view source
1 $('#demo').fancyspinbox();

5. Possible options to customize the spin box.

view source
01 // An array of items to add to the list on initialisation.
02 // Items can be strings or objects like {"value": "foo", "text": "bar"}
03 "items": [],               
04  
05 // Display spin buttons.
06 "spinButtons": true,       
07  
08 // Display a dropdown button.
09 // Overrides the spinButtons option and sets dropdown to true.
10 "dropdownButton": false,   
11  
12 // Display the dropdown.
13 "dropdown": true,          
14  
15 // Cycle through the items, don't stop at the end.
16 "cycle": false,            
17  
18 // Animate the spinbox.
19 "scroll": true,          
20  
21 // Duration of the scroll transition. 
22 "scrollDuration": 300,     
23  
24 // <a href="https://www.jqueryscript.net/tags.php?/Flip/">Flip</a> the spin button's direction.
25 "flipSpinDirection": false,
26  
27 // Give focus to the spinbox if a spin button is clicked
28 "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.

source : jqueryscript.net

Related posts: