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 相关文章推荐
javascript与asp.net(c#)互相调用方法
Dec 13 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
jQuery过滤选择器用法分析
Feb 10 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 Javascript
socket.io实现在线群聊功能
Apr 07 Javascript
jQuery为某个div加入行样式
Jun 09 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 Javascript
vue通过过滤器实现数据格式化
Jul 20 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 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使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
零基础写python爬虫之抓取百度贴吧代码分享
2014/11/06 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
python虚拟环境迁移方法
2019/01/03 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
python如何变换环境
2020/07/21 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
Ajax和javascript的区别
2013/07/20 面试题
工程师求职简历的自我评价分享
2013/10/10 职场文书
生产总经理岗位职责
2013/12/19 职场文书
4s店总经理岗位职责
2013/12/31 职场文书
部队万能检讨书
2014/02/20 职场文书
财务主管岗位职责
2014/02/28 职场文书
安全横幅标语
2014/06/09 职场文书
经营目标管理责任书
2014/07/25 职场文书
解除劳动合同证明书
2014/09/26 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
大学生毕业个人总结
2015/02/15 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL