ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryタブプラグインの本番実装 code_jquery
jqueryタブプラグインの本番実装 code_jquery
- WBOYオリジナル
- 2016-05-16 18:24:391149ブラウズ
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)
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 つの段落を結合して説明します
上記 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>
"text/javascript">
$().ready(function(){
$("#tabtitle").tab({eventname:"mousemove",sedcss:"sed"});
})
;body>
- //ここでのIDは$("#tabtitle")のIDに相当し、LIのIDは最後に追加される番号です
- asdfasfd
- asdfasfd
- asdfasfd
< ;li id=" tabtitle1" class="sed">asdfasfd
//ここでの ID は ul の ID、ID はそれぞれ最後に追加される番号と「info」です
< ;/div> ご容赦ください
ソースコードパッケージのダウンロード
000000
< ;/div> ご容赦ください
ソースコードパッケージのダウンロード
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。