怎么用jq封装插件

　以隔行变色为例

　　实现原理：1.找到表格的奇偶行，然后添加不同的class，激活行高亮显示也很简单，只要判断mouseover事件，然后添加一个class，mouseout的时候，再移除

　　　　　　　　class就行；

　　　　　　　2.不用class，直接改变background属性；

　　　　　　　　直接开干，这里用第二种方法。

　　第一步： 模板

　　　　jq有一个基本框架，直接搬过来呗

(function($){

    $.fn.yourName = function(options){

        //各种属性、参数

        }

        var options = $.extend(defaults, options);

        return this.each(function(){

        //插件实现代码

        });

    };

})(jQuery);

第二步： 套东西进去

　　1.命名

　　2.有哪些参数、属性，这里就是要结合功能来考虑了

　　　　evenColor (偶数行颜色)    oddColor（奇数行颜色）  activeColor（激活行颜色） changeFlag（是否开启隔行变色）oldColor （保存原来的颜色)；

(function ($) {

    $.fn.tableUI = function ( options ) {

        var defaults = {

            evenColor: '#dddddd', //偶数行颜色

            oddColor: '#ffffff',  //奇数行颜色

            activeColor: '#09f', //激活行颜色

            changeFlag: true,     //是否开启隔行变色

            oldColor: ''　　　　　　//保存原来颜色

        }

        var options = $.extend( defaults, options );

        return this.each(function () {

           //功能代码

        })

    }

})(jQuery);

此处重点：

 var options = $.extend( defaults, options );

　　合并多个对象为一个，就是如果你在调用的时候写了新的参数，就用你新的参数，如果没有写，就用默认的参数。

现在就是完善功能代码

(function ($) {

    $.fn.tableUI = function ( options ) {

        var defaults = {

            evenColor: '#dddddd', //偶数行颜色

            oddColor: '#ffffff',  //奇数行颜色

            activeColor: '#09f', //激活行颜色

            changeFlag: true,     //是否开启隔行变色

            oldColor: ''

        }

        var options = $.extend( defaults, options );

        return this.each(function () {

            var thisTable = $(this);

            if ( options.changeFlag ) {

                //奇偶行颜色

                $(thisTable).find('tr:even').css( 'background', options.evenColor );

                $(thisTable).find('tr:odd').css( 'background', options.oddColor );

                //激活行颜色

                $(thisTable).find('tr').bind('mouseover', function () {

                    //保存原来的颜色，以便于移出时恢复

                    options.oldColor = $(this).css('background');

                    $(this).css( 'background', options.activeColor );

                });

                $(thisTable).find('tr').bind('mouseout', function () {

                    $(this).css( 'background', options.oldColor );

                })

            }

        })

    }

})(jQuery);

到这里，就基本完成了，最后在插件上方，写上插件的名称、版本号、完成日期、作者，作者的联系方式……等等，因为只有这样才能显的这个插件够专业。

/*

 * tableUI 0.1

 * Copyright (c) 梦幻飞雪  http://www.cnblogs.com/wangyihong/

 * Date: 2017-06-28

 * 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替，鼠标移上高亮显示

 */

(function ($) {

    $.fn.tableUI = function ( options ) {

        var defaults = {

            evenColor: '#dddddd', //偶数行颜色

            oddColor: '#ffffff',  //奇数行颜色

            activeColor: '#09f', //激活行颜色

            changeFlag: true,     //是否开启隔行变色

            oldColor: ''

        }

        var options = $.extend( defaults, options );

        return this.each(function () {

            var thisTable = $(this);

            if ( options.changeFlag ) {

                //奇偶行颜色

                $(thisTable).find('tr:even').css( 'background', options.evenColor );

                $(thisTable).find('tr:odd').css( 'background', options.oddColor );

                //激活行颜色

                $(thisTable).find('tr').bind('mouseover', function () {

                    //保存原来的颜色，以便于移出时恢复

                    options.oldColor = $(this).css('background');

                    $(this).css( 'background', options.activeColor );

                });

                $(thisTable).find('tr').bind('mouseout', function () {

                    $(this).css( 'background', options.oldColor );

                })

            }

        })

    }

})(jQuery);

ok，大功告成，就差验证使用了

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src='./js/jquery.min.js'></script>

        <script src='./js/tableUI.js'></script>

        <style>

            *{

                padding: ;

                margin: ;

                box-sizing: border-box;

                -webkit-box-sizing: border-box;

                -moz-box-sizing: border-box;

            }

            #table {

                width: 800px;

                margin: 50px auto;

                display: block;

                border-collapse:collapse;

            }

            #table tr {

                height: 50px;

                font-size: 20px;

            }

            #table tr td, #table tr th {

                border: 1px solid #;

                width: 200px;

                text-align: center;

            }

        </style>

    </head>

    <body>

        <table id='table' >

            <tr>

                <th>姓名</th>

                <th>年龄</th>

                <th>专业</th>

                <th>班级</th>

            </tr>

            <tr>

                <td>张三</td>

                <td></td>

                <td>计算机</td>

                <td></td>

            </tr>

            <tr>

                <td>张三</td>

                <td></td>

                <td>计算机</td>

                <td></td>

            </tr>

            <tr>

                <td>张三</td>

                <td></td>

                <td>计算机</td>

                <td></td>

            </tr>

            <tr>

                <td>张三</td>

                <td></td>

                <td>计算机</td>

                <td></td>

            </tr>

            <tr>

                <td>张三</td>

                <td></td>

                <td>计算机</td>

                <td></td>

            </tr>

            <tr>

                <td>张三</td>

                <td></td>

                <td>计算机</td>

                <td></td>

            </tr>

            <tr>

                <td>张三</td>

                <td></td>

                <td>计算机</td>

                <td></td>

            </tr>

        </table>
