怎么用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. ASP.NET Core 菜鸟之路：从Startup.cs说起

    1.前言 本文主要是以Visual Studio 2017 默认的 WebApi 模板作为基架,基于Asp .Net Core 1.0,本文面向的是初学者,如果你有 ASP.NET Core 相关实践 ...

  2. 华为路由器AR1220F-S的端口映射NAT配置（拨号光纤上网）

    telnet 登录 或者ssh登录路由器 //进入系统试图界面 sys-view //第一步. 添加acl规则, 允许内网本身访问对外的公网ip. 否则,只能外部人员访问你的公网ip [Huawei] ...

  3. VR全景加盟-全景智慧城市携万千创业者决战BAT

    在所谓互联网思维走到末路.可穿戴设备基本昙花一现的大环境下,很多互联网人员转战VR市场,自然喜欢用互联网思维来考虑.笔者认识一些投资界人士,在谈到投资时,他们经常就问以下几句话:2B还是2C?将来有多 ...

  4. 《安卓网络编程》之第七篇 java编写Service程序

    import java.io.*; import java.awt.*; import java.awt.event.*; import javax.swing.*; import java.net. ...

  5. XML文件生成

    import java.io.* ; import org.w3c.dom.* ; import javax.xml.parsers.* ; import javax.xml.transform.* ...

  6. linux开发常用命令

    最近经常查看服务器上的log文件,有时log文件太大查起来很不方便,看了看网上说可以部分查询,就先记录一下吧 Linux中查看部分文件内容命令head,tail,sed的用法: Linux中的查看文件 ...

  7. SpringMVC 3.2集成Spring Security 3.2

    参考:http://www.cnblogs.com/Beyond-bit/p/springmvc_and_springsecurity.html SpringMVC 3.2集成Spring Secur ...

  8. Grid search in the tidyverse

    @drsimonj here to share a tidyverse method of grid search for optimizing a model's hyperparameters. ...

  9. ArrayList实现分组功能

    这边只用2个属性来进行分组 定义Object有key与value属性 按照key的不同对于arrayList进行分组 List<Object> tempList=new ArrayList ...

  10. 一不小心，陷入TCP的性能问题

    一.现象 在一次访问请求nginx中,通常只需要几毫秒的RT,但当请求数据达到某一个数值时,rt明显提高,甚至超过了300毫秒. 二.问题的原因 大家都知道,TCP为了提高带宽利用率和吞吐量,做了各种 ...