登录 注册
开源 企业版 高校版 私有云 模力方舟 模力方舟
开源项目 > WEB应用开发 > jQuery插件 &&
扫描微信二维码支付
取消
支付完成
Watch
不关注 关注所有动态 仅关注版本发行动态 关注但不提醒动态
17 Star 25 Fork 2

pengjy/jquery.nicelabel

代码 Issues 0 Pull Requests 0 Wiki 统计 流水线
服务
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目，私有仓库也完全免费 ：）
免费加入
文件
该仓库未声明开源许可证文件（LICENSE），使用请关注具体项目描述及其代码上游依赖。
项目仓库所选许可证以仓库主分支所使用许可证为准
克隆/下载
nicelabel.html 5.99 KB
一键复制 编辑 原始数据 按行查看 历史
pengjy 提交于 2016-05-17 10:11 +08:00 . jquery.nicelabel.js JQUERY PLUGIN
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

	<link href="./nicelabel/css/jquery-nicelabel.css" rel="stylesheet" type="text/css" />

	<script src="./nicelabel/js/jquery.min.js"></script>

	<style>

		.clearfix{clear:both;}

		.rect-checkbox{float:left;margin-left:20px;}

		.rect-radio{float:left;margin-left:20px;}

		.circle-checkbox{float:left;margin-left:20px;}

		.circle-radio{float:left;margin-left:20px;}

		.text_checkbox{float:left;margin-left:20px;}

		.text_radio{float:left;margin-left:20px;}

	</style>

</head>

<body>



	<div id="rect-checkbox">

		<h2 style="margin-left:20px;">矩形滑块checkbox</h2>

		<br>

		<input class="rect-nicelabel" data-nicelabel='{"position_class": "rect-checkbox"}' checked type="checkbox" />

		<input class="rect-nicelabel" data-nicelabel='{"position_class": "rect-checkbox"}' type="checkbox" />

		<input class="rect-nicelabel" data-nicelabel='{"position_class": "rect-checkbox"}' disabled type="checkbox" />

		<input class="rect-nicelabel" data-nicelabel='{"position_class": "rect-checkbox"}' type="checkbox" />

	</div>	

	<div class="clearfix"></div>

	<br>

	<div id="rect-radio">

		<h2 style="margin-left:20px;">矩形滑块radio</h2>

		<br>

		<input class="rect-nicelabel" data-nicelabel='{"position_class": "rect-radio"}' checked name="rect-radio" type="radio" />

		<input class="rect-nicelabel" data-nicelabel='{"position_class": "rect-radio"}' name="rect-radio" type="radio" />

		<input class="rect-nicelabel" data-nicelabel='{"position_class": "rect-radio"}' name="rect-radio" type="radio" />

		<input class="rect-nicelabel" data-nicelabel='{"position_class": "rect-radio"}' disabled name="rect-radio" type="radio" />

	</div>

	<div class="clearfix"></div>

	<br>

	<div id="circle-checkbox">

		<h2 style="margin-left:20px;">圆形滑块checkbox</h2>

		<br>

		<input class="circle-nicelabel" data-nicelabel='{"position_class": "circle-checkbox"}' disabled checked type="checkbox" />

		<input class="circle-nicelabel" data-nicelabel='{"position_class": "circle-checkbox"}'  type="checkbox" />

		<input class="circle-nicelabel" data-nicelabel='{"position_class": "circle-checkbox"}'  type="checkbox" />

		<input class="circle-nicelabel" data-nicelabel='{"position_class": "circle-checkbox"}'  type="checkbox" />

	</div>	

	<div class="clearfix"></div>

	<br>

	<div id="circle-radio">

		<h2 style="margin-left:20px;">圆形滑块radio</h2>

		<br>

		<input class="circle-nicelabel" data-nicelabel='{"position_class": "circle-radio"}' disabled checked name="circle-radio" type="radio" />

		<input class="circle-nicelabel" data-nicelabel='{"position_class": "circle-radio"}' name="circle-radio" type="radio" />

		<input class="circle-nicelabel" data-nicelabel='{"position_class": "circle-radio"}' name="circle-radio" type="radio" />

		<input class="circle-nicelabel" data-nicelabel='{"position_class": "circle-radio"}' name="circle-radio" type="radio" />

	</div>

	<div class="clearfix"></div>

	<br>

	<div id="text-checkbox">

		<h2 style="margin-left:20px;">文字按钮checkbox</h2>

		<br>

		<input class="text-nicelabel" data-nicelabel='{"position_class": "text_checkbox", "checked_text": "已选定", "unchecked_text": "前端工程师"}' checked type="checkbox" />	

		<input class="text-nicelabel" data-nicelabel='{"position_class": "text_checkbox", "checked_text": "已选定", "unchecked_text": "PHP工程师"}' type="checkbox" />	

		<input class="text-nicelabel" data-nicelabel='{"position_class": "text_checkbox", "checked_text": "已选定", "unchecked_text": "IOS工程师"}' type="checkbox" />	

		<input class="text-nicelabel" data-nicelabel='{"position_class": "text_checkbox"}' type="checkbox" />	

	</div>		

	<div class="clearfix"></div>

	<br>

	<div id="text-radio">

		<h2 style="margin-left:20px;">文字按钮radio</h2>

		<br>

		<input class="text-nicelabel" data-nicelabel='{"position_class": "text_radio", "checked_text": "已选定", "unchecked_text": "前端工程师"}' checked type="radio" name="text_radio" />	

		<input class="text-nicelabel" data-nicelabel='{"position_class": "text_radio", "checked_text": "已选定", "unchecked_text": "PHP工程师"}' type="radio" name="text_radio"  />	

		<input class="text-nicelabel" data-nicelabel='{"position_class": "text_radio", "checked_text": "已选定", "unchecked_text": "IOS工程师"}' type="radio" name="text_radio"  />	

		<input class="text-nicelabel" data-nicelabel='{"position_class": "text_radio"}' type="radio" name="text_radio"  />	

	</div>	

	<div class="clearfix"></div>

	<br>

	<div id="text-checkbox-ico">

		<h2 style="margin-left:20px;">自定义图标文字按钮</h2>

		<br>

		<input class="text-nicelabel" data-nicelabel='{"position_class": "text_checkbox", "checked_text": "已选定", "unchecked_text": "前端工程师"}' checked type="checkbox" />	

		<input class="text-nicelabel" data-nicelabel='{"position_class": "text_checkbox", "checked_text": "已选定", "unchecked_text": "PHP工程师"}' type="checkbox" />	

		<input class="text-nicelabel" data-nicelabel='{"position_class": "text_checkbox", "checked_text": "已选定", "unchecked_text": "IOS工程师"}' type="checkbox" />	

		<input class="text-nicelabel" data-nicelabel='{"position_class": "text_checkbox"}' type="checkbox" disabled />	

	</div>



