jQuery 外掛程式開發

標籤：jquer   each   rem   this   return   query   round   eve   move   

 1. 直接給jQuery 添加全域函數(市面上基本上不用這種方式)

$.myAlert = function(){
　　alert(‘我是通過調用外掛程式彈出的警告框‘);
}

$.myAlert2 = function(str){
　　alert(str);
}

2. 用extend()方法(市面上基本上不用這種方式)

$.extend({
　　myAlert:function(){
　　　　alert(‘我是通過調用外掛程式彈出的警告框‘);
　　},
　　myAlert2:function(str){
　　　　alert(str);
　　}
})

3.使用命名空間(市面上基本上不用這種方式)

$.zxit = {
　　myAlert:function(){
　　alert(‘我是通過調用外掛程式彈出的警告框‘);
},
　　myAlert2:function(str){
　　　　alert(str);
　　}
}

 

// 輸出到頁面

$(function(){
　　$.zxit.myAlert2(‘aaaa‘);
})

// 4. 類級外掛程式開發(市面上基本上不用這種方式)

　　var div = $(‘#div1‘);

　　$.zxit = {

　 centerDiv:function(obj){
　　　　obj.css({
　　　　　　‘top‘:($(window).height()-div.height())/2,
　　　　　　‘left‘:($(window).width()-div.width())/2,
　　　　　　‘position‘:‘absolute‘
　　　　});

　　　　return obj;//注意：一定要返回，才能使用jQuery鏈式操作

　　　　}
　　}

$.zxit.centerDiv(div).css(‘background‘,‘red‘);

 

 推薦！！！！！.對象級外掛程式開發(模板)

;(function($){

　　$.fn.tab = function(options){

　　　　//各種參數，各種屬性
　　　　var defaults = {

　　　　}

　　　　// 合并參數
　　　　var options = $.extend(defaults, options);

　　// 實現功能的代碼
　　this.each(function(){

　　})

　　// 返回this, 實現jQuery鏈式操作

　　return this;
　}

})(jQuery);

注意： 參數後面是對象形式，不要直接賦值（‘=’），用分號隔開參數，小心犯錯，參考下面代碼。

 

================= .利用jQuery 對象級外掛程式模板，開發tab外掛程式 =================

;(function($){

$.fn.tab = function(options){

// 各種參數,各種屬性
var defaults = {
　　li_active : ‘active‘,// tab 標題
　　item_active : ‘active‘,// tab 內容
　　title_node :‘.title li‘,// tab 標題區段點
　　item_node :‘.cont .item‘,// tab 內容節點
　　event_type : ‘mouseover‘// tab 觸發事件
}

// 合并options
options = $.extend(defaults, options);

// 實現功能代碼
this.each(function(){
　　var _this = $(this);
　　_this.find(options.title_node).bind(options.event_type,function(){
　　　　$(this).addClass(options.li_active).siblings().removeClass(options.li_active);
　　　　_this.find(options.item_node).eq($(this).index()).addClass(options.item_active).siblings().removeClass(options.item_active);
　　})

})

　　// 返回this, 實現jQuery鏈式操作
　　return this;

}

})(jQuery);

 

 

 

 

//輸出到頁面

$(‘.tab‘).tab({
　　event_type:‘click‘
}).css(‘background‘,‘red‘);

 

jQuery 外掛程式開發