jquery.onoff实现简单的开关按钮功能

jquery.onoff实现简单的开关按钮功能

 

插件下载地址：

https://download.csdn.net/download/lianzhang861/10431557

一个按钮小插件，首先引入css和js

html只需要写一个input

然后js中只需要加一个.onoff()

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

你会发现一个普通的checkbox变成了开关按钮

关于颜色和样式，自己去css中找到相应的位置修改即可

1. .onoffswitch-inner:before {

2. content: "OFF";

3. padding-left: 3px;

4. color: #FFFFFF;

5. background-color: #A14776;

6. }

7.  

8. .onoffswitch-inner:after {

9. content: "ON";

10. padding-right: 5px;

11. color: #999999;

12. background-color: #EEEEEE;

13. text-align: right;

14. }

关于事件

我点击开关显示模态框

jq控制开关只需要这样就行

$(ele).prop("checked",true) //或false

1. function showmodel(ele){

2. if(!$(ele).is(':checked')){

3. var htmls=$(ele).parent().siblings('span').html();

4. $('.mask').show();

5. $('#reportName').html(htmls);

6. $('#yzmBox').html(mathRand());

7. }

8. $(".cancel").unbind().click(function(){

9. $(ele).prop("checked",true)

10. $('.mask').hide();

11. })

12. $(".sure").unbind().click(function(){

13. if($(".telBox input").val()==$('#yzmBox').html()){

14. /*$.ajax({

15. url: ipAddress + "/MMSDailyBackstage/task2/getTaskTypes",

16. data:{"areaCode":"01","roleCode":"dhxt","appCode":"day_report","imei":"111111111111111"},

17. type : "POST",

18. dataType: "json",

19. cache: false,

20. async: false,

21. success:function(json){

22. var data=json.data;

23. var html="";

24. if(json.success){

25. for(var i in data){

26. var taskTypeSubs=data[i].taskTypeSubs;

27. html+='

    '+

28. '

    '+data[i].taskType.taskTypeName+'

    '+

29. '

    '

    • for(var j in taskTypeSubs){

    • html+='

    • '+

    • ''+

    • ''+taskTypeSubs[j].subTaskName+''+

    • ''+

    • '

    '

    • }

    • html+='

'

}

$('#auditBox').append(html);

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

}

 

}

});*/

}

 

})

}