• かちびと.net

    jQuery UIを使ったタブの数が多くてもレイアウトを崩さないようにするスクリプト・plusTabsのご紹介。省スペース化に便利なタブの利用シーンを広げることが出来ます。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

jQuery UIを使ったタブの数が多くてもレイアウトを崩さないようにするスクリプト・plusTabs

スポンサーリンク

jQuery UIを使ったタブコンテンツ
でタブ数が多数有ってもレイアウト
を崩さないようにドロップダウン化
するスクリプトです。確かにちょっ
と問題だったのでありがたいです。
ドロップダウン+タブメニューという
感じ。

タブでコンテンツをその場で切り替える、という手法はかなり一般的になりました。ブログなどでもサイドカラムでよく見られますね。

ただ、そのタブ数が増えてしまうとボタンが収まりきらずにレイアウトを崩してしまうので複数用意したり、という事で対応している事がしばしばですが、そのタブ数が増えても一箇所に収められるようにしたのが今日のスクリプトです。前置き長いですね。

plusTabs


動作サンプルです。通常横並びになるタブがドロップダウン内に一纏めになっています。通常のタブはワンクリックで済むのに対してこれだともう一回クリックする必要があるので数が少ないと逆効果ですが、数を気にせず1箇所にこうして収められるのは割と便利な気がします。

なかなか応用が利きそう。jQuery UIを使用します。

コード

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<script type='text/javascript' src="plusTabs.js"></script>

コアとjQuery UIとスクリプトを読み込みます。

    $("#foo").plusTabs({
        className: "bar",//class名
        seeMore: true,  //このスクリプトを適応させるか否か
        seeMoreText: "hoge",//ドロップダウンを表示させるタブに含めるテキスト
        showCount: true,//タブ数の表示
        expandIcon: "&#9660; ",//ドロップダウンに含めるアイコン(テキストでもいいけど)の表示
        dropWidth: "66%",//幅
        sizeTweak: 30

    });

あとはセッティングすればいいだけ。

有りそうでなかったので覚えておきます。

plusTabs

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services