美文网首页
单、复选款美化

单、复选款美化

作者: Jill1231 | 来源:发表于2016-11-22 10:58 被阅读0次

经常用到单复选框,都是用了之后就丢,这次,想来整理整理它,才发现,原来单复选框也是可以这么美这么多功能的

第一款

它除了能够实现单选框/复选框原本的选中、未选中、禁用等功能外,还能够设置选中和未选中的文本信息、标签的最小宽度
好,现在,我们就开始哗啦啦的写栗子了,开门见山
头部引用

<script src="source/jquery-1.8.3.min.js"></script>
<script src="source/jquery-labelauty.js"></script>
<link rel="stylesheet" type="text/css" href="source/styles.css">
<link rel="stylesheet" type="text/css" href="source/jquery-labelauty.css">

栗子html主要代码

<h3>您喜欢的职业(单选)</h3>
<ul class="dk-setText">
    <li><input type="radio" name="radio" data-labelauty="安卓工程师"></li>
    <li><input type="radio" name="radio" data-labelauty="iOS工程师"></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>
<h3>您擅长的技能(复选框)</h3>
<ul class="dk-setText">
    <li><input type="checkbox" name="checkbox" disabled checked data-labelauty="HTML5"></li>
    <li><input type="checkbox" name="checkbox" data-labelauty="CSS3"></li>
    <li><input type="checkbox" name="checkbox" data-labelauty="JavaScript"></li>
    <li><input type="checkbox" name="checkbox" data-labelauty="jquery"></li>
    <li><input type="checkbox" name="checkbox" data-labelauty="vue.js"></li> 
    <li><input type="checkbox" name="checkbox" data-labelauty="node.js"></li>
    <li><input type="checkbox" name="checkbox" data-labelauty="angular.js"></li>
</ul>

好,精彩的刚开始,只要调用一句代码,即可拥有这么好看的单复选框啦(下面采用 图-调用代码 的格式给大家展示)


Paste_Image.png
$(function(){  $('.dk-setText input').labelauty();});
Paste_Image.png
$(function(){    $('.dk-setLabel input').labelauty({ label: false });});
Paste_Image.png
$(function(){    $(".dk-setIcon input").labelauty({ icon: false });});
Paste_Image.png
$(function(){    $(".dk-separator input").labelauty({ separator: "-" });});
Paste_Image.png
$(function(){    $(".dk-setId input").labelauty({ force_random_id: true});});
Paste_Image.png
$(function(){    $(".dk-setDelabel input").labelauty({        checked_label: "你选择了它",        unchecked_label: "我不想要它"    });});
Paste_Image.png
$(function(){    $(".dk-minimum input").labelauty({ minimum_width: "40px" });});
Paste_Image.png
$(function(){    $(".dk-same input").labelauty({ same_width: true });});

第二款

上面的还不能满足你的需求?别虚,再来一发

Paste_Image.png

这一款,是纯css3实现的,不需要调用,只需饮用一个css文件即可,下来,让我来细细跟你讲怎么简单用

Paste_Image.png

是不是很简单,很轻便?喜欢的可以拉下面去,下载所有代码噢!
转载请注明来自JillYu博客-http://write.blog.csdn.net/postlist

代码下载:https://coding.net/u/Jill/p/dankal-jill/git

相关文章

网友评论

      本文标题:单、复选款美化

      本文链接:https://www.haomeiwen.com/subject/doeupttx.html