插件学习

jQuery插件的写法

 

这几天在学习jQuery插件的写法，这里自己总结了一下，并以一个具体的示例来说明jQuery插件的写法。

示例一、

1、概述

先看看html代码

<ul id="catagory">
    <li><a href="#">jQuery</a></li>
    <li><a href="#">Asp.net</a></li>
    <li><a href="#">Sql Server</a></li>
    <li><a href="#">CSS</a></li>
</ul>

比如我们要实现当光标移动到a标签上时，a标签向右移动一段距离，离开时a位置恢复。实现方法如下：

$(document).ready(function() {
    $("#catagory a").hover(function() {
        $(this).animate({ paddingLeft: "20px" }, { queue: false, duration: 500 });
    }, function() {
        $(this).animate({ paddingLeft: "0" }, { queue: true, duration: 500 });
    });
});

现在我们将这个方法进行扩展，写成jQuery插件的形式，以后也能在别的项目中使用，并且可以方便的更改一些属性值，现在我们来看看jQuery插件的写法。

2、jQuery插件的结构

下边这个结构应该是编写jQuery插件的一个比较好的结构，我将原作者的一些注释进行了相应的翻译。

//为避免冲突，将我们的方法用一个匿名方法包裹起来
(function($) {
       
    //扩展这个方法到jquery
    $.fn.extend({
       
        //插件名字
        pluginname: function() {
       
            //遍历匹配元素的集合
            return this.each(function() {
       
                //在这里编写相应代码进行处理 
       
            });
        }
    });
       
 //传递jQuery到方法中，这样我们可以使用任何javascript中的变量来代替"$"      
})(jQuery);

3、实现jQuery插件

(function ($) {
    $.fn.extend({
        //插件名称 - paddingList
        paddingList: function (options) {
    
            //参数和默认值
            var defaults = {
                animatePadding: 10,
                hoverColor: "Black"
            };
    
            var options = $.extend(defaults, options);
    
            return this.each(function () {
                var o = options;
    
                //将元素集合赋给变量 本例中是 ul对象 
                var obj = $(this);
    
                //得到ul中的a对象
                var items = $("li a", obj);
    
                //添加hover()事件到a
                items.hover(function () {
                    $(this).css("color", o.hoverColor);
                    //queue false表示不添加到动画队列中
                    $(this).animate({ paddingLeft: o.animatePadding }, { queue: false, duration: 300 });
    
                }, function () {
                    $(this).css("color", "");
                    $(this).animate({ paddingLeft: "0" }, { queue: true, duration: 300 });
                });
    
            });
        }
    });
})(jQuery);

最后，使用插件的方法如下：


//使用插件
$(document).ready(function() {
    $("#catagory").paddingList({ animatePadding: 30, hoverColor: "Red" });
});



示例二、

html结构:

<ul id="tab_nav">
    <li class="current">新闻</li>
    <li>生活</li>
    <li>体育</li>
    <li>抽奖</li>
</ul>
<div id="tabs">
    <div class="tab_items">
        新闻
    </div>
    <div class="tab_items off">
        生活
    </div>
    <div class="tab_items off">
        体育
    </div>
    <div class="tab_items off">
        抽奖
    </div>
</div>

第二步:

     写css代码, 这个在这里就省去了, 具体大家自己可以去写下, 简单. 具体看截图.

　　

　　

第三步:

     写js代码了.

     大概就分为这三步, 其中第三步是核心. 当然前两步也是很重要的, 结构的好坏会直接影响你的js实现方式.

主结构:
           
            //构造函数, 以后每一个tab选项卡的实例都是由他来实例化的.
            function Tab(){
                //some code
            }
            //对象原型, 这里主要是一些功能方法.
            Tab.prototype = {
                //some code
            
            }
            
            用法:
            new Tab('tab_nav', 'tabs', {可选参数}); //实例一个选项卡, 传入一些参数, 实现一些效果
            new Tab('tab_nav2', 'tabs2', {可选参数}); //实例第二个选项卡, 传入一些参数, 实现一些效果
            ...

以上就是tab选项卡插件的主结构, 下面我们来具体实现.

 js代码:

    function Tab(){
        this.init.apply(this, arguments); //用init函数初始化对象属性
    }
    
    Tab.prototype = {
       init: function(ela, elb, paramObj){
       //默认参数设置, triggerClass:当前选项的class名字, type:鼠标事件, delay:这个主要针对mouseover快速划过去的一个延时处理
        this.defaultOptions = {
            triggerClass    : 'current',
            type            : 'mouseover',
            delay           : 150
        };
        
        this.options        = this.extend(this.defaultOptions, paramObj || {});
        this.oa             = document.getElementById(ela);
        this.ob             = document.getElementById(elb);
        this.triggerItem    = this.oa.children;
        this.listItem        = this.ob.children;
        this.tLen            = this.triggerItem.length;
        this.arr            = [];
        this.timer            = null;
        this.isIE             = !-[1,]; //判断IE浏览器
        var self = this;
        this.options.delay = this.options.type === 'click' ? 0 : this.options.delay; //当type为click时, 就无延时, 反之则延时
        //ie下过滤注释节点
        if(this.isIE){
            for(var i = 0, len = this.listItem.length; i < len; i++){
                if(this.listItem[i].nodeType === 1){
                    this.arr.push(this.listItem[i]);
                }
            }
        }
        for(var i = 0; i < this.tLen; i++){
            this.triggerItem[i]['on' + this.options.type] = this.change(i); //绑定事件
            this.triggerItem[i].onmouseout = function(){clearTimeout(self.timer); self.timer = null;}; //绑定事件
        }
    },
    extend: function(source, target){ //属性合并处理
        for(var p in target){
            if(target.hasOwnProperty(p)){
                source[p] = target[p];
            }
        }
        return source;
    },
    trim: function(str){
        return str.replace(/^s+/g, "").replace(/s+$/g, "");
    },
    addClass: function(el, name){ //定义添加class函数, addClass(元素对象, class名字)
        var arr = [],
                str = el.className,
                arr = str.split(/s+/),
                len = arr.length,
                name = this.trim(name);
        for(var i = 0; i < len; i++){
            if(arr[i] === name){
                return;
            }
        }
        arr.splice(len, 1, name);
        el.className = this.trim(arr.join(' '));
        el = null;
    },
    removeClass: function(el, name){ //定义移除class函数, removeClass(元素对象, class名字)
        var arr = [],
                str = el.className,
                arr = str.split(/s+/),
                len = arr.length,
                name = this.trim(name);
        for(var i = 0; i < len; i++){
            if(arr[i] === name){
                arr.splice(i,1);
                el.className=arr.join(' ');
                return;
            }
        }
    },
    change: function(d){ //选项卡实现
        var self = this;
        return function(){
            self.timer = setTimeout(function(){
                for(var i = 0; i < self.tLen; i++){
                    if(i === d){
                        self.addClass(self.triggerItem[d], self.options.triggerClass);
                        self.isIE ? self.arr[d].style.display = 'block' : self.listItem[d].style.display = 'block';
                    }
                    else{
                        self.removeClass(self.triggerItem[i], self.options.triggerClass);
                        self.isIE ? self.arr[i].style.display = 'none' : self.listItem[i].style.display = 'none';
                    }
                }
            }, self.options.delay);
        }
    }
  }

用法:
    new Tab('tab_nav', 'tabs', {type:'click'});
    new Tab('tab_nav2', 'tabs2', {triggerClass:'trigger'});
    new Tab('tab_nav3', 'tabs3', {type:'mouseover', delay:200});