jquery实现的代替传统checkbox样式插件


Posted in Javascript onJune 19, 2015

本文实例讲述了jquery实现的代替传统checkbox样式插件。分享给大家供大家参考。具体如下:

效果图如下:

jquery实现的代替传统checkbox样式插件

具体代码如下:

(function($){
  $.fn.tzCheckbox = function(options){
    // Default On / Off labels:
    options = $.extend({
      labels : ['ON','OFF']
    },options);
    return this.each(function(){
      var originalCheckBox = $(this),
        labels = [];
      // Checking for the data-on / data-off HTML5 data attributes:
      if(originalCheckBox.data('on')){
        labels[0] = originalCheckBox.data('on');
        labels[1] = originalCheckBox.data('off');
      }
      else labels = options.labels;
      // Creating the new checkbox markup:
      var checkBox = $('<span>',{
        className: 'tzCheckBox '+(this.checked?'checked':''),
        html:'<span class="tzCBContent">'+labels[this.checked?0:1]+
            '</span><span class="tzCBPart"></span>'
      });
      // Inserting the new checkbox, and hiding the original:
      checkBox.insertAfter(originalCheckBox.hide());
      checkBox.click(function(){
        checkBox.toggleClass('checked');
        var isChecked = checkBox.hasClass('checked');
        // Synchronizing the original checkbox:
        originalCheckBox.attr('checked',isChecked);
        checkBox.find('.tzCBContent').html(labels[isChecked?0:1]);
      });
      // Listening for changes on the original and affecting the new one:
      originalCheckBox.bind('change',function(){
        checkBox.click();
      });
    });
  };
})(jQuery);

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
不懂JavaScript应该怎样学
Apr 16 Javascript
Prototype使用指南之selector.js说明
Oct 26 Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
Node.js与MySQL交互操作及其注意事项
Oct 05 Javascript
微信小程序 video详解及简单实例
Jan 16 Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
vue系列之requireJs中引入vue-router的方法
Jul 18 Javascript
Vue.js组件高级特性实例详解
Dec 24 Javascript
jQuery实现轮播图效果demo
Jan 11 jQuery
vue实现数字滚动效果
Jun 29 Javascript
JQuery实现的图文自动轮播效果插件
Jun 19 #Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 #Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 #Javascript
使用AngularJS实现可伸缩的页面切换的方法
Jun 19 #Javascript
使用AngularJS实现表单向导的方法
Jun 19 #Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 #Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 #Javascript
You might like
PHP自动更新新闻DIY
2006/10/09 PHP
php 验证码制作(网树注释思想)
2009/07/20 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
js实现图片上传预览原理分析
2017/07/13 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
Python的Django框架下管理站点的基本方法
2015/07/17 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
Python requests模块实例用法
2019/02/11 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
中专生职业生涯规划书范文
2014/01/10 职场文书
大学军训感言1500字
2014/03/09 职场文书
爱护花草树木的标语
2014/06/11 职场文书
公司外出活动方案
2014/08/14 职场文书
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
2014年人力资源部工作总结
2014/11/19 职场文书
《山中访友》教学反思
2016/02/24 职场文书
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技
Windows Server 2019 配置远程控制以及管理方法
2022/04/28 Servers