</body>

	<script src="./nicelabel/js/jquery.nicelabel.js"></script>

	<script>

	$(function(){

		$('#rect-checkbox > input').nicelabel();

		$('#rect-radio > input').nicelabel();

		$('#circle-checkbox > input').nicelabel();

		$('#circle-radio > input').nicelabel();

		$('#text-checkbox > input').nicelabel();

		$('#text-radio > input').nicelabel();

		$('#text-checkbox-ico > input:eq(0)').nicelabel({

			checked_ico: './ico/checked.png',

			unchecked_ico: './ico/unchecked.png'

		});

		$('#text-checkbox-ico > input:eq(1)').nicelabel({

			checked_ico: './ico/checked.png',

			unchecked_ico: './ico/unchecked.png'

		});

		$('#text-checkbox-ico > input:eq(2)').nicelabel({

			checked_ico: './ico/checked.png',

			unchecked_ico: './ico/unchecked.png'

		});

		$('#text-checkbox-ico > input:eq(3)').nicelabel({

			uselabel: false

		});

		

	});

	</script>

</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/pjy/jquery-plugin.git
git@gitee.com:pjy/jquery-plugin.git
pjy
jquery-plugin
jquery.nicelabel
master
点此查找更多帮助

搜索帮助

Git 命令在线学习 如何在 Gitee 导入 GitHub 仓库
Git 仓库基础操作
企业版和社区版功能对比
SSH 公钥设置
如何处理代码冲突
仓库体积过大，如何减小？
如何找回被删除的仓库数据
Gitee 产品配额说明
GitHub仓库快速导入Gitee及同步更新
什么是 Release（发行版）
将 PHP 项目自动发布到 packagist.org
评论
仓库举报
回到顶部