Von jquery.onoff implementierte Schalterschaltflächenfunktion

In diesem Artikel wird hauptsächlich die einfache Umschalttastenfunktion vorgestellt, die von jquery.onoff implementiert wird. Sie ist sehr gut und hat einen gewissen Referenzwert.

Ein Schaltflächen-Widget, das zuerst CSS und JS einführt

<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 und nur eine Eingabe schreiben muss

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

Dann müssen Sie nur noch eine .onoff() hinzufügen

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

Sie werden feststellen, dass ein gewöhnliches Kontrollkästchen zu einer Schalterschaltfläche wird

Bezüglich Farbe und Stil können Sie die entsprechende Position im CSS finden und selbst ändern

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

Über Ereignisse

Ich klicke auf den Schalter, um das Modalfeld anzuzeigen

Der JQ-Steuerschalter benötigt nur dies

$(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(); 
          } 
           
        } 
      });*/ 
    } 
     
  }) 
}

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

jQuery implementiert die Methode zur Überwachung aller Ajax-Anfragen auf der Seite

Implementierung der globalen Validierung unter BootstrapValidator basierend auf jQuery

Das obige ist der detaillierte Inhalt vonVon jquery.onoff implementierte Schalterschaltflächenfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!