jqueryタブプラグインの本番実装 code_jquery-jsチュートリアル-php.cn

jquery プラグインの基本形式:

コードをコピーコードは次のとおりです:

 
(function($){ 
$.fn.tab = function(options){//$.fn の後のタブは、このプラグインの関数名です。好みに応じて変更できます。
var defaults = { 
//関連する属性の設定 
} 
var options = $.extend(defaults, options); 
this.each(function(){ 
//関数実装された設定}); 
})(jQuery); 

 

上記のコードを改善します。

コードをコピーコードは次のとおりです: (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); 
 
 
プラグインを使用する際のコードを見てみましょう。 🎜> (コード 2) 

コードをコピー

コードは次のとおりです:

上記 2 つの段落を結合して説明します

コードをコピーします

コードは次のとおりです。 $("#tabtitle") は、どこで使用するのですか? jquery について少し知っている人なら、これが何を意味するかわかるでしょう。詳細は説明しません。.tab はこのプラグイン用に定義した関数名です。の (コード 1) タブの $.fn.tab と比較してください。 .tab({eventname:"mousemove",sedcss:"sed"}); イベント名と sedcss は、(コード 1) vardefaults ={}; で定義された属性値です。属性値を変更する必要がない場合は、デフォルトの属性値を使用し、プラグインは次のように使用する必要があります。

最後に、すべてのページを添付しますコード:

コードをコピー

コードは次のとおりです:

タブテスト

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


 ;body>
//ここでのIDは$("#tabtitle")のIDに相当し、LIのIDは最後に追加される番号です
< ;li id=" tabtitle1" class="sed">asdfasfd 
asdfasfd

 asdfasfd

asdfasfd

 🎜>//ここでの ID は ul の ID、ID はそれぞれ最後に追加される番号と「info」です 
 000000

111111

 22222

33333

 44444

< ;/div> ご容赦ください

ソースコードパッケージのダウンロード