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

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

｜ ｜ ｜ ｜ ｜ ｜ ｜

iPhoneが米国で発売され、apple独特のUIの良さが好評になっています。
今回はJoeHewitt.comのiUIで紹介されている、iPhone的なUIを実現するjavascript「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>

記事作成：2007年07月17日

前の記事：フォントの大きさを変更するjavascript「fontSize.js」
次の記事：水平方向もOKのアコーディオンjavascript「Accordion v1.0」