怎么用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. [大数据]-Elasticsearch5.3.1+Kibana5.3.1从单机到分布式的安装与使用<2>

    前言:上篇[大数据]-Elasticsearch5.3.1+Kibana5.3.1从单机到分布式的安装与使用<1>中介绍了ES ,Kibana的单机到分布式的安装,这里主要是介绍Elast ...

  2. AutoFac学习摘要

    依赖注入(控制反转)常见的依赖注入工具:AutoFac,Spring.Net,Unity等依赖注入的方式:1.通过构造函数进行注入2.通过属性进行注入 注意:在项目中AutoFac的注入有两次,第一次 ...

  3. 合成(composite)模式

    合成模式属于对象的结构模式,有时又叫做“部分——整体”模式.合成模式将对象组织到树结构中,可以用来描述整体与部分的关系.合成模式可以使客户端将单纯元素与复合元素同等看待. 合成模式 合成模式把部分和整 ...

  4. 详解CockroachDB事务处理系统

    本文提到的一些术语,比如Serializability和Linearizability,解释看Linearizability, Serializability and Strict Serializa ...

  5. /usr/bin/python^M: 解释器错误: 没有那个文件或目录

    遇见问题 因为linux在虚拟机中,所以就在本地敲python代码,敲完后再拿到虚拟机去执行,再输入./filename.py时,就遇到这样的一个问题: bash: ./filename.py: /u ...

  6. 2017年最好的6个WEB前端开发手册下载

    php中文网为你推荐6个web前端开发相关手册下载,适合web开发人员和php web开发人员进行下载参考学习! 一. html5中文手册 通过制定如何处理所有 HTML 元素以及如何从错误中恢复的精 ...

  7. API文档工具-Swagger的集成

    最近安装了API文档工具swagger,因为Github上已有详细安装教程,且安装过程中没有碰到大的阻碍,所以此文仅对这次安装做一份大致记录 相关网站 Swagger 官方地址: http://swa ...

  8. Targeted Learning R Packages for Causal Inference and Machine Learning（转）

    Targeted learning methods build machine-learning-based estimators of parameters defined as features ...

  9. Oracle listener服务启动后又停止的解决方案

    这是Oracle监听服务.忘了说我的版本是Oracle10g. 我装完Oracle数据库之后,然后用第三方工具plsql去连接,提示no listener,首先我反复检查tnsnames.ora配置文 ...

  10. HttpClien Get&Post

    新公司上班第二周,开始进军.Net Core,这方面的东西比较新,所以已经封装好的东西比较少,比如HttpClien之类的开源类库,找了NuGet好久,没有找到,所以先写个简陋的来用着先. 引用: u ...