• かちびと.net

    PCサイトではタブによる切り替え、スマフォ等ではアコーディオンで実装できるスクリプト・Easy-Responsive-Tabs-to-Accordionのご紹介です。

    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

PCサイトではタブによる切り替え、スマフォ等ではアコーディオンで実装できるスクリプト・Easy-Responsive-Tabs-to-Accordion

スポンサーリンク

必要になりそうだったのでメモ。通常のPCサイトではタブ、スマフォ等の画面の狭いデバイスではアコーディオンで実装するスクリプトのご紹介です。jQuery依存になります。

Easy-Responsive-Tabs-to-AccordionはレスポンシブWebデザイン対応のWebサイトでタブコンテンツを使いやすくするライブラリです。アコーディオンの方がみやすくタップしやすいケースもあるので覚えておくと良いかも知れません。とはいえ先発ライブラリも確かあったはずなので使いやすいほうで。

Easy-Responsive-Tabs-to-Accordion

動作サンプルです。直接見に行って実装エリアをリサイズすれば確認出来ると思います。

コード

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script src="easyResponsiveTabs.js" type="text/javascript"></script>

本体とスクリプトを読み込みます。

        $('#foo').easyResponsiveTabs({
            type: 'default', // default、vertical、accordionの3つからタブのタイプを選択。
            width: 'auto', //幅の指定
            fit: true   // コンテナ内にフィットさせるか否か

オプションでセッティングします。あとはCSSで調整します。

ライセンスはMITとなります。

Easy-Responsive-Tabs-to-Accordion

URL :
TRB :

Ads

Posts

Contact

Services