欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery插件的寫法分享

 更新時(shí)間：2013年06月12日 12:39:40   作者：  
這幾天在學(xué)習(xí)jQuery插件的寫法，搜索了一些資料，包括jQuery官方的示例，但發(fā)現(xiàn)描述的并不是很清晰。最后，終于搜索到一篇講解比較清晰的文章，這里自己總結(jié)了一下，并以一個(gè)具體的示例來說明jQuery插件的寫法

1、概述

先看看html代碼

復(fù)制代碼 代碼如下:

<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>

比如我們要實(shí)現(xiàn)當(dāng)光標(biāo)移動(dòng)到a標(biāo)簽上時(shí)，a標(biāo)簽向右移動(dòng)一段距離，離開時(shí)a位置恢復(fù)。實(shí)現(xiàn)方法如下：

復(fù)制代碼 代碼如下:

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

現(xiàn)在我們將這個(gè)方法進(jìn)行擴(kuò)展，寫成jQuery插件的形式，以后也能在別的項(xiàng)目中使用，并且可以方便的更改一些屬性值，現(xiàn)在我們來看看jQuery插件的寫法。

2、jQuery插件的結(jié)構(gòu)

下邊這個(gè)結(jié)構(gòu)應(yīng)該是編寫jQuery插件的一個(gè)比較好的結(jié)構(gòu)，我將原作者的一些注釋進(jìn)行了相應(yīng)的翻譯。

復(fù)制代碼 代碼如下:

//為避免沖突，將我們的方法用一個(gè)匿名方法包裹起來
(function($) {
    //擴(kuò)展這個(gè)方法到j(luò)query
    $.fn.extend({
        //插件名字
        pluginname: function() {
            //遍歷匹配元素的集合
            return this.each(function() {
                //在這里編寫相應(yīng)代碼進(jìn)行處理
            });
        }
    });
 //傳遞jQuery到方法中，這樣我們可以使用任何javascript中的變量來代替"$"     
})(jQuery);

接下來，我們給插件中加入一些可以改變的屬性，這樣用戶可以根據(jù)自己的需要來做一些更改。同時(shí)，我們應(yīng)提供相應(yīng)的默認(rèn)值。

復(fù)制代碼 代碼如下:

(function($){ 
    $.fn.extend({  
 //將可選擇的變量傳遞給方法
        pluginname: function(options) { 
            //設(shè)置默認(rèn)值并用逗號(hào)隔開
            var defaults = { 
                padding: 20, 
                mouseOverColor : '#000000', 
                mouseOutColor : '#ffffff' 
            } 
            var options =  $.extend(defaults, options); 
            return this.each(function() { 
                var o = options; 
                //這里編寫相應(yīng)代碼
                //可以像下邊這樣獲取變量值
                alert(o.padding); 
            }); 
        } 
    }); 
})(jQuery); 

3、實(shí)現(xiàn)jQuery插件

復(fù)制代碼 代碼如下:

(function ($) {
    $.fn.extend({
        //插件名稱 - paddingList
        paddingList: function (options) {
            //參數(shù)和默認(rèn)值
            var defaults = {
                animatePadding: 10,
                hoverColor: "Black"
            };
            var options = $.extend(defaults, options);
            return this.each(function () {
                var o = options;
                //將元素集合賦給變量 本例中是 ul對(duì)象
                var obj = $(this);
                //得到ul中的a對(duì)象
                var items = $("li a", obj);
                //添加hover()事件到a
                items.hover(function () {
                    $(this).css("color", o.hoverColor);
                    //queue false表示不添加到動(dòng)畫隊(duì)列中
                    $(this).animate({ paddingLeft: o.animatePadding }, { queue: false, duration: 300 });
                }, function () {
                    $(this).css("color", "");
                    $(this).animate({ paddingLeft: "0" }, { queue: true, duration: 300 });
                });
            });
        }
    });
})(jQuery);

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

復(fù)制代碼 代碼如下:

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

作者：朋友的你 來源：jQuery學(xué)習(xí)

相關(guān)文章

最新評(píng)論