必优博客

表单作为页面元素最重要的交互元素，其使用和显示一直是前端设计和挖掘的重点，因此也出现了大量的针对表单的插件，这里必优介绍一个可实现把页面元素转化的jQuery插件imageTick，它可以把复选框和单选框转化为图片，美化表单显示效果，使用简单，效果图如下：

使用说明
需要使用jQuery库文件和imageTick库文件[在线演示][下载]
必优推荐级别：★★★

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

1. <script type="text/javascript" src="jquery.js"></script>
2. <script type="text/javascript" src="imagetick.js"></script>

二，HTML部分

1. <ul>
2. <li>
3. <input type="radio" value="php" id="php" name="biuuu" />
4. <label for="php">PHP</label>
5. </li>
6. <li>
7. <input type="radio" id="javascript" value="javascript" name="biuuu" checked="checked" />
8. <label for="javascript">Javascript</label>
9. </li>
10. <li>
11. <input type="radio" id="html" value="html" name="biuuu" />
12. <label for="html">HTML</label>
13. </li>
14. <li>
15. <input type="radio" id="sql" value="sql" name="biuuu" />
16. <label for="sql">SQL</label>
17. </li>
18. <li>
19. <input type="radio" id="japanese" value="japanese" name="biuuu" />
20. <label for="japanese">Japanese</label>
21. </li>
22. </ul>

三，Javascript部分

1. <script type="text/javascript">
2. $(document).ready(function(){
3. $("input[name='biuuu']").imageTick({
4. tick_image_path: "images/radio.gif",
5. no_tick_image_path: "images/no_radio.gif",
6. image_tick_class: "radios"
7. });
8. });
9. </script>

如上实例，把name为biuuu的复选框转化为图片，直接调用jQuery插件imageTick即可，对于单选框的使用方式也一样，使用非常简单，其中相关参数说明如下：

tick_image_path表示转化的图片
no_tick_image_path表示没有转化的图片
image_tick_class表示显示的CSS效果

具体可查看imageTick实例，同时可了解一下imageTick插件的JS库文件，掌握表单元素的替换原理。

点我下载imageTick源程序
http://jquerycodes.googlecode.com/files/imagetick.rar