Labelauty–jQuery单选框/复选框美化插件分享


本文实例讲述了Labelauty–jQuery单选框/复选框美化插件,分享给大家供大家参考。具体如下:
Labelauty–jQuery单选框/复选框美化插件,基于jQuery的一个非常小巧的插件,它除了能够实现单选框/复选框原本的选中、未选中、禁用等功能外,还能够设置选中和未选中的文本信息、标签的最小宽度等。
运行效果图:-------------------------------查看效果------------------------------------

具体代码如下

<head>
<title>Labelauty–jQuery单选框/复选框美化插件</title>
<link rel="stylesheet" href="css/jquery-labelauty.css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-labelauty.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<h1>jQuery单选框/复选框美化插件演示</h1>
<h3>您的职业(单选框)</h3>
<ul class="">
 <li><input type="radio" name="radio" data-labelauty="视觉设计师"></li>
 <li><input type="radio" name="radio" data-labelauty="交互设计师"></li>
 <li><input type="radio" name="radio" data-labelauty="前端工程师"></li>
 <li><input type="radio" name="radio" data-labelauty="数据分析师"></li>
 <li><input type="radio" name="radio" disabled data-labelauty="不可用"></li>
</ul>

<hr>

<h3>您擅长的技能(复选框)</h3>
<ul class="">
 <li><input type="checkbox" name="checkbox" disabled checked data-labelauty="HTML"></li>
 <li><input type="checkbox" name="checkbox" data-labelauty="CSS"></li>
 <li><input type="checkbox" name="checkbox" data-labelauty="JavaScript"></li>
 <li><input type="checkbox" name="checkbox" data-labelauty="SEO"></li>
 <li><input type="checkbox" name="checkbox" data-labelauty="PHP"></li>
 <li><input type="checkbox" name="checkbox" data-labelauty="JAVA"></li>
 <li><input type="checkbox" name="checkbox" data-labelauty=".NET"></li>
</ul>
<script>
$(function(){
 $(':input').labelauty();
});
</script>
<!-- 代码 结束 -->

<div style="text-align:center;margin:50px 0">
<p style="margin:20px 0"></p>
</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。



相关阅读:
JavaScript基础知识学习笔记
Jquery中基本选择器用法实例详解
C#数字图象处理之图像灰度化方法
JavaScript禁止页面操作的示例代码
iOS开发中使用Quartz2D绘制上下文栈和矩阵的方法
详解Java异常处理中finally子句的运用
jquery无法设置checkbox选中即没有变成选中状态
jQuery获取字符串中出现最多的数
JS实现仿百度输入框自动匹配功能的示例代码
Jquery获取和修改img的src值的方法
javascript引擎长时间独占线程造成卡顿的解决方案
Json数据解析模拟美团界面显示
nodeType属性返回被选节点的节点类型介绍
Android 游戏开发之Canvas画布的介绍及方法
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4