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

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

使用方法
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>

idを入れ子にするなどすれば、あっという間にiPhoneになります。

appleに倣え!jQueryで作るiPhoneライクなUI「jqtouch」サンプル
※Safari、Chromeなどでごらんください。

sponsors

「appleに倣え!jQueryで作るiPhoneライクなUI「jqtouch」」をシェアする

記事作成:
記事URL:

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