jQuery プラグイン tabBox 実装 code_jquery

jq の公式プラグイン作成ドキュメント (http://docs.jquery.com/Plugins/Authoring) とそのドキュメント内で推奨されている Mike Alsup 氏の記事を確認しました プラグイン開発パターン。私の英語はあまり上手ではありませんが、それでも一生懸命読んで（知識を学ぶと同時に英語の練習もできるので、そうしてみてはいかがでしょうか）、デビュー小説を書きました - tabBox。

このプラグインは名前の通り、タブ機能を使って「ボックス」を生成する便利なプラグインです。画像を見るだけで、

この種の機能は、フロントエンド、バックエンドに関係なく、Web ページで非常に便利であることがわかります。

ここでは、まずカスタム プラグインの 3 つのパラメーターを指定します。

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

$.fn.tabBox.defaults = {
幅 : 260,
高さ : 200,
basePath : "tabBox/"
};

幅と高さは「ボックス」の幅と高さを定義し、basePath はプラグインを使用するページからプラグイン フォルダーへの相対パスを定義するために使用されます。画像はタブ スタイルで使用され、画像のパスを正しく見つけるには参照パスが必要であるため、このオプションは最後の手段として表示されます。これは、jqtransform (
http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/) というプラグインの実践にも基づいています。画像フォルダーの場所を指定するために使用されるパラメーターもあります。もちろん、WebUI (http://www.jqueryui.com/) と同じように、CSS ファイルにスタイルを記述して、画像は最初に CSS ファイル パスと比較されます。これらは両方ともプラグインのコンポーネントであり、相対パスは変更されません。したがって、このパスを指定する必要はありません。このプラグインでは使用するスタイルが比較的少ないため、この方法は使用されません。 プラグインの原理は非常に単純です。コア関数はタブ スタイルをレンダリングするために使用される render() です。

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

$.fn.tabBox.render = function() {
$(".tabBox").css({
幅 : $.fn.tabBox .defaults.width "px"、
高さ : $.fn.tabBox.defaults.height "px"、
位置 : "相対"、
境界 : " 1px #ccc ソリッド",
背景 : "url(" $.fn.tabBox.defaults.basePath "tabHead.gif) 左上repeat-x"
});
$(".tabBox h2 ").each(function(i) {
$(this).css({
幅 : "80px",
高さ : "30px",
位置 : "絶対",
"border-top" : "none "、
cursor : "pointer"、
left : 10 (i*80)、
background : "url(" $.fn.tabBox.defaults.basePath "tabNormal.gif) 右上 no-repeat"、
"text-align" : "center"、
"font-size" : "12px"、
"font-weight" : "normal" ,
color : "#06c ",
"line-height" : "22px"
})
});
$(".tabBox div").each(function) (){
$(this ).css({
幅 : $.fn.tabBox.defaults.width "px",
高さ : ($.fn.tabBox.defaults.height-30) "px",
表示: "なし",
位置: "絶対",
トップ: "30px"
}); h2.curTab").css({
background : "url(" $.fn.tabBox.defaults.basePath "tabCurTab.gif) 上部中央 no-repeat",
"font-weight" : "bolder "
});
$(".tabBox h2.curTab div").css({
display : "block"
});
};


この関数のすべてを見ることができます スタイルを設定するためのコードです (私も jq で CSS を設定する楽しさを体験することができました。この関数は e.style.backgroud の時代を今でも覚えています)。現在アクティブ化されているタグと対応する情報が表示されるようにします。さらに、タブのクリック イベントをキャプチャして、現在アクティブなラベルを変更し、再度レンダリングします。

コードをコピー コードは次のとおりです:$(".tabBox h2")。 click(function (){

$(".tabBox h2").removeClass("curTab");

$(this).addClass("curTab");
$.fn.tabBox.render ();
});



書いた後の感想:

1. プラグインのカスタマイズ オプションがよくわかりません。 🎜>


コードをコピーします

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

// 要素の反復の前にメイン オプションを構築します
var opts = $.extend({}, $.fn.tabBox.defaults, options);
// 一致した各要素を反復して再フォーマットします
return this.each(function() {
$this = $(this);
// 要素固有のオプションを構築
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

これは、Mike Alsup の記事からほぼコピーしたもので、プラグイン全体をカスタマイズできるオプションのようです。特定の要素のオプションを定義することもできますが、試してみましたが、うまくいきませんでした。

2. 現在、タブはクリック イベントをキャプチャします。はい、2 つのイベント ハンドラーを作成できます。しかし、
パッケージのダウンロード をどのように決定するのですか?