jquery.onoff实现简单的开关按钮功能(推荐)


            插件下载地址：

http://xiazai.zwyuanma.com/201803/yuanma/jquery.onoff(zwyuanma.com).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实现简单的开关按钮功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对中文源码网网站的支持！