シンプルで汎用的なJQuery Tab実装

19426 ワード
jquery
本明細書から:http://www.cnblogs.com/dvbhack/archive/2009/04/17/portable-interchangeable-jquery-based-tabs.html
Webページのスペースは寸土寸金で、ディスプレイの解像度はますます大きくなっていますが、今日に至るまで、Webページの設計では少なくとも1024 x 768ピクセルのサポートが主で、つまり、各画面のページは955 x 600ピクセルのセキュリティサイズしか使えません.そこで、限られた空間により多くのコンテンツを収容するために、スライドドア式のラベル切り替え(Tabs)方式がますます人気を集めている.スライドドアテクノロジーにより、同じページ領域に数倍のコンテンツを配置できます.ユーザーの選択に応じて、どの部分を表示するかを決定します.最近、私は実際のアプリケーションで、jQueryベースを徐々に改善していますが、jQuery UI Tabsプラグインよりも小さくて汎用的な簡単なTabs実装を実現しています.
最初のスライドドアの技術は、一般的にonclickまたはonmouseoverイベントと組み合わせてJS関数にパラメータを渡し、伝達されたパラメータに基づいてどのラベルを表示するかを決定する.例:
function showTabs(n) {

  var tabsNumber = 3;

  for (i = 0; i < tabsNumber; i++) {

      if (i == n) {

          document.getElementById("tabPanel-" + i).style.display = "block";

      } else {

          document.getElementById("tabPanel-" + i).style.display = "none";

      }

  }

}

このような関数を加えると、tabのタイトルボタンにonclick=「showTabs(1)」を設定して2番目のブロックのコンテンツ表示を設定し、他のブロックは非表示にすることができる.
この方法の最大の欠点は、
  • HTMLコードとJSコードの混合;
  • の拡張性が悪い.

    • Windowsを通ることができますが.onloadバインドイベントなどはJSコードのHTMLからの分離を実現し、関数をより複雑に変更して汎用性を実現することもできます.しかし、総じて言えば、定義があちこち引用されるのは難しい.
    その後、さまざまなJSクラスライブラリが登場するにつれて、より強力なTabsが登場し、最も有名なのはjQuery UIのtabsプラグインです.jQueryフレームワークとjQuery UIプラグインがロードされると、ページでTabsを実装するのは簡単になります.まず、私たちのページのTabsコードには次のように書かれています.
    <div class="tabs">

    <ul>

        <li><a href="#panel-1">   </a></li>

        <li><a href="#panel-2">   </a></li>

    </ul>

    <div id="panel-1">   </div>

    <div id="panel-2">   </div>

</div>

    注意:ここのコードは非常にきれいで、JSコードやドキュメント構造に関係のない定義は含まれていません.次にhead領域、またはページの任意の場所にjsコードを追加します.
    $(function() {

    $(".tabs").tabs();

});

    Tabs機能が実現し、このJSコードが実行されると、上のHTMLコードは次のようになります.
    <div class="tabs">

    <ul class="ui-tabs-nav" jquery1239647486215="2">

        <li class="ui-tabs-selected"><a href="#panel-1" jquery1239647486215="8">   </a></li>

        <li><a href="#panel-2" jquery1239647486215="9">   </a></li>

        ></ul>

    <div id="panel-1" class="ui-tabs-panel" jquery1239647486215="4">

           

    </div>

    <div id="panel-2" class="ui-tabs-panel ui-tabs-hide" jquery1239647486215="5">

           

    </div>

</div>

    私たちが自分で書いたcssやjQuery UIが持っているCSSと組み合わせて、スライドドア効果を実現することができます.また、jQueryの強さにより、ページにスライドドアを複数セット配置し、一度に設定することができます.
    なお、ここではjQuery UIのTabsプラグインのみが有効になっているため、生成されたコードは比較的クリーンであり、ui-tabs-xxxxといういくつかの関連cssクラスのみが追加されている.jQuery UIの他のプラグインを同時に含んでいる場合は、有効にしなくてもcss定義が山積みになります.また、jQuery UI Tabsは非常に強力な制御機能を提供しており、tabを動的に追加したり、アクティブ化イベントを任意に変更したり、切り替え効果を定義したり、デフォルトのアクティブ化状態や無効化などを設定したりすることができます.
    しかし、私は実際のアプリケーションでいくつかの問題に直面しました.jQuery UIに付属するjsスクリプトが大きく、cssが実際のアプリケーションのニーズに合わないほか、ナビゲーションとしてのラベル定義では、各ラベルがどの領域に対応するかがリンクターゲットで定義されていることに気づいたかもしれません.例えばラベル1と
    領域1
    が対応し、ラベルと領域が対応していなければtabs()をバインドすることはできません.
    そして、この方法はもう一つの面倒をもたらします.ラベルにリンクを付ける必要があるとき、追加できません.ラベルのアクティブ化イベントをonclickではなくonmouseoverに設定しても、リンクはターゲットを指定するために使用されるため、実装できません.このような需要は私たちの実際の応用には存在しないわけではありません.例えば、image image
    この2つの画像のtabsラベルは、対応するニュースカテゴリまたはフォーラムプレートへのリンクに追加されます.このとき、jQuery UIのデフォルトバインドは面倒になります.
    実際に分析すると、スライドドアを実現する際に、以下のHTML構造でニーズを満たすことができます.
    <div class="tabs">

    <ul>

        <li>   </li>

        <li>   </li>

    </ul>

    <div>   </div>

    <div>   </div>