　　　　　　//插件使用

        <script>

            $("#table").tableUI();  //默认的属性参数

        </script>

    </body>

</html>

设置新的属性参数

        <script>

            $("#table").tableUI(

                options = {

                    evenColor: 'blue', //偶数行颜色

                    oddColor: 'green',  //奇数行颜色

                    activeColor: 'red', //激活行颜色

                    changeFlag: true,     //是否开启隔行变色

                });

        </script>

//此处options = 也可以不写

怎么用jq封装插件的更多相关文章

  1. jq封装插件

    $.extend()拓展方法: $(function(){ $.extend({ money:function(){ alert("我要努力赚钱") }, money:functi ...

  2. jq封装插件，简单dome

    (function($) { $.fn.extend({ bold: function() { this.css({ fontWeight: "bold", color: 'red ...

  3. jQuery框架-3.jQuery自定义封装插件和第三方插件

    一.jQuery的封装扩展 1.jQuery中extend方法使用 (挂在到jQuery和jQuery.fn两对象身上的使用) 1.1.官方文档定义: jQuery.extend   Merge th ...

  4. jq分页插件

    jq分页插件 http://www.zhangxinxu.com/jq/pagination_zh/ html --------------- <tbody id="hiddenres ...

  5. vue封装插件并发布到npm上

    vue封装插件并发布到npm上 项目初始化 首先,要创建项目,封装vue的插件用webpack-simple很合适,vue init webpack-simple 项目名称此命令创建我们的项目的目录, ...

  6. ***使用jQuery去封装插件（组件化、模块化的思想），即扩展方法

    如何使用jQuery去封装插件,区分扩展全局方法与扩展一个普通的jQuery实例对象的方法 1.给全局对象扩展方法:①$.方法 = function(参数可加可不加){}  ②使用:$.方法(有参数的 ...

  7. jq封装选项卡写法

    jq普通选项卡写法: var tabTag=$('#tabon'); var tabon=tabTag.find('li');//菜单栏 var tabCon=$(".hidden" ...

  8. 封装插件并发布到npm的历程

    1.封装插件 2.使用webpack打包的时候发生了很多问题 3.过程很反复 4.但最终还是发布成功了

  9. JQ封装图片预加载插件

    我们知道,图片的加载,特别是资源较大的图片,加载相当耗费时间.为了提高用户体验,不得不使用图片预加载技术来提前加载,以提高用户在浏览时的流畅度. 先来弄明白图片的懒加载和预加载的不同: 1)概念:懒加 ...

随机推荐

  1. MM们，你们为什么要找一个程序猿男票？

    前言 免责声明:这篇文章关于什么?六一儿童节马上就要到了,作为一个前端攻城师,自我感觉效率还可以,老早已把任务搞完,页面布局和前端编码高效按时交付,呵呵.趁有时间,写写文章娱乐一下.MM们,请不要拿起 ...

  2. SVN提交后自动推送消息到钉钉群

    钉钉设置机器人配置 1.进入配置机器人入口 2.添加机器人 3.测试WebHook请求 本人使用Postman进行测试 4.配置SVN 4.1 配置 Pre-commit hook 设置提交内容必须包 ...

  3. hdu698 Just a Hook 线段树-成段更新

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1698 很简单的一个线段树的题目,每次更新采用lazy思想,这里我采用了增加一个变量z,z不等于0时其绝 ...

  4. OutputStream类详解

    主要内容包括OutputStream及其部分子类,以分析源代码的方式学习.关心的问题包括:每个字节输出流的作用,各个流之间的主要区别,何时使用某个流,区分节点流和处理流,流的输出目标等问题. Outp ...

  5. 点击Input框弹出日期选项

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 响应式网站-全屏banner响应的2中方法 - 被吃掉的banner

    通常来讲, 设计师们喜欢把banner设计成全屏(1920px或以上) 主题内容控制在一定的范围内一般在1200px左右 这样的设计即可以在宽屏上的表现很好.也能向下兼容一些小屏幕的设备: 如下图(所 ...

  7. Unicode字符集和编码方式

    通常将一个标准中能够表示的所有字符的集合称为字符集,比如ISO/Unicode所定义的字符集为Unicode.在Unicode中,每个字符占据一个码位/Unicode 编号(用4位十六进制数表示,Co ...

  8. JBoss7安装、测试、配置和启动以及停止，部署

    转:http://www.hongyanliren.com/2014m01/3013.html 内容概要 JBoss系列三主要目的是演示如何部署应用到JBoss7/WildFly,如下图中描述了部署应 ...

  9. 【.net 深呼吸】通过标准输入/输出流来完成进程间通信

    实现进程之间煲电话粥的方式,有好几种,比如,你可以用这些方案: 1.使用socket来传递.这个好像很无聊,本地进程之间也用socket?不过,通过本机回环网络确实可以进程之间通信. 2.WCF,与上 ...

  10. 偏最小二乘回归分析建模步骤的R实现(康复俱乐部20名成员测试数据)+补充pls回归系数矩阵的算法实现

    kf=read.csv('d:/kf.csv') # 读取康复数据kfsl=as.matrix(kf[,1:3]) #生成生理指标矩阵xl=as.matrix(kf[,4:6]) #生成训练指标矩阵x ...