「iPhone」風UIを実現するJavascript「iUI.js」

iPhoneが米国で発売され、apple独特のUIの良さが好評になっています。
今回はJoeHewitt.comiUIで紹介されている、iPhone的なUIを実現するjavascript「iUI.js」を紹介します。
iUI.js

使用方法
実装はそう難しくありません。
iUIからダウンロードしたファイル群をアップロードし、CSSとjsをhead内に挿入します。

次にHTMLです。
<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
</div>

と書き込みヘッダー部分を作成します。
後はページ毎にui id="ページ名"で括り、liのリンク先にそのidを指定すれば完成です。
なおトップページはselectedでtrueと表記する必要があります。
「iPhone」風UIを実現するJavascript「iUI.js」サンプルで使用しているソース(一部)は以下です。
*注意:CSSの関係上、IEでは上手く表示されません
    メニュー以外のリンク先を指定する場合はtarget="_self"が必要です
<ul id="home" title="トップ" selected="true">
<li><a href="#javascript">Javascript</a></li>
<li><a href="#underconstruction">Movable Type</a></li>
<li><a href="#underconstruction">ruby</a></li>
<li><a href="#aboutme">About Me</a></li>
</ul>
<ul id="javascript" title="Javascript">
<li><a href="#ui">UI関連</li>
<li><a href="#chart">グラフ関連</a></li>
<li><a href="#font">フォント関連</a></li>
<li><a href="#form">フォーム関連</a></li>
<li><a href="#print">印刷関連</a></li>
<li><a href="#others">その他</a></li>
</ul>
(後略)

Movable Type用サイトマップ
<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
</div>
<ul id="home" title="サイトマップ" selected="true">
<MTCategories>
<li><a href="#map<$MTCategoryID$>"><$MTCategoryLabel$></a></li>
</MTCategories>
</ul>
<MTCategories>
<ul id="map<$MTCategoryID$>" title="<$MTCategoryLabel$>">
<MTEntries><li><a href="<$MTEntryPermalink archive_type="Individual"$>" target="_self"><$MTEntryTitle$></a></li></MTEntries>
</ul>
</MTCategories>

(*追記)
サブカテゴリーがあると微妙だったので、以下のように頭の部分だけ変更しました。
<ul id="home" title="サイトマップ" selected="true">
<MTTopLevelCategories><MTSubCatIsFirst></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="#map<$MTCategoryID$>"><$MTCategoryLabel$></a>
<MTElse>
<li class="group"><$MTCategoryLabel$></li>
</MTIfNonZero><MTSubCatsRecurse></li>
<MTSubCatIsLast>
<li></li> //必要ありませんが、区切りができてみやすくなります
</MTSubCatIsLast></MTTopLevelCategories>
</ul>

sponsors

「「iPhone」風UIを実現するJavascript「iUI.js」」をシェアする

記事作成:
記事URL:

TOP > > > 「iPhone」風UIを実現するJavascript「iUI.js」