skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

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>

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

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

記事作成：2009年03月26日

前の記事：3ステップでツールチップを作成「jQuery Simple Tooltip」
次の記事：テキストエリアを入力内容に応じて自動でリサイズするjQueryプラグイン「autoResize」