Multi Column Dropdown Box with jQuery CSS3 Multi Column Select - Download Multi Column Dropdown Box with jQuery and CSS3 - Multi Column Select

Download Multi Column Dropdown Box with jQuery and CSS3 – Multi Column Select

By Posted on

This time I will share jQuery Plugin and tutorial about Multi Column Dropdown Box with jQuery and CSS3 – Multi Column Select, hope it will help you in programming stack.

Multi Column Dropdown Box with jQuery CSS3 Multi Column Select - Download Multi Column Dropdown Box with jQuery and CSS3 - Multi Column Select
File Size: 8.46 KB
Views Total: 18849
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

A small and simple jQuery plugin that turns the standard select list into a multi-column dropdown box with CSS3 transitions and transforms.

How to use it:

1. Add the required Multi-Column-Select.css to the head section of your web page.

view source
1 Multi-Column-Select.<link rel="stylesheet" href="Multi-Column-Select/Multi-Column-Select.css">

2. Add the jQuery javascript library and the jQuery Multi Column Select plugin to the footer of your web page.

view source
1 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
2 <script src="Multi-Column-Select/Multi-Column-Select.js"></script>

3. Wrap the standard select list into a container element.

view source
1 <div class="demo">
2   <select>
3     <option value="Audi">Audi</option>
4     <option value="Bugatti">Bugatti</option>
5     <option value="Chrysler">Chrysler</option>
6     ...
7   </select>
8 </div>

5. Call the plugin with options on the container element you created.

view source
01 $(document).ready(function(){
02   $('.demo').MultiColumnSelect({
03  
04   // Single or Multiple Select
05   multiple: false,
06  
07   // Use text from option. Use false if you plan to use images
08   useOptionText: true,
09  
10   // Hide Original Select Control
11   hideselect: true,
12  
13   // Toggle Open Button Class
14   openmenuClass: 'mcs-open',
15  
16   // Text for button
17   openmenuText: 'Choose An Option',
18  
19   // Class added to Toggle button on open
20   openclass: 'open',
21  
22   // Class of parent container
23   containerClass: 'mcs-container',
24  
25   // Class of menu items
26   itemClass: 'mcs-item',
27  
28   // Assign as ID to items eg 'item-' = #item-1, #item-2, #item-3...
29   idprefix: null,
30  
31   // Toggle Height duration
32   duration: 200,
33  
34   // Callbacks
35   onOpen: null,
36   onClose: null,
37   onItemSelect: null
38    
39   });
40 });

Change log:

2016-04-10

  • Fixed minor bugs.

2015-07-22

  • Added ‘Selected’ option.

2015-03-13

2014-07-09

  • Update

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

source : jqueryscript.net

Related posts: