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


Posted in Javascript onSeptember 26, 2015

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

Labelauty?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 相关文章推荐
Extjs显示从数据库取出时间转换JSON后的出现问题
Nov 20 Javascript
json实现添加、遍历与删除属性的方法
Jun 17 Javascript
jfinal与bootstrap的登出实战详解
Nov 27 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
详解react、redux、react-redux之间的关系
Apr 11 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
jquery使用FormData实现异步上传文件
Oct 25 jQuery
详解Vue2.5+迁移至Typescript指南
Aug 01 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 Javascript
elementui实现预览图片组件二次封装
Dec 29 Javascript
浅谈Javascript中Object与Function对象
Sep 26 #Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 #Javascript
深入分析jsonp协议原理
Sep 26 #Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 #Javascript
angularjs学习笔记之双向数据绑定
Sep 26 #Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 #Javascript
angularjs学习笔记之完整的项目结构
Sep 26 #Javascript
You might like
php minixml详解
2008/07/19 PHP
配置php网页显示各种语法错误
2013/09/23 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
javascript eval函数深入认识
2009/02/21 Javascript
测试你的JS的掌握程度的代码
2009/12/09 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
浅谈javascript六种数据类型以及特殊注意点
2013/12/20 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
vue keep-alive 动态删除组件缓存的例子
2019/11/04 Javascript
python中xrange和range的区别
2014/05/13 Python
python实现web方式logview的方法
2015/08/10 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
Python通过Pygame绘制移动的矩形实例代码
2018/01/03 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
Python中bisect的使用方法
2019/12/31 Python
HTML5在手机端实现视频全屏展示方法
2020/11/23 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
.NET概念性的面试题
2012/02/29 面试题
简短的公司员工自我评价分享
2013/11/13 职场文书
珍爱生命演讲稿
2014/05/10 职场文书
小区文明倡议书
2014/05/16 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
2014年质检员工作总结
2014/11/18 职场文书
销售助理岗位职责
2015/02/11 职场文书
拖欠货款起诉状
2015/05/20 职场文书
写给同事的离职感言
2015/08/04 职场文书
护士工作心得体会
2016/01/25 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
Python学习之包与模块详解
2022/03/19 Python