Home > Article > Web Front-end > Switch button function implemented by jquery.onoff
This article mainly introduces the simple switch button function implemented by jquery.onoff. It is very good and has certain reference value. Friends in need can refer to it
## A small button plug-in, first introduce css and 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 and only need to write an input
<input type="checkbox" checked onclick="showmodel(this)"/>Then you only need to add an .onoff() to js
$('input[type=checkbox]').onoff();You will find that an ordinary checkbox becomes a switch button Regarding color and style, you can find the corresponding position in css and modify it yourself
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; }
About events
I click the switch to display the modal boxJQ control switch only needs this$(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+'
'+ '
jQuery implements the method of monitoring all ajax requests on the page
Implements global validation under bootstrapValidator based on jQuery
The above is the detailed content of Switch button function implemented by jquery.onoff. For more information, please follow other related articles on the PHP Chinese website!