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 相关文章推荐
js实现ASP分页函数 HTML分页函数
Sep 22 Javascript
jquery 双色表格实现代码
Dec 08 Javascript
IE浏览器中图片onload事件无效的解决方法
Apr 29 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
javascript中createElement的两种创建方式
May 14 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
JavaScript模块化之使用requireJS按需加载
Apr 12 Javascript
详解vue.js的devtools安装
May 26 Javascript
node文字生成图片的示例代码
Oct 26 Javascript
js实现登录与注册界面
Nov 01 Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 Javascript
JavaScript JSON使用原理及注意事项
Jul 30 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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
destoon数据库表说明汇总
2014/07/15 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
jQuery 开天辟地入门篇一
2009/12/09 Javascript
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
使用JavaScript和C#中获得referer
2014/11/14 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
2015/07/22 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
Python入门篇之编程习惯与特点
2014/10/17 Python
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
python可视化实现代码
2019/01/15 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
ASP.NET中的身份验证有那些
2012/07/13 面试题
2014年应届大学生自我评价
2014/01/09 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
搞笑婚前保证书
2015/02/28 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
请假条应该怎么写?
2019/06/24 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript