插件下载地址:
http://xiazai.jb51.net/201803/yuanma/jquery.onoff(jb51.net).rar
一个按钮小插件, 首先引入 CSS 和 js
- <script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
- <link rel="stylesheet" href="../js/dist/jquery.onoff.css" rel="external nofollow" />
- <script type="text/javascript" src="../js/dist/jquery.onoff.js"></script>
html 只需要写一个 input
<input type="checkbox" checked onclick="showmodel(this)"/>
然后 js 中只需要加一个. onoff()
$('input[type=checkbox]').onoff();
你会发现一个普通的 checkbox 变成了开关按钮
关于颜色和样式, 自己去 css 中找到相应的位置修改即可
- onoffswitch-inner:before {
- content: "OFF";
- padding-left: 3px;
- color: #FFFFFF;
- background-color: #A14776;
- }
- onoffswitch-inner:after {
- content: "ON";
- padding-right: 5px;
- color: #999999;
- background-color: #EEEEEE;
- text-align: right;
- }
关于事件
我点击开关显示模态框
jq 控制开关只需要这样就行
- $(ele).prop("checked",true) // 或 false
- function showmodel(ele){
- if(!$(ele).is(':checked')){
- var htmls=$(ele).parent().siblings('span').html();
- $('.mask').show();
- $('#reportName').html(htmls);
- $('#yzmBox').html(mathRand());
- }
- $(".cancel").unbind().click(function(){
- $(ele).prop("checked",true)
- $('.mask').hide();
- })
- $(".sure").unbind().click(function(){
- if($(".telBox input").val()==$('#yzmBox').html()){
- /*$.ajax({
- url: ipAddress + "/MMSDailyBackstage/task2/getTaskTypes",
- data:{"areaCode":"01","roleCode":"dhxt","appCode":"day_report","imei":"111111111111111"},
- type : "POST",
- dataType: "json",
- cache: false,
- async: false,
- success:function(json){
- var data=json.data;
- var html="";
- if(json.success){
- for(var i in data){
- var taskTypeSubs=data[i].taskTypeSubs;
- html+='<div class="col">'+
- '<p onclick="sliderDiv(this)"><span class="arrow down_a"></span><span>'+data[i].taskType.taskTypeName+'</span></p>'+
- '<ul class="lidetail">'
- for(var j in taskTypeSubs){
- html+='<li>'+
- '<img src="../img/aduiticon.png">'+
- '<span>'+taskTypeSubs[j].subTaskName+'</span>'+
- '<input type="checkbox"checked/ onclick="showmodel(this)">'+
- '</li>'
- }
- html+='</ul></div>'
- }
- $('#auditBox').append(html);
- $('input[type=checkbox]').onoff();
- }
- }
- });*/
- }
- })
- }
总结
以上所述是小编给大家介绍的 jquery.onoff 实现简单的开关按钮功能, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的. 在此也非常感谢大家对脚本之家网站的支持!
来源: http://www.jb51.net/article/140725.htm