關於寫jquery外掛程式是很有必要的,這是前端學習當中必須經過的乙個過程
對於初次寫外掛程式先想清楚原理
(function($)
var options = $.extend(defaults, options);
this.each(function());
}; })(jquery);
這是乙個基礎的模板
其中的var options = $.extend(defaults, options);
1.$.extend()方法
$.extend()方法在jquery中有兩個用法,第一次是擴充套件方法,
第二個方法是
jquery.extend([deep], target, object1, [objectn])
返回值:object
把2個物件合併得到新的target,deep是可選的(遞迴合併)
合併 settings 和 options,修改並返回 settings。
jquery **:
var settings = ;
var options = ;
jquery.extend(settings, options);
結果:settings ==
描述:
合併 defaults 和 options, 不修改 defaults。
jquery **:
var empty = {};
var defaults = ;
var options = ;
var settings = jquery.extend(empty, defaults, options);
結果:settings ==
empty ==
2中擴充套件:
第一種,看**
view source
print?
$(
function
()
}
//這裡是$.extend的第二種用法
var opts = $.extend({},defaults, options);
if
($(
"#"
+ opts.triggerid)[0] ==
null
) );
$(
"body"
}
else
)
}
}
});
$.modalshow();
//這裡是呼叫的地方,id為'loginshow'的button可以先不再html中新增可以自動生成
})
第二種擴充套件
view source
print?
$(
function
()
}
//這裡是$.extend的第二種用法
var opts = $.extend(defaults, options);
$(
"#"
+ opts.triggerid).bind(
"click"
,
function
() )
}
});
$(
"#loginshow"
).modalshow();
//這裡是呼叫的地方,這裡需要先在html中加入元素
})
我在這裡寫了乙個比較完整的外掛程式是關於選項卡的
//這個是html檔案 我寫的外掛程式時引入的tab.js
aaabbb
ccc
//下面的是tab.js檔案注釋我寫的比前清楚了
/***
***/
;(function($)
var opts = $.extend(defaults, options), //這裡面兩個引數的順序不能改變,因為後面的那個時不會被覆蓋掉的
//$.extend(defaults, options);表示的是如果options中的引數總是有值的話,那麼options中的值將會代替defaults中的值
//如果options引數傳入的值為空,那麼就可以使用預設設定的值。
self = $(this), //獲取當前的tabs
items = self.children('ul.menu').children('li'), //獲取上面的是那三個
tabbox = self.children('div.main'), //獲取到了main這個節點
tabboxitems = tabbox.children('div'), // 獲取mian下面的div
timer; //設定了乙個定時器
var tabhandle = function(index),
delay = function(elem),opts.delaytime) :tabhandle(elem);
},
start = function(),
var on = self.find('li.on'), //獲取當前on所在的li
firstitem = items.eq(0),//設定預設第乙個li
len = items.length, //
index = on.index()+1,
item = index ===len ? firstitem : on.next('li'), //當前的索引如果等於li的總長度就返回預設的第乙個,如果不是就是下乙個
on.removeclass('on'); //移除當前li上面的樣式
item.addclass('on'); //把該選中的增加樣式
tabboxitems.siblings().hide().end().eq(index).show(); // 更換div中的內容 和tabhandle 執行一樣的操作
}
//bind() 方法為被選元素新增乙個或多個事件處理程式,並規定事件發生時執行的函式。
//第乙個引數傳遞事件,第二個引數還改事件對應的函式
items.bind(opts.operate, function () );
if (opts.auto) , function () )
}
})
}
})(jquery);
寫jquery外掛程式的思路
不要覺得寫外掛程式很難,只是你把問題想的太複雜了,本文教你在10分鐘內搞定乙個簡單的外掛程式。其實就是把一些常用 實用 通用的功能封裝起來而以,簡單的來講就是把這些 放在乙個方法裡面,可以達到重複使用的效果,這樣就可以不需要每次要用此功能的時候都去重新寫一遍。1.先定義乙個外掛程式 function...
jQuery外掛程式的怎麼寫
對於jquery之前一直用,也看到過別人寫的外掛程式,直到最近才想著學習怎麼寫自己的jquery外掛程式,今天看了網上的一些資料,發現其實很簡單的。先看乙個簡單的jquery外掛程式的例子 使用的時候要先導入jquery外掛程式,比如 p bold red 這樣p標籤內容就會變為紅色粗體。那麼,如何...
關於jQuery外掛程式中datatables的學習
reference function inittable ajax function data,callback,settings else columns data的名字和你返回引數裡面json裡的名字相對應,title相當於th,表頭這樣子的,class代表樣式。else return data...