使用jQuery UI 制作个性化的复选框效果

站在整体与部分的角度，让我们来思考一下部分对于整体的重要性，制作个性化的复选框，这只是表单[大一 点就是网页]元素中的一部分，如果要精细到这个程度，那部分的效应将会给整体带来很大的影响，当然，我说的这些基本跑题，因为大家专注的不是这些，但你要 知道，单纯的复选框效果如果没有整体风页的配合，那却很难发挥它的极致，使用jQuery UI制作个性化的复选框，效果图如下：
使用jQuery UI 制作个性化的复选框效果

点我下载jQuery UI checkbox插件实例源程序[下载]

使用说明
需要使用jQuery库文件，jQuery UI库文件和jQuery UI checkbox插件
同时需要定义复选框显示的CSS样式
必优推荐级别：★★★
使用实例
一，包含文件部分

  1. <script type="text/javascript" src="jquery.min.js"></script>
  2. <script type="text/javascript" src="jquery-ui.min.js"></script>
  3. <script type="text/javascript" src="ui.checkbox.js"></script>

二，HTML部分

  1. <form id="ui">
  2. <label for="test1">Test 1</label>
  3. <input type="checkbox" name="test1" value="test" id="ui-test1"/>
  4. <label for="test2">Test 2</label>
  5. <input type="checkbox" name="test2" value="test" id="ui-test2" checked="checked"/>
  6. <label for="test3">Test 3</label>
  7. <input type="checkbox" name="test3" value="test" id="ui-test3"/>
  8. <label for="test3">Test 4</label>
  9. <input type="checkbox" name="test4" value="test" id="ui-test4"/>
  10. <label for="test3">Test 5</label>
  11. <input type="checkbox" name="test5" value="test" id="ui-test5"/><br />
  12. <label for="radio1">Radio 1</label>
  13. </form>

三，Javascript部分

  1. <script type="text/javascript">
  2. $("form#ui input").filter(":checkbox,:radio").checkbox();
  3. $("#ui-test4").parent(".ui-checkbox").addClass("ui-state-highlight");
  4. $("#ui-test5").parent(".ui-checkbox").addClass("ui-state-error");
  5. </script>

如上实例，使用jQuery UI checkbox插件实现个性化的复选框非常简单，可直接定义在需要实现的复选框元素上。

点我下载jQuery UI checkbox插件实例源代码

共有0个回答