如何使用簡(jiǎn)單的jQuery插件

本篇文章為大家展示了如何使用簡(jiǎn)單的jQuery插件，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

10多年的魯山網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整魯山建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“魯山網(wǎng)站設(shè)計(jì)”,“魯山網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

1、jQuery插件

開(kāi)發(fā)jQuery插件是一個(gè)高級(jí)的話題對(duì)于jQuery初學(xué)者。這個(gè)月，我一直在加強(qiáng)學(xué)習(xí)jQuery。盡管我學(xué)習(xí)如何把javascript代碼和html文檔分開(kāi)。當(dāng)我看到我自己的javascipt文件時(shí)，我并不滿意。它太臟亂，所以我決定更近一步－學(xué)習(xí)如何開(kāi)發(fā)jQuery插件來(lái)整理javascript文件。

這個(gè)插件是基于我以前的教程－ 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)在 我想把代碼寫成類似如下格式：

1$(document).ready(function() {   
2  
3    $(#menu).animateMenu({   
4   padding:20   
5    })   
6
7});

這樣的格式看起來(lái)更簡(jiǎn)練，而且這些腳本可以在另一個(gè)工程重用。

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

jQuery 官方網(wǎng)站在 Plugins/Authoring頁(yè)面提供了非常詳細(xì)的說(shuō)明。 但是我發(fā)現(xiàn)它非常難以理解。

不過(guò)沒(méi)關(guān)系，為了使編寫插件更容易，使用下面的小段用來(lái)開(kāi)發(fā)插件將是一個(gè)非常好的結(jié)構(gòu)。

1//為了避免沖突，你需要一個(gè)匿名函數(shù)來(lái)包裝你的函數(shù)   
 2(function($){   
 3
 4    //給jQuery附加一個(gè)新的方法
 5   $.fn.extend({    
 6 
 7   //這兒就是你要開(kāi)發(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變量名來(lái)替換“$“符號(hào)。但是我們將堅(jiān)持使用 $ (我喜歡美元符號(hào)：)
21

2、帶有可選項(xiàng)的插件

如果你看了***步的介紹,"padding"值對(duì)于這個(gè)插件是用戶配置的。他有利于一些設(shè)置，所以用戶能改變?cè)O(shè)置根據(jù)他們自己的需要。請(qǐng)確定你為每一個(gè)變量指定了默認(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、動(dòng)態(tài)菜單插件

現(xiàn)在你學(xué)習(xí)了插件的結(jié)構(gòu)。緊接著是我基于以前教程的開(kāi)發(fā)的插件。插件它允許4個(gè)配置：

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
42

4、完整的源代碼

你可以保存這個(gè)插件再一個(gè)單獨(dú)的文件。（例如：jquery.animatemenu.js）.在這個(gè)教程中，我把腳本放到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>

上述內(nèi)容就是如何使用簡(jiǎn)單的jQuery插件，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

新聞名稱：如何使用簡(jiǎn)單的jQuery插件
當(dāng)前URL：http://bm7419.com/article34/jceese.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷推廣、搜索引擎優(yōu)化、網(wǎng)頁(yè)設(shè)計(jì)公司、商城網(wǎng)站、域名注冊(cè)、定制開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)