很早之想就學習jquery的插件寫法,一直拖到現在,今天趁著沒什麼工作忙,搜索些資料學習下,寫了個比較簡單的選項卡效果。
剛開始有看到一個很通俗易通的例子:alert對話框。
jquery.alertMsg.js
/** * [description] * @param {[type]} $ [description] * @return {[type]} [description] */ (function($){ $.fn.alertMsg = function(options) { var defaults = { mouseEvent: 'clcik', msg: 'hello world' } var options = $.extend(defaults, options); var $this = $(this); $this.on(options.mouseEvent, function(e){ alert(options.msg); }) } })(jQuery)
調用方式:
<span id="test">test</span> $(function(){ $('#test').alertMsg({ mouseEvent : "click", msg : "第一次寫插件!" }); });
jQuery插件結構
(function($){ // tabs 自定義的插件名稱 $.fn.tabs = function(options) { // 設置默認參數 var defaults = { activeClass: 'active' ... } // 對象擴展 var options = $.extend(defaults, options); return $(this).each(function(){ // 編寫相應實現代碼 }) } })(jQuery)
選項卡實現:
1、HTML結構
<div id="tab"> <ul> <li>選項1</li> <li>選項2</li> <li>選項3</li> <li>選項4</li> </ul> <div id="tabCon" class="tab-con"> <div>1的內容</div> <div>2的內容</div> <div>3的內容</div> <div>4的內容</div> </div> </div>
2、jquery.tabs.js
(function($){ $.fn.tabs = function(options) { var defaults = { Event: 'click', activeClass: 'active' } var options = $.extend(defaults, options); return $(this).each(function(){ var $thisTab = $(this).find('ul'); var $tabCon = $thisTab.siblings('div'); $tabCon.find('div').each(function(){ $(this).hide(); }); $thisTab.find('li:first').addClass(options.activeClass); $tabCon.find('div:first').show(); $thisTab.find('li').each(function(index){ $(this).on(options.Event, function(){ $(this).siblings().removeClass(options.activeClass); $(this).addClass(options.activeClass); $tabCon.find('div').eq(index).show().siblings().hide(); }); }); }); } })(jQuery)
3、調用
$('#tab').tabs({ activeClass: 'active' });
小結:對jQuery插件的初識,感覺應該還要繼續優化和擴展,繼續學習!
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。
精彩專題分享:javascript選項卡操作方法匯總 jQuery選項卡操作方法匯總