jQuery on iPhone - jQTouchを使ったWebアプリ開発

画面の制約があるiPhone向けWebアプリケーションにおいて、つくりをシンプルにするためにリストは外せない要素のひとつ。jQTouchで用意されているテーマで、リストがどのように表示されるかを確認する。

用意されているクラスを一部紹介しよう。

ulのクラス

クラス指定なし … 標準のリストスタイル
form … 標準のリストスタイルと比較し、若干ハイトが小さくなる
individual … 横に並べて表示される。画面サイズ的にliの数は2つが限度

liのクラス

クラス指定なし … 標準のリストスタイル
arrow … 右部に右方向の矢印が表示される
forward … 右部に丸いアイコンの矢印が表示される

liのクラスではないが、li内で<small class="counter">を使用することでカウンタを表示させることも可能だ。それぞれ実際にどのように表示されるかを確認してみよう。

hello_jqtouch_2.html

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />

    <title>jQTouch List</title>

    <style type="text/css" media="screen">@import "../../jqtouch/jqtouch.min.css";</style>
    <style type="text/css" media="screen">@import "../../themes/jqt/theme.min.css";</style>
    <script src="../../jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        $.jQTouch();
    </script>
    <style type="text/css" media="screen">
        body.fullscreen #home .info {
            display: none;
        }
        #about {
            padding: 100px 10px 40px;
            text-shadow: rgba(255, 255, 255, 0.3) 0px -1px 0;
            font-size: 13px;
            text-align: center;
            background: #161618;
        }
        #about p {
            margin-bottom: 8px;
        }
        #about a {
            color: #fff;
            font-weight: bold;
            text-decoration: none;
        }
    </style>
</head>
<body>

    <div>
        <ul>
            <li><a>li</a></li>
            <li class="arrow"><a>class=&quot;arrow&quot;</a></li>
            <li><a>counter</a> <small class="counter">3</small></li>
            <li class="arrow"><a href="#demos">class=&quot;arrow&quot; + counter</a> <small class="counter">2</small></li>
            <li class="forward"><a href="#demos">class=&quot;forward&quot;</a></li>
        </ul>

        <h2>ul.form</h2>
        <ul class="form">
            <li><a>li</a></li>
        </ul>

        <h2>ul.individual</h2>
        <ul class="individual">
            <li><a>リンク有</a></li>
            <li>リンク無</li>
        </ul>
    </div>

</body>
</html>

これを実際にiPhoneから表示させてみよう。


iPhoneでhello_jqtouch_2.htmlにアクセス。リストが並ぶといかにもiPhoneのアプリケーションっぽくなる	テーマをjqtからappleに変更した様子。テーマの変更はスタイルシートを読み込むディレクトリをjqtからappleに変更するだけで完了する