User friendly jQuery Select Box Replacement Quick Select - Download User-friendly jQuery Select Box Replacement - Quick Select

Download User-friendly jQuery Select Box Replacement – Quick Select

By Posted on

This time I will share jQuery Plugin and tutorial about User-friendly jQuery Select Box Replacement – Quick Select, hope it will help you in programming stack.

User friendly jQuery Select Box Replacement Quick Select - Download User-friendly jQuery Select Box Replacement - Quick Select
File Size: 33.8 KB
Views Total: 4943
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Quick Select is a jQuery plugin that transforms standard select options into easily styleable and clickable inline elements for quick selection.

How to use it:

1. Import the jQuery quick select plugin’s files into your document which has jQuery library installed.

view source
1 <link href="dist/quickselect.css" rel="stylesheet">
2   ...
3 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
4 <script src="dist/jquery.quickselect.js"></script>

2. Apply the plugin to a select box.

view source
1 $('select').quickselect({
2   // options here
3 });

3. Default plugin options.

view source
01 // added to active/selected button
02 activeButtonClass: 'active',
03  
04 //
05 breakOutAll: false,
06  
07 // options to break out of select box
08 breakOutValues: [],
09  
10 // added to each button
11 buttonClass: '',
12  
13 // added to each button if select box is not a required field
14 buttonDefaultClass: '',
15  
16 // added to each button if select box is a required field
17 buttonRequiredClass: '',
18  
19 // CSS prepend: namespace_class
20 namespace: 'quickselect',
21  
22 // text to display on select button
23 selectDefaultText: 'More&hellip;',
24  
25 // class on wrapping div
26 wrapperClass: '',
27  
28 // button tag
29 buttonTag: 'button', // button tag<br type="_moz">

4. Style the plugin whatever you like.

view source
1 .active {
2   ...
3 }
4  
5 .wrapperClass {
6   ...
7 }

Change log:

2016-11-30

  • v2.2
  • added support for module loaders

2016-08-19

  • v2.1
  • Added ‘buttonTag’ option to allow changing of HTML tag used.

2015-12-30

  • v2.0
  • Button classes for when SELECT is required or not.
  • License switched to MIT.

2015-10-19

  • V1.2 disabled status

2015-10-15

  • Keyboard compatible

2015-10-10

  • bugfix

 

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

source : jqueryscript.net

Related posts: