2012年2月28日

iUIでタブインターフェースを実現する

こんにちは、サンプルアプリ開発者の山田健一です。

iUIには、簡単にタブインターフェースを実現できる記法が存在しませんが、タブインターフェースを用いたいと思うことも多いと思います。
そこで、iUIでタブインターフェースを実現する手法を紹介します。次のようなイメージになります。

<table>タグを利用してリンクを横に並べ、スタイルシートを用いて、タブっぽく見せるという手法です。

index.htmlのBODY部のコードは次のようになります。


<body>
    <div class="toolbar">
        <h1 id="pageTitle">リンク集</h1>
    </div>
    <ul id="tv" title="" selected="true">
        <table>
            <tr>
            <td>
                <a href="#tv" class="select">テレビ局</a>
            </td>
            <td>
                <a href="#music" >音楽</a>
            </td>
            <td>
                <a href="#air" >航空会社</a>
            </td>
            </tr>
        </table>
        <li><a href="http://www.tbs.co.jp/spmode/" target="_self">
            TBSテレビ</a></li>
        <li><a href="http://www.tv-tokyo.co.jp/index/smartphone/smart_index.html"
             target="_self">TV東京</a></li>
        <li><a href="http://www.fujitv.co.jp/" target="_self">フジテレビ</a></li>
        <li><a href="http://www.tv-asahi.co.jp/sphone/"
             target="_self">テレビ朝日</a></li>
    </ul>
    <ul id="music" title="">
        <table>
            <tr>
            <td>
                <a href="#tv">テレビ局</a>
            </td>
            <td>
                <a href="#music" class="select">音楽</a>
            </td>
            <td>
                <a href="#air" >航空会社</a>
            </td>
            </tr>
        </table>
        <li><a href="http://otome-corp.syncl.jp/" target="_self">
            オトメ☆コーポレーション</a></li>
        <li><a href="http://classkobukuro.com/sp/" target="_self">
            コブクロ</a></li>
    </ul>
    <ul id="air" title="">
        <table>
            <tr>
            <td>
                <a href="#tv">テレビ局</a>
            </td>
            <td>
                <a href="#music">音楽</a>
            </td>
            <td>
                <a href="#air" class="select">航空会社</a>
            </td>
            </tr>
        </table>
        <li><a href="http://rps.ana.co.jp/web/top.php" target="_self">ANA</a></li>
        <li><a href="https://www.mobile-dom.jal.co.jp/mobile/JALTopMenu.do"
             target="_self">JAL</a></li>
    </ul>
</body>

残念なのは、タブっぽく見せるテーブル記述が class="toolbar" の個所に記述できないことです。ここに記述するとレイアウトはなんとかなるのですが、なぜかタップを受け付けてくれません。

そのため、ページごとに、タブ用のテーブル記述を記述しています。 class="select" が選択されているタブ用のスタイル記述になります。

タブらしくするために、次のCSS記述も追加します。


    <style>
        table a {
            font-size: 100%;
            float: left;
            padding: 10px;
            background: #eee;
            text-decoration: none;
            -webkit-border-top-left-radius: 10px;
            -webkit-border-top-right-radius: 10px;
        }
        table a.select {
            background: yellow;
        }
    </style>