本文主要為大家詳細介紹了jquery外掛開發之選項卡製作,具有一定的參考價值,有興趣的夥伴們可以參考一下,希望能幫助大家。
在jquery中,外掛開發常見的有:
一種是為$函數本身擴充一個方法,這種是靜態擴充(也叫類別擴充),這種外掛一般是工具方法,
還有一種是擴充在原型物件$.fn上面的,開發出來的外掛是用在dom元素上面的
一、類別層級的擴充
$.showMsg = function(){ alert('hello,welcome to study jquery plugin dev'); } // $.showMsg();
注意要提前引入jquery函式庫,上例在$函數上面加入了一個方法showMsg,那麼就可以用$.showMsg()呼叫了
$.showName = function(){ console.log( 'ghostwu' ); } $.showName();
這種外掛比較少見,一般都是用來開發工具方法,如jquery中的$.trim, $.isArray()等等
二、把功能擴充在$.fn上,
這種外掛就是用在元素上,例如,我擴充一個功能,點選按鈕,顯示目前按鈕的值
$.fn.showValue = function(){ return $(this).val(); } $(function(){ $("input").click(function(){ // alert($(this).showMsg()); alert($(this).showMsg()); }); }); <input type="button" value="点我">
在$.fn上新增一個showValue方法, 傳回目前元素的value值. 在取得到頁面input元素,綁定事件之後,就可以呼叫這個方法,顯示按鈕的值"點我",在實際外掛開發中,常用的就是這種.接下來,我們就用這種擴展機制開發一個簡單的選項卡外掛程式:
#頁面佈局與樣式:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcss.com/jquery/1.12.0/jquery.js"></script> <style> #tab { width:400px; height:30px; } #tab li, #tab ul { list-style-type:none; } #tab ul { width:400px; height: 30px; border-bottom:1px solid #ccc; line-height: 30px; } #tab ul li { float:left; margin-left: 20px; padding:0px 10px; } #tab ul li.active { background: yellow; } #tab ul li a { text-decoration: none; color:#666; } #tab p { width:400px; height:350px; background-color:#ccc; } .clearfix:after{ content: ''; display: block; clear: both; height: 0; visibility: hidden; } </style> <script src="tab2.js"></script> <script> $(function(){ $("#tab").tabs( { evType : 'mouseover' } ); }); </script> </head> <body> <p id="tab"> <ul class="clearfix"> <li><a href="#tab1">选项1</a></li> <li><a href="#tab2">选项2</a></li> <li><a href="#tab3">选项3</a></li> </ul> <p id="tab1">作者:ghostwu(1) <p>博客: http://www.php.cn/ghostwu/</p> </p> <p id="tab2">作者:ghostwu(2) <p>博客: http://www.php.cn//ghostwu/</p> </p> <p id="tab3">作者:ghostwu(3) <p>博客: http://www.php.cn//ghostwu/</p> </p> </p> </body> </html>
tab2.js檔案
;(function ($) { $.fn.tabs = function (opt) { var def = { evType: "click" }; //定义了一个默认配置 var opts = $.extend({}, def, opt); var obj = $(this); $("ul li:first", obj).addClass("active"); obj.children("p").hide(); obj.children("p").eq(0).show(); $("ul li", obj).bind(opts.evType, function () { $(this).attr("class", "active").siblings("li").attr("class",""); var id = $(this).find("a").attr("href").substring(1); obj.children("p").hide(); $("#" + id, obj).show(); }); }; })(jQuery);
1,一個自執行函數,把外掛程式封裝成模組,把jQuery對象傳給形參$
2,第3行,定義一個預設配置,選項卡的觸發類型,預設為點擊事件
3,第4行,如果opt傳參,就用opt的配置,否者就用第3行的預設配置,這行的作用就是為了在不改變插件原始碼的情況下,可以配置插件的表現形式
4,第7-9行,讓選項卡第一個p顯示,其餘的都隱藏,讓第一個tab加上class='active' 黃色高亮選取
5,第11-16行,點選對應的選項卡,讓對應的p顯示與隱藏
相關推薦:
以上是jquery外掛開發之選項卡製作技術分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!