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


Posted in jQuery onMay 24, 2018

插件下载地址:

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

一个按钮小插件,首先引入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; 
}

关于事件

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

我点击开关显示模态框

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实现简单的开关按钮功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 #jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 #jQuery
20个最常见的jQuery面试问题及答案
May 23 #jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 #jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 #jQuery
jQuery获取随机颜色的实例代码
May 21 #jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 #jQuery
You might like
用PHP读取和编写XML DOM的实现代码
2011/02/03 PHP
php接口与接口引用的深入解析
2013/08/09 PHP
PHP利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
yii中widget的用法
2014/12/03 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
Vue计算属性的使用
2017/08/04 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
jQuery插件实现图片轮播效果
2020/10/19 jQuery
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
python实现分页效果
2017/10/25 Python
Python使用ConfigParser模块操作配置文件的方法
2018/06/29 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
提高EJB性能都有哪些技巧
2012/03/25 面试题
婚庆公司的创业计划书
2014/01/22 职场文书
《木笛》教学反思
2014/03/01 职场文书
贷款委托书范本
2014/04/08 职场文书
公司建议书怎么写
2014/05/15 职场文书
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记
ICOM R71E和R72E图文对比解说
2022/04/07 无线电