17 Star 25 Fork 2

pengjy / jquery.nicelabel

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

JQuery插件

jquery.nicelabel.js version1.0###


功能简介###

引入插件,简单配置,即可将checkbox、radio美化~


截图###

demo


###在线DEMO### DEMO


##使用方法##

有三种类型的样式,分别为:

  1.矩形滑块,需在要初始化的input中添加class="rect-nicelabel"
  2.圆形滑块,需在要初始化的input中添加class="circle-nicelabel"
  3.文字图标按钮,需在要初始化的input中添加class="text-nicelabel"

通过data-nicelabel='{}'来配置基本属性(JSON形式)

可配置:

   1.position_class:'someClass',该属性可配置按钮的位置的类(可不配置,默认值为nicelabel-default-position)
   2.checked_text:'someValue',该属性制定文字图标按钮被选定时显示的文本(可不配置,默认为Checked)
   3.unchecked_text:'someValue',该属性制定文字图标未选定时显示的文本(可不配置,默认为Unchecked)
<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 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>		

js初始化配置信息

$('selector').nicelabel();

如果是文本按钮,可配置

$('selector').nicelabel({ uselabel: true or false,//是否显示图标,默认true

checked_ico: 'imgurl',//选定时显示的图标(不配置的话显示默认图标)

unchecked_ico: 'imgurl',//未选定时显示的图标(不配置的话显示默认图标)

checked_text: 'Text', //选定时默认显示的文本(默认值为Checked)

unchecked_text: 'Text', //未选定时默认显示的文本(默认值为Unchecked)

});

//引入jquery文件以及nicelabel的css以及js文件
<link href="./nicelabel/css/jquery-nicelabel.css" rel="stylesheet" type="text/css" />
<script src="./nicelabel/js/jquery.min.js"></script>
<script src="./nicelabel/js/jquery.nicelabel.js"></script>
	<script>
	$(function(){
	    //初始化
		$('#rect-checkbox > input').nicelabel();
        //带参数的初始化
		$('#text-checkbox-ico > input').nicelabel({
			checked_ico: './checked.png',
			unchecked_ico: './unchecked.png'
		});
		
	});
	</script>

感谢Francisco Neves,部分创意来自Francisco Neves


后记

该版本为1.0,将不定期更新,更多样式,更多自定义配置,敬请期待~

转载请保留版权信息

作者:PJY

新浪微博:猫溜网

空文件

简介

通过简单配置来将简单的单选、复选框变得好看大方~ 展开 收起
JavaScript
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/pjy/jquery-plugin.git
git@gitee.com:pjy/jquery-plugin.git
pjy
jquery-plugin
jquery.nicelabel
master

搜索帮助