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 相关文章推荐
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
javascript特殊用法示例介绍
Nov 29 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
微信js-sdk界面操作接口用法示例
Oct 12 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 Javascript
Extjs表单输入框异步校验的插件实现方法
Mar 20 Javascript
详解Vue使用命令行搭建单页面应用
May 24 Javascript
js封装成插件的步骤方法
Sep 11 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 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 json中文编码为null的解决办法
2016/12/14 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
[01:08:24]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第一场 2月5日
2021/03/11 DOTA
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
python基础之入门必看操作
2017/07/26 Python
python定时关机小脚本
2018/06/20 Python
Python中的取模运算方法
2018/11/10 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
政府信息公开实施方案
2014/05/09 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python