建站
咨詢
售后
建站咨詢
新聞中心
推薦專題： jQuery開發(fā)手冊
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),甘井子企業(yè)網(wǎng)站建設(shè),甘井子品牌網(wǎng)站建設(shè),網(wǎng)站定制,甘井子網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,甘井子網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
1、jQuery插件教程引言
開發(fā)jQuery插件是一個高級的話題對于jQuery初學(xué)者。這個月，我一直在加強學(xué)習(xí)jQuery。盡管我學(xué)習(xí)如何把javascript代碼和html文檔分開。當(dāng)我看到我自己的javascipt文件時，我并不滿意。它太臟亂，所以我決定更近一步－學(xué)習(xí)如何開發(fā)jQuery插件來整理javascript文件。
這個插件是基于我以前的教程－ Navigation List menu + jQuery Animate Effect Tutorial 。上次，我寫編寫的腳本都把代碼放到 document.ready段落中，就像下面的代碼。
1$(document).ready(function() {
2
3$('ul#menu li:even').addClass('even');
4
5$('ul#menu li a').mouseover(function() {
6
7 $(this).animate( { paddingLeft:"20px" }, { queue:false, duration:500 });
8
9}).mouseout(function() {
10
11 $(this).animate( { paddingLeft:"0" }, { queue:true, duration:500 });
12
13}).click(function() {
14
15 $(this).animate( { fontSize:"20px" }, { queue:false, duration:500 });
16});
17
18});但是現(xiàn)在 我想把代碼寫成類似如下格式：
這樣的格式看起來更簡練，而且這些腳本可以在另一個工程重用。
2、插件結(jié)構(gòu)
jQuery 官方網(wǎng)站在 Plugins/Authoring頁面提供了非常詳細(xì)的說明。 但是我發(fā)現(xiàn)它非常難以理解。
不過沒關(guān)系，為了使編寫插件更容易，使用下面的小段用來開發(fā)插件將是一個非常好的結(jié)構(gòu)。
1//為了避免沖突，你需要一個匿名函數(shù)來包裝你的函數(shù)
2(function($){
3
4 //給jQuery附加一個新的方法
5 $.fn.extend({
6
7 //這兒就是你要開發(fā)插件的名子
8 pluginname: function() {
9
10 //迭代當(dāng)前匹配元素集合
11 return this.each(function() {
12
13 //插入自己的代碼
14
15 });
16 }
17 });
18
19//傳遞jQuery參數(shù)到函數(shù)中，
20//因此我們能使用任何有效的javascipt變量名來替換“$“符號。但是我們將堅持使用 $ (我喜歡美元符號：)
21
2、帶有可選項的插件
如果你看了***步的介紹,"padding"值對于這個插件是用戶配置的。他有利于一些設(shè)置，所以用戶能改變設(shè)置根據(jù)他們自己的需要。請確定你為每一個變量指定了默認(rèn)值?，F(xiàn)在，如下的代碼：
1(function($){
2
3 $.fn.extend({
4
5 //pass the options variable to the function
6 pluginname: function(options) {
7
8
9 //Set the default values, use comma to separate the settings, example:
10 var defaults = {
11 padding: 20,
12 mouseOverColor : '#000000',
13 mouseOutColor : '#ffffff'
14 }
15
16 var options = $.extend(defaults, options);
17
18 return this.each(function() {
19 var o = options;
20
21 //code to be inserted here
22 //you can access the value like this
23 alert(o.padding);
24
25 });
26 }
27 });
28
29})(jQuery); 3、動態(tài)菜單插件
現(xiàn)在你學(xué)習(xí)了插件的結(jié)構(gòu)。緊接著是我基于以前教程的開發(fā)的插件。插件它允許4個配置：
1）、 animatePadding : 給animate 效果設(shè)置”padding“值
2）、 defaultPadding : 給padding設(shè)置默認(rèn)的值
3）、evenColor :設(shè)置偶數(shù)行事件的顏色
4）、oddColor : 設(shè)置奇數(shù)行事件的顏色
1(function($){
2 $.fn.extend({
3 //plugin name - animatemenu
4 animateMenu: function(options) {
5
6 //Settings list and the default values
7 var defaults = {
8 animatePadding: 60,
9 defaultPadding: 10,
10 evenColor: '#ccc',
11 oddColor: '#eee'
12 };
13
14 var options = $.extend(defaults, options);
15
16 return this.each(function() {
17 var o =options;
18
19 //Assign current element to variable, in this case is UL element
20 var obj = $(this);
21
22 //Get all LI in the UL
23 var items = $("li", obj);
24
25 //Change the color according to odd and even rows
26 $("li:even", obj).css('background-color', o.evenColor);
27 $("li:odd", obj).css('background-color', o.oddColor);
28
29 //Attach mouseover and mouseout event to the LI
30 items.mouseover(function() {
31$(this).animate({paddingLeft: o.animatePadding}, 300);
32
33 }).mouseout(function() {
34$(this).animate({paddingLeft: o.defaultPadding}, 300);
35 });
36
37 });
38 }
39 });
40})(jQuery);
41
424、完整的源代碼
你可以保存這個插件再一個單獨的文件。（例如：jquery.animatemenu.js）.在這個教程中，我把腳本放到html文檔中
1
2"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3< HTML lang=en xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
4
5< HEAD>
6
7 < SCRIPT type=text/javascript src=" http://code.jquery.com/jquery-latest.js">< /SCRIPT>
8 < SCRIPT>
9
10(function($){
11 $.fn.extend({
12 //plugin name - animatemenu
13 animateMenu: function(options) {
14
15 var defaults = {
16 animatePadding: 60,
17 defaultPadding: 10,
18 evenColor: '#ccc',
19 oddColor: '#eee',
20 };
21
22 var options = $.extend(defaults, options);
23
24 return this.each(function() {
25 var o =options;
26 var obj = $(this);
27 var items = $("li", obj);
28
29 $("li:even", obj).css('background-color', o.evenColor);
30 $("li:odd", obj).css('background-color', o.oddColor);
31
32 items.mouseover(function() {
33 $(this).animate({paddingLeft: o.animatePadding}, 300);
34
35 }).mouseout(function() {
36 $(this).animate({paddingLeft: o.defaultPadding}, 300);
37
38 });
39 });
40 }
41 });
42})(jQuery);
43
44 < /SCRIPT>
45
46 < SCRIPT type=text/javascript>
47 $(document).ready(function() {
48 $('#menu').animateMenu({animatePadding: 30, defaultPadding:10});
49 });
50 < /SCRIPT>
51 < STYLE>
52 body {}{font-family:arial;font-style:bold}
53 a {}{color:#666; text-decoration:none}
54 #menu {}{list-style:none;width:160px;padding-left:10px;}
55 #menu li {}{margin:0;padding:5px;cursor:hand;cursor:pointer}
56 < /STYLE>
57
58
59
60
< UL id=menu>
61 < LI>Home
62 < LI>Posts
63 < LI>About
64 < LI>Contact
65< /LI>< /UL>
66
67
68
我希望這個jQuery插件教程能讓你更容易的理解jQuery插件
【編輯推薦】
- jQuery調(diào)用WCF服務(wù)傳遞JSON對象
- 學(xué)習(xí)jQuery必須知道的幾種常用方法
- 用XML+XSLT+CSS+JQuery組建ASP.NET網(wǎng)站
- 使用jQuery和PHP構(gòu)建一個受Ajax驅(qū)動的Web頁面
- 使用 jQuery 簡化 Ajax 開發(fā)
網(wǎng)頁題目：實用簡單的jQuery插件教程
本文URL：http://www.dlmjj.cn/article/dpipohd.html
