怎么用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. MySQL对innodb某一个表进行移动

    (步骤:建表, 禁用表空间,复制表空间,重用表空间)   mysql> desc test; +-------+-------------+------+-----+---------+---- ...

  2. 【网站管理3】_ftp连接超时和连不上的原因

    1.无法上传网页,FTP故障-提示"无法连接服务器"错误. 问题出现原因:FTP客户端程序设置问题,客户上网线路问题,ftp服务器端问题.处理方法:建议客户使用CUTPFTP软件来 ...

  3. [刷题]算法竞赛入门经典(第2版) 5-15/UVa12333 - Revenge of Fibonacci

    题意:在前100000个Fibonacci(以下简称F)数字里,能否在这100000个F里找出以某些数字作为开头的F.要求找出下标最小的.没找到输出-1. 代码:(Accepted,0.250s) / ...

  4. 解决U盘容量变小问题

    今天又想重新给电脑刷刷kali linux新版本了貌似N久没更,直接重新刷系统吧...然后发现USB容量变小,这就尴尬了,接着总结了个小方法. 解决方法:1.先把u盘插好,运行cmd,2.输入disk ...

  5. springboot(二)：web综合开发

    上篇文章介绍了spring boot初级教程:spring boot(一):入门篇,方便大家快速入门.了解实践Spring boot特性:本篇文章接着上篇内容继续为大家介绍spring boot的其它 ...

  6. Unix Shortcuts

    find . -name "*.java" -type f find all the files within a director and its sub-directory e ...

  7. 使用FileUtils简化你的文件操作

    前言: 在工作当中我们往往遇到很多文件的操作,我们也习惯写一些自己定义的工具类来简化文件操作,其实apache的commons的FileUtils类就是这样一个工具类,使用它能大大的简化我们对文件的操 ...

  8. 一个IT人员实用的工具：Tmux

    1.Tmux安装 tmux下载地址: http://sourceforge.net/projects/tmux/files/tmux/tmux-1.6/tmux-1.6.tar.gz/download ...

  9. 弹出框插件layer使用

    layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 插件官方地址:http://layer.layui.co ...

  10. activeMQ的简单介绍

    1.什么叫activeMQ? ActiveMQ 是Apache出品,最流行的,能力强劲的开源消息总线.ActiveMQ 是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provider实现 ...