The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

SelectBoxIt : A jQuery Select Box Plugin for Mobile, Tablet, and Desktop

Tags :

Plugin rate :

SelectBoxIt is a jQuery plugin that progressively enhances an HTML Select Box into a single option dropdown list.

 

The dropdown list can be optionally styled with Twitter Bootstrap, jQueryUI ThemeRoller, or jQuery Mobile, optionally animated with jQueryUI show/hide effects, and works on Desktop, Tablet, and Mobile browsers.

Implementation: 

1. First, include CSS & jQuery files

1
2
3
4
5
6
7
<!-- CSS files -->
<link rel="stylesheet" type="text/css" href="jquery.selectBoxIt.css">
 
<!-- Js Files -->
<script type="text/javascript" src="jquery-1.5.xx.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="jquery.selectBoxIt.min.js"></script>  

 

2. Write your HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- SelectBoxIt supports the selected and disabled HTML properties -->
 <select id="test" name="test">
    <option value="SelectBoxIt is:">SelectBoxIt is:</option>
    <option value="a jQuery Plugin" selected>a jQuery Plugin</option>
    <option value="a Select Box Replacement" disabled>a Select Box Replacement</option>
    <option value="a Stateful UI Widget">a Stateful UI Widget</option>
  </select>
 
 
<!-- SelectBoxIt supports optgroups -->
<select id="optgroups" name="optgroups">
    <option value="SelectBoxIt is:">SelectBoxIt is:</option>
    <optgroup label="Optgroup 1">
      <option value="a jQuery Plugin">a jQuery Plugin</option>
    </optgroup>
    <optgroup label="Optgroup 2">
      <option value="a Select Box Replacement">a Select Box Replacement</option>
    </optgroup>
    <optgroup label="Optgroup 3">
      <option value="a Stateful UI Widget">a Stateful UI Widget</option>
    </optgroup>
  </select>

 

3. Finnaly, call the plugin

1
2
3
4
5
6
<script type="text/javascript">
$(document).ready(function() {
  //Calls the selectBoxIt method on your HTML select box.
  var selectBox = $("select#test").selectBoxIt().data("selectBoxIt");         
});
</script>
Options: 
showEffect
String
Default : none - "none", "fadeIn", "show", "slideDown", or any of the jQueryUI show effects (i.e. "bounce")
showEffectOptions
Object
Default : {} - All of the available properties are based on the jqueryUI effect options(i.e. {direction: "down"} )
showEffectSpeed
String
Default : medium - "slow", "medium", "fast", or any numeric number (milliseconds)
hideEffect
String
Default : none - "none", "fadeOut", "hide", "slideUp", or any of the jQueryUI hide effects (i.e. "bounce")
hideEffectOptions
Object
Default : {} - All of the available properties are based on the jqueryUI effect options(i.e. {direction: "up"} )
hideEffectSpeed
String
Default : medium - "slow", "medium", "fast", or any numeric number (milliseconds)
showFirstOption
Boolean
Default : true - true or false
defaultText
String
Default : " " - Any text may be used
defaultIcon
String
Default : " " - Any valid string classname may be used
downArrowIcon
String
Default : " " - Any valid string classname may be used
theme
String
Default : bootstrap - "bootstrap", "jqueryui", or "jquerymobile"
keydownOpen
Boolean
Default : true - true or false
isMobile
Function
Default : iPhone|iPod|iPad|Android|BlackBerry|Opera Mini|IEMobile - Any function that returns true or false
nostyle
Boolean
Default : false - true or false
native
Boolean
Default : false - true or false
aggressiveChange
Boolean
Default : false - true or false
Screenshots

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.7
jQuery U.I
>= 1.8
Current version
2.3.0
Browsers compatibility
Google ChromeIE 8IE 9Mozilla FirefoxOperaSafari
Fork it on github Comments [0]