Fonction du bouton de commutation implémentée par jquery.onoff

Cet article présente principalement la fonction simple du bouton de commutation implémentée par jquery.onoff. Elle est très bonne et a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer

. Un widget de bouton, introduisez d'abord CSS et 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 et il vous suffit d'écrire une entrée

<input type="checkbox" checked onclick="showmodel(this)"/>

Ensuite, il vous suffit d'ajouter un seul .onoff() dans js

$('input[type=checkbox]').onoff();

Vous constaterez qu'une case à cocher ordinaire devient bouton Switch

Concernant la couleur et le style, vous pouvez trouver la position correspondante en css et la modifier vous-même

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; 
}

À propos des événements

Je clique sur le commutateur pour afficher la boîte modale

Le commutateur de commande JQ n'en a besoin que

$(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+='
'+ 
                  '
'+data[i].taskType.taskTypeName+'
'+ 
                  '
' 
                for(var j in taskTypeSubs){ 
                  html+='
'+ 
                      ''+ 
                      ''+taskTypeSubs[j].subTaskName+''+ 
                      ''+ 
                    '
' 
                } 
                html+='
' 
            } 
            $('#auditBox').append(html); 
            $('input[type=checkbox]').onoff(); 
          } 
           
        } 
      });*/ 
    } 
     
  }) 
}

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun pour en savoir plus. contenu, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

jQuery implémente la méthode de surveillance de toutes les requêtes ajax sur la page

Implémentation de la validation globale sous bootstrapValidator basé sur jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!