<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>接着就是在你的Select下拉列表框的代码里,给定一个ID或者Class,这样插件可以通过ID或者Class来美化你的下拉框。
<select name="style5" class="selectyze5"> <!-- 下面这个作为下拉列表框里默认显示内容 --> <option>点击选择列表内容</option> <!-- 下面这个optgroup标签可以用来给列表内容分组 --> <optgroup label="《虞美人》李煜"> <option value="春花秋月何时了">春花秋月何时了</option> <option value="往事知多少">往事知多少</option> <option value="小楼昨夜又东风">小楼昨夜又东风</option> <option value="故国不堪回首月明中">故国不堪回首月明中</option> <option value="雕阑玉砌应犹在">雕阑玉砌应犹在</option> <option value="只是朱颜改">只是朱颜改</option> <option value="问君能有几多愁">问君能有几多愁</option> <option value="恰是一江春水向东流">恰是一江春水向东流</option> </optgroup> </select>最后Selectyze粉墨登场,下拉框美不美就看它了,调用代码如下:
<script type="text/javascript"> $(document).ready(function(){ $('.selectyze1').Selectyze({ theme : 'skype', //下拉框的风格 effectOpen:'fade', //下拉框弹出时的效果 effectClose:'slide' //下拉框收回时的效果 }); }); </script>插件选项:
theme 默认值 : 'css3' 风格:css3,firefox,grey,mac,skype effectOpen 默认值 : 'slide' 下拉框打开时的效果 effectClose 默认值 : 'slide' 下拉框收起时的效果
上一篇[MOVIESHOW] A Very Long Engagement 爱在战火纷飞时
下一篇“双面” 劳动节