</div>

    jQueryライブラリを使用すると、実装するラベルを$(「.tabs」)で見つけることができます.find("li")は、イベントを追加する要素を見つけ、イベントをバインドするときに、$(.tabsli")セットのインデックス値を使用して、どのラベルがアクティブになっているかを明確にし、インデックス値に対応するpanel表示を行うことができます.コードは次のようになります.
    <script type="text/javascript">

    $(function() {

        $(".tabs").find("li").onmouseover(function(e) {

            if (e.target == this) {

                var tabs = $(this).parent().children("li");

                var panels = $(this).parent().parent().children("div");

                var index = $.inArray(this, tabs);

                if (panels.eq(index)[0]) {

                    tabs.removeClass("ui-tabs-selected")

                        .eq(index).addClass("ui-tabs-selected");

                    panels.addClass("ui-tabs-hide")

                        .eq(index).removeClass("ui-tabs-hide");

                }

            }

        });

    });

</script>

    このコードは2つのcssクラスのみを使用して処理され、tabsとpanelsの対応状態を自動的に判断します.もしあなたが4つのtabを持っていますが、最初の3つだけが有効になっている場合は、3つのpanelを書くだけでいいです.4番目のpanelが存在しない場合は、4番目のtabは自動的に有効になりません.
    実際の使用では、tabの文字にリンクを付けると、マウスがこのtabを滑ったときに文字を指すと、li要素ではなくa要素でイベントが正しく励起されない可能性があるという問題が発生します.コードを改善するには、次のようにします.
    <script type="text/javascript">

    $(function() {

        $(".ui-tabs-nav > li > a")onmouseover(function(e) {

            if (e.target == this) {

                var tabs = $(this).parent().parent().children("li");

                var panels = $(this).parent().parent().parent().children(".ui-tabs-panel");

                var index = $.inArray(this, tabs);

                if (panels.eq(index)[0]) {

                    tabs.removeClass("ui-tabs-selected")

                        .eq(index).addClass("ui-tabs-selected");

                    panels.addClass("ui-tabs-hide")

                        .eq(index).removeClass("ui-tabs-hide");

                }

            }

        });

    });

</script>

    これに対応するHTML構造は次のとおりです.
    <div>

    <ul class="ui-tabs-nav">

        <li class="ui-tabs-selected"><a href="/bbs">    </a></li>

        <li><a href="/blog">    </a></li>

    </ul>

    <div class="ui-tabs-panel">

      <!--          -->

    </div>

    <div class="ui-tabs-panel ui-tabs-hide">

      <!--          -->

    </div>

</div>

    また、以下のcssクラス定義があります.
    .ui-tabs-nav

{

    /*      */

}

.ui-tabs-nav li

{

    /*      */

}

.ui-tabs-nav li.ui-tabs-selected

{

    /*       */

}

.ui-tabs-panel

{

    /*         */

}

.ui-tabs-hide

{

    display: none;

}

    これにより、あなたのニーズに合わせて、自分のcssと組み合わせて、異なるスタイルのスライドドアをカスタマイズすることができます.対応するjsコードをページに配置すると、ページ内のどこでもHTML構造に従ってhtmlを作成すると、このhtmlは自動的にスライドドアになります.スライドドアのtabs()メソッドを適用するには、各ページに特定のselectorを個別に指定する必要はありません.また、必要に応じてスライドドアラベルに必要なリンクを追加するか、リンクしない(href=「#」またはhref=「javascript:void(0)」).
    このスライドドアコードはjQuery coreさえあれば正常に動作し、jQuery UIをロードする必要はありません.とても簡単で、しかも汎用的で、スタイル的にどのように拡張してもいいです.
    具体的な効果はhttp:/www.taihainet.comを参照してください.台海網のトップページでは、4つのスタイルの9つのスライドドアを適用しました.コードは上記のセグメントにすぎません.4つのスタイルは次のとおりです.
    imageスライドドア1:複数の検索フォームは、一時的に2つしか実現されず、後の3つは対応するui-tabs-panelがないため、自動的に無効になりますが、リンクはクリックできます.
    imageスライドドア2:複数のビジネス情報エリアで、3番目は対応するui-tabs-panelがないため、自動的に無効になります.
     
    imageスライドドア3:ニュース欄切り替え、ラベルの文字が対応するニュース欄にリンクされます.
    imageスライドドア4:フォーラムプレートスレッド呼び出し.ラベルのテキストは、対応するフォーラムプレートにリンクされています.
    本稿は
    刀のブログ、ブログパークが同期して更新されました.転載する必要がある場合は、著者と出典を明記してください.
    shell mysqlマルチマシン導入を実行
    mysql#カスタムシーケンス