怎么用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. 通过批处理 安装 mongodb和设置身份验证

    1.首先需要 mongodb.msi安装包 2.mongodb的配置文件mongod.cfg 内容如下: systemLog: destination: file path: "D:/mon ...

  2. （转）详解JS位置、宽高属性之一：offset系列

    很多初学者对于JavaScript中的offset.scroll.client一直弄不明白,虽然网上到处都可以看一张图(图1),但这张图太多太杂,并且由于浏览器差异性,图示也不完全正确. 图一 不知道 ...

  3. JS实现鼠标悬浮,显示内容

    其实就是增加title属性

  4. Java8新特性-Lambda表达式

    1.  什么是Lambda表达式? Lambda表达式就是可以把函数作为参数传递,或者说把代码作为数据传递给函数. 2. Lambda表达式的语法格式 基本语法格式如下: 基本语法下多个变体的说明: ...

  5. Fail-Fast机制详解

    Java中的Iterator非常方便地为所有的数据源提供了一个统一的数据读取(删除)的接口,但是在使用的时候容易报如下错误ConcurrentModificationException,原因是在使用迭 ...

  6. 个人对于epollhup的理解

    1.原因 由于最近对于异步connect函数的测试,发现提前将一个套接字加入epoll监听队列会不断爆出epollhup事件 2.示例 ........  iEpoll = epoll_create( ...

  7. sendemail 发送成功Email was sent successfully!邮箱却收不到邮件

    在测试sendemail的时候,发现好多次明明提示已经发送成功了,但是邮箱却一直收不到邮件. 查询了好多资料,主要原因有两个 1.如果Linux是sentos的话,主要是防火墙iptables和sel ...

  8. 取代netcat

    前言 众所周知,netcat是网络界的瑞士军刀,它的主要作用是:提供连接其他终端的方法,可以上传文件,反弹shell等等各种利于别人控制你电脑的操作.所以聪明的系统管理员会将它从系统中移除,这样当别人 ...

  9. swfit - 实现类似今日头条顶部标签和底部内容的动态解决方案

    TYPageView TYPageView 类似今日头条 的标签导航解决方案,支持多种样式选择,基于swift3.0,支持文字颜色动态变化,底部选中线的动态变化 配图: 使用方法: let title ...

  10. Vue中过度动画效果应用

    一.实现动画过渡效果的几种方式 实现动画必须要将要进行动画的元素利用<transition>标签进行包裹 1.利用CSS样式实现过渡效果 <transition name=" ...