Submit your widget

jQuery & CSS3 custom skin select lists

Created 6 years ago   Views 45687   downloads 11135    Author myjqueryplugins
jQuery & CSS3 custom skin select lists
View DemoDownload 48.7 KB
138
Share |

Skin your HTML select lists easily with Selectyze plugin.
It works with IE6-9, chrome, Safari, Firefox..

HOW DOES IT WORK ?
Selectyze hide your select element, and build a <div> just below the select element. Inside this new <div>, 2 elements are create <a> & <ul> to simulate the behaviour of a select element. Very simple !

Selectyze implementation

1. First, include the CSS & jQuery files

<!-- include CSS & JS files -->
 <!-- CSS file -->
 <link rel="stylesheet" type="text/css" href="Selectyze.jquery.css" media="screen" />
 <!-- jQuery files -->
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="Selectyze.jquery.min.js"></script> 

2. Add your HTML !

<!-- Basic / Normal HTML Select element -->
 <select name="my_select" class="selectyze">
 <option>- -</option>
 <!-- Don't forget selected="selected" if you want this option selected by default --> 
<option value="value1" selected="selected">Value 1</option>
 <option value="value2">Value 2</option>
 </select> 

3. Now, call the Selectyze plugin

<script type="text/javascript">
 $(document).ready(function(){
 // simple Selectyze call 
$(".selectyze").Selectyze();
 // call with options 
$(".selectyze").Selectyze({
 theme:'css3',
 effectOpen:'fade', 
effectClose:'slide'
 }); 
}); 
</script> 

Read more:http://www.myjqueryplugins.com/Selectyze