$(selector).styledDropdown({options});
The benefits of using the styledDropdown jQuery plugin to progressively enhance an select
element into a manageable ul
list element. This method offers a fail-safe degradation back to a normal select
element in case the user can't render the styled ul
. The "selected" value(s), like in a normal select
element, is appended as a hidden element holding the name of the original select
element and it's selected value(s).
Call $(selector).styledDropdown(options)
on any select
element. {options}
are optional and defined in JSON. They extend the functionality of the plugin as follows:
Arguments | Type | Description |
---|---|---|
attrsToCopy | array | An array of attributes to copy from one element to the other. Default: ['title', 'name', 'class'] . NOTE: this may produce invalid XHTML in order to carry select element properties to the enhanced list. |
onClickCallback | function | A callback function to run on select click. |
onChangeCallback | function | A callback function to run after selected changes. |
callback | function | A callback function to run after the plugin finishes converting the select element. Great for adding ul effects. |
debug | boolean | run in debug mode. |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="jquery/styledDropdown.jquery.js"></script>
$().styledDropdown()
on elements when DOM is ready<script> $(function(){ $('select').styledDropdown(); }); </script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Rel Copy Example</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="jquery/styledDropdown.jquery.js"></script> <script> $(function(){ $('#select').styledDropdown(); }); </script> {...} </head> <body> <p>Sort by <select id="select" onchange="console.log(this.value)" name="sortby">
<option selected="selected" value="relevance">Relevance</option>
<option value="lowToHigh">Price: Low to High</option>
<option value="highToLow">Price: High to Low</option>
<option value="descriptionAZ">Description: A to Z</option>
<option value="descriptionZA">Description: Z to A</option>
<option value="topRated">Top Rated</option>
</select>
</p>
</body>
</html>
StyledDropdown recodes the above highlighted code as follows. Use this format to appropriately apply CSS styles:
<p>Sort by
<dl id="select" class="select" value="relevance" name="sortby"> <dd class="selected option" value="relevance">Relevance</dd> <dd class="option" value="lowToHigh">Price: Low to High</dd> <dd class="option" value="highToLow">Price: High to Low</dd> <dd class="option" value="descriptionAZ">Description: A to Z</dd> <dd class="option" value="descriptionZA">Description: Z to A</dd> <dd class="option" value="topRated">Top Rated</dd> </dl> </p> <style> dl.select {border:1px solid #666;position:relative; max-height:1.25em; width:160px; -moz-border-radius:3px;} dl.select dt {text-indent:5px} dl.select dt a {text-decoration:none;} dl.select dd {width:160px; display:none; margin:0; background:#fff; border-left:1px solid #666; border-right:1px solid #666;} dl.select dd:last-child {border-bottom:1px solid #ccc;} dl.select dd:hover {background:#eee; } dl.select.hover dd {display:block;} dl.select dd a {text-decoration:none;} dl.select dd a:hover { background:#eee;} </style>
$("#select").styledDropdown();
Sort by
$("#select2").styledDropdown({
callback:function(e){
$(e).find('dd').wrapAll("<div class='overflow' />");
}
});
<style> dl.select2 {border:1px solid #666;position:absolute; max-height:1.25em; width:160px;}
dl.select2 dt {text-indent:5px}
dl.select2 dt a {text-decoration:none;}
dl.select2 dd {display:none; margin:0; background:#fff; padding-left:3px;}
dl.select2 dd:hover {background:#eee;}
dl.select2.hover dd {display:block;}
dl.select2 dd a {text-decoration:none;}
dl.select2 dd a:hover {background:#eee;}
dl.select2.hover .overflow { overflow:scroll; overflow-x:hidden; position:relative; left:-1px; margin-top:0px; border:1px solid #666; height:100px; width:100%;} </style>
Sort by