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多线程的实现方法
May 08 Javascript
JavaScript访问样式表代码
Oct 15 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
Node.js操作redis实现添加查询功能
May 25 Javascript
微信小程序多列选择器range-key使用详解
Mar 30 Javascript
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 Javascript
如何在JavaScript中等分数组的实现
Dec 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
PHP.MVC的模板标签系统(四)
2006/09/05 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
ini_set的用法介绍
2014/01/07 PHP
php类声明和php类使用方法示例分享
2014/03/29 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
php遍历类中包含的所有元素的方法
2015/05/12 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
Sea.JS知识总结
2016/05/05 Javascript
Vue项目实现换肤功能的一种方案分析
2019/08/28 Javascript
vue ssr+koa2构建服务端渲染的示例代码
2020/03/23 Javascript
Python模拟登录的多种方法(四种)
2018/06/01 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
python实现人脸签到系统
2020/04/13 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
致长跑运动员广播稿
2014/01/31 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
打架检讨书
2015/01/27 职场文书
大学生读书笔记范文
2015/07/01 职场文书
暑期家教宣传单
2015/07/14 职场文书
大学同学聚会感言
2015/07/30 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js