專業南寧網站建設10年,服務客戶1000+

jquery插件制作

2015-11-27


jquery插件的基本格式:

(function($){ $.fn.tab = function(options){//$.fn后面的tab是這個插件的函數名稱??梢愿咦约合埠眠M行修改 var defaults = { //相關屬性設置 } var options = $.extend(defaults, options); this.each(function(){ //實現的功能設置 }); }; })(jQuery);

我這里是做一個tab的插件,我來完善以上代碼

(function($){ $.fn.tab = function(options){ var defaults = { eventname:"click",//觸發事件,click為點擊,mousemove為鼠標移動 titlekeyid:"tabtitle",//切換的ID sedcss:"sed",//選中時的CSS nosedcss:"nosed" //未選中時的CSS } var options = $.extend(defaults, options); this.each(function(){ var tab=$(this); //綁定事件 $(tab).find("li").bind(options.eventname,function(){ $("#"+options.titlekeyid).find("li").attr("class", options.nosedcss); $(this).attr("class", options.sedcss); $("#"+options.titlekeyid+"info").find("div").css("display", "none"); $("#"+$(this).attr("id")+"info").css("display", "block"); //個人JS能力還是有限,感覺代碼寫的不好 }); }); }; })(jQuery);

 

我想大家都用過一些jquery插件,我這里看下插件使用時的代碼:

(代碼二)

<script type="text/javascript"> $().ready(function(){ $("#tabtitle").tab({eventname:"mousemove",sedcss:"sed"}); }) </script>

 

結合以上兩段代碼進行說明

$("#tabtitle")表示你要使用在哪個地方,稍微了解jquery的童鞋都知道是什么意思了,不多介紹了,

.tab 就是這個插件我們定義的函數名了,對照(代碼一)中的$.fn.tab中的tab。

.tab({eventname:"mousemove",sedcss:"sed"}); 中eventname和sedcss就是(代碼一)var defaults ={};中定義的屬性值了。如果我們不需要改變屬性值,那么我們就使用默認的屬性值,那么插件就應該這樣使用

<script type="text/javascript"> $().ready(function(){ $("#tabtitle").tab(); }) </script> 最后附上全部的頁面代碼:
<html> <head> <title>tab test</title> <script type="text/javascript" src="jquery.js"> </script> <script type="text/javascript" src="jquery.joyleetab.js"> </script> <script type="text/javascript"> $().ready(function(){ $("#tabtitle").tab({eventname:"mousemove",sedcss:"sed"}); }) </script> <link href="css.css" rel="stylesheet" type="text/css"> </head> <body> <ul id="tabtitle">//這里的ID對應$("#tabtitle")中的ID,LI的ID分別是尾部添加數字 <li id="tabtitle1" class="sed">asdfasfd</li> <li id="tabtitle2">asdfasfd</li> <li id="tabtitle3">asdfasfd</li> <li id="tabtitle4">asdfasfd</li> <li id="tabtitle5">asdfasfd</li> </ul> <div id="tabtitleinfo">//這里的ID對ul中的ID,ID分別是尾部添加數字和"info" <div id="tabtitle1info" >000000</div> <div id="tabtitle2info" style=" display:none">111111</div> <div id="tabtitle3info" style=" display:none">22222</div> <div id="tabtitle4info" style=" display:none">33333</div> <div id="tabtitle5info" style=" display:none">44444</div> </div> </body> </html>
此文重點在說明jquery插件的制作方法,示例中代碼還有要優化的地方
0
首頁
案例
關于
聯系
街机麻将玩法