Custom HTML Select Element jQuery Gorilla Dropdown - Download jQuery Plugin For Custom HTML Select Element - Gorilla Dropdown

Download jQuery Plugin For Custom HTML Select Element – Gorilla Dropdown

By Posted on

This time I will share jQuery Plugin and tutorial about jQuery Plugin For Custom HTML Select Element – Gorilla Dropdown, hope it will help you in programming stack.

Custom HTML Select Element jQuery Gorilla Dropdown - Download jQuery Plugin For Custom HTML Select Element - Gorilla Dropdown

File Size: 36.6 KB
Views Total: 1491
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Gorilla Dropdown is a jQuery plugin that converts the normal html <select> element into an easy-to-style dropdown list with custom images and descriptions.

How to use it:

1. Include the jQuery Gorilla Dropdown plugin’s files on the web page which has jQuery JavaScript library installed.

view source
1 <link rel="stylesheet" href="jquery.gorilla-dropdown.css">
2 <script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
3 <script src="jquery.gorilla-dropdown.js"></script>

2. Initialize the plugin on the target <select> element and done.

  • data-imgsrc: image path
  • data-description: more description
view source
1 <select id="mySelect" class="some-class">
2   <option value="saab" data-imgsrc="Saab.jpg" data-description="Description about Saab">Saab</option>
3   <option value="mercedes" data-imgsrc="Mercedes.jpg" data-description="Description about Mercedes">Mercedes</option>
4 </select>
view source
1 $("#mySelect").gorillaDropdown(Options);

3. That’s it. By default, this plugin will convert the <select> element into the following (note this does not include css styling):

view source
01 <div id="mySelect" class="some-class gorilla-dropdown">
02    
03   <div class="container">
04    
05     <div class="current">
06       <div>Select</div>
07       <span class="arrow">&#x25bc</span>
08     </div>
09      
10     <ul class="ddlist">
11        
12       <li class="dditem">
13         <div>
14           <img class="image" src="Saab.jpg">
15         </div>
16          
17         <div>
18           <div class="text">Saab</div>
19           <div class="description">Description about Saab</div>
20         </div>
21          
22         <input class="value" value="text1" type="hidden">
23         <div class="-clear-both"></div>
24       </li>
25        
26       <li class="dditem">
27         <div>
28           <img class="image" src="Mercedes.jpg">
29         </div>
30         <div>
31           <div class="text">Mercedes</div>
32           <div class="description">Description about Mercedes</div>
33         </div>
34         <input class="value" value="text2" type="hidden">
35         <div class="-clear-both"></div>
36       </li>
37        
38     </ul>
39   </div>
40 </div>

4. Default configuration options to customize the drop down list.

view source
01 $("#mySelect").gorillaDropdown({
02   arrowColor        : "#808080",
03   arrowDown       : "&#x25bc;",
04   arrowSize       : "14px",
05   arrowUp         : "&#x25b2;",
06   backgroundColor     : "#ffffff",
07   borderColor       : "#c0c0c0",
08   borderWidth       : 1,
09   descriptionFontColor  : "#000000",
10   descriptionFontFamily : "Verdana",
11   descriptionFontSize   : "12px",
12   descriptionFontStyle  : "normal",
13   descriptionFontVariant  : "small-caps",
14   descriptionFontWeight : "normal",
15   displayArrow      : "inline",
16   dropdownHeight      : "auto",
17   hoverColor        : "#f0f8ff",
18   imageLocation     : "left",
19   onSelect        : function () {},
20   padding         : 10,
21   placeholder       : "Select",
22   placeholderFontColor  : "#808080",
23   placeholderFontFamily : "Verdana",
24   placeholderFontSize   : "14px",
25   placeholderFontStyle  : "italic",
26   placeholderFontVariant  : "normal",
27   placeholderFontWeight : "bold",
28   select          : -1,
29   textFontColor     : "#000000",
30   textFontFamily      : "Verdana",
31   textFontSize &nbsp

source : jqueryscript.net

Related posts: