jQuery插件Stylish Select Box实现具体特色风格的下拉框

传统的表单下拉框永远都是一成不变的样式，如果能给下拉框增加特殊的风格样式，肯定能让表单的用户体验增色不少，这里介绍一个jQuery插件 Stylish Select Box，插件的名称就能看出这插件的功能，可实现自定义的下拉框样式效果，也就是说下拉的风格可自定义，使用简单，直接调用即可，先看一下效果图如下：
jQuery插件Stylish Select Box实现具体特色风格的下拉框

使用说明
需要使用JQuery库文件和Stylish Select Box库文件
同时需要自定义下拉框的CSS样式

必优推荐级别：★★★★

使用实例
一，包含文件部分

  1. <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  2. <script src="jquery.stylish-select.js" type="text/javascript"></script>
  3. <link rel="stylesheet" type="text/css" href="stylish-select.css" />

二，HTML部分

  1. <select id="my-dropdown" name="my-dropdown">
  2. <option value="1">PHP</option>
  3. <option value="2">MySQL</option>
  4. <option value="3" selected="selected">jQuery</option>
  5. <option value="4">Javascript</option>
  6. <option value="5">SEO</option>
  7. <option value="6">必优博客</option>
  8. <option value="7">biuu.com</option>
  9. <option value="8">goolge</option>
  10. </select>

三，Javascript部分

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. $('#my-dropdown').sSelect();
  4. });
  5. </script>

如上实例，直接使用下拉框的ID（如上my-dropdown）直接调用sSelect()就实现了表单下拉框的特色风格，使用就是这么简单。充分体现了jQuery精神实质，简单！