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 相关文章推荐
document.getElementById介绍
Sep 13 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
Jul 09 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
Jan 14 Javascript
详细分析JavaScript变量类型
Jul 08 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 Javascript
Bootstrap按钮下拉菜单组件详解
May 10 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 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
mysql5写入和读出乱码解决
2006/11/25 PHP
用php获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
使用php计算排列组合的方法
2013/11/13 PHP
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
JQuery 弹出框定位实现方法
2010/12/02 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
js匿名函数作为函数参数详解
2016/06/01 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
Node.js五大应用性能技巧小结(必须收藏)
2017/08/09 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
[00:02]DOTA2新版本使用PA至宝后暴击展示
2014/11/19 DOTA
python处理中文编码和判断编码示例
2014/02/26 Python
Python决策树分类算法学习
2017/12/22 Python
django 类视图的使用方法详解
2019/07/24 Python
Python3 批量扫描端口的例子
2019/07/25 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
泰国第一在线超市:Tops
2021/02/13 全球购物
管理部部长岗位职责
2013/12/05 职场文书
校庆口号
2014/06/20 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
大二学生自我检讨书
2014/10/23 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
大学生个人总结范文
2015/02/15 职场文书