很早之想就學(xué)習(xí)jquery的插件寫法，一直拖到現(xiàn)在，今天趁著沒什么工作忙，搜索些資料學(xué)習(xí)下，寫了個比較簡單的選項(xiàng)卡效果。
剛開始有看到一個很通俗易通的例子：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)調(diào)用方式：
<span id="test">test</span>$(function(){ $('#test').alertMsg({ mouseEvent : "click", msg : "第一次寫插件!" });});jQuery插件結(jié)構(gòu)
(function($){ // tabs 自定義的插件名稱 $.fn.tabs = function(options) { // 設(shè)置默認(rèn)參數(shù) var defaults = { activeClass: 'active' ... } // 對象擴(kuò)展 var options = $.extend(defaults, options); return $(this).each(function(){ // 編寫相應(yīng)實(shí)現(xiàn)代碼 }) }})(jQuery)選項(xiàng)卡實(shí)現(xiàn)：
1、HTML結(jié)構(gòu)
<div id="tab"> <ul> <li>選項(xiàng)1</li> <li>選項(xiàng)2</li> <li>選項(xiàng)3</li> <li>選項(xiàng)4</li> </ul> <div id="tabCon" class="tab-con"> <div>1的內(nèi)容</div> <div>2的內(nèi)容</div> <div>3的內(nèi)容</div> <div>4的內(nèi)容</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、調(diào)用
$('#tab').tabs({ activeClass: 'active' });小結(jié)：對jQuery插件的初識，感覺應(yīng)該還要繼續(xù)優(yōu)化和擴(kuò)展，繼續(xù)學(xué)習(xí)！
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
