jQuery Accessible TabsをGeeklogに設置する

投稿者: Ivy 2013/07/28 23:50 JST

jQuery Accessible Tabs[*1] は、タブへ直接リンクを張れる、便利なjQueryタブメニューです。Geeklogで導入する方法を紹介します。

jQuery Accessible TabsをGeeklogに設置する方法

１．以下のページの、最新版ダウンロードのリンクから、最新ソース（DEMO含む）をダウンロード

http://blog.ginader.de/archives/2009/02/07/jQuery-Accessible-Tabs-How-to-make-tabs-REALLY-accessible.php

２．ダウンロードした圧縮ファイル（ginader-Accessible-Tabs-ＸＸＸＸＸＸＸ）を公開領域 /ginader/ にアップロード

３．テーマのヘッダの{rel_links}の上に以下のコードを追加

<!-- jQuery Accessible Tabs { -->
    <script type="text/javascript">document.documentElement.className += " js";</script>
    <link rel="stylesheet" href="{site_url}/ginader/slidingdoors/simple-sliding-doors.css" type="text/css" media="screen">
<!-- } jQuery Accessible Tabs -->

４．テーマのフッタの{plg_footercode}の下に以下のコードを追加

<!-- jQuery Accessible Tabs { -->
    <script type="text/javascript">document.documentElement.className += " js";</script>
    <script src="{site_url}/ginader/js/jquery.tabs.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">

    $(document).ready(function(){
        $(".tabs").accessibleTabs({
            tabhead:'h2',
            fx:"fadeIn",
            autoAnchor:true
        });
    });
    </script>    
<!-- } jQuery Accessible Tabs -->

５．メニューコンテンツ部分を静的ページなどでjQuery Accessible Tabs[*1] で紹介のように編集する。

        <div class="tabs">
            <h2>some dummy headline</h2>
            <div class="tabbody">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

                <h3>Lorem ipsum</h3>
                <p>Nullam malesuada suscipit pede. Nullam ipsum lacus, varius</p>

            </div>
            <h2>another dummy headline</h2>
            <div class="tabbody">
                <p>Integer tincidunt. Cras dapibus. Vivamus elementum nisi.</p>

                <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel.</p>

            </div>
            <h2>anything else</h2>
            <div class="tabbody">
                <p>Here could be your content</p>

            </div>
        </div>

活用例

以下のように、外部リンクからタブへの直接リンクできます。

• Geeklogとは
• ダウンロード
• アップロード
• カスタマイズと事例

Geeklog Japan - jQuery Accessible TabsをGeeklogに設置する
https://www.geeklog.jp/article.php/201307282350295

[*1] http://blog.ginader.de/dev/jquery/accessible-tabs/simple-linked-tab.html