appleに倣え！jQueryで作るiPhoneライクなUI「jqtouch」

いまや持っているのが当たり前になったiPod関連商品のUIをまねしてみましょう。
以前、「iPhone」風UIを実現するJavascript「iUI.js」でも紹介したUIをjQueryのプラグインjQTouchで実現可能になりました。
※iPhoneやSafari 4 beta、WebKit搭載ブラウザなどでしか、きちんと動作しません。

使用方法

jQTouchからファイル一式をダウロードします。


<style type="text/css" media="screen">@import "jqtouch.css";</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jqtouch.min.js"></script>
<script type="text/javascript" charset="utf-8">
    $(document).jQTouch({
        icon: 'jqtouch.png',
        statusBar: 'black-translucent'
    });
    $.preloadImages([
        'chevron_white.png',
        'bg_row_select.gif',
        'back_button.png',
        'back_button_clicked.png',
        'button_clicked.png',
        'grayButton.png',
        'whiteButton.png'
        ]);
</script>

あとは以下のようにコンテンツ部分を記述します。


<div id="home" selected="true">   //最初のパネルにはtrueを記述
 <div class="toolbar">  //パネルのヘッダー部分
  <h1>タイトル</h1> 
 </div> 
   <ul class="edgetoedge"> 
     <li><a href="#demo">テスト</a></li>  //id名に飛ぶ
   </ul> 
</div> 
// 上記で指定したid部分
<div id="demo" class="panel">  //下層がないときはclass="panel"、あるときは上で書いたようにul,liを記述
   <div>
   コンテンツ
   <a href="#" class="grayButton back">Close</a> 
   </div> 
</div>

サンプル

サンプル
※Safari、Chromeなどでご覧ください Javascriptサンプルページ一覧

skuare.net