iUI - iPhone 網頁程式設計

有點小失望，為何標題不是 iPhone 程式設計，多了一個"網頁"內容的確差了十萬八千里啊! iPhone User Interface Framework 簡稱 iUI 是一個可以讓網頁看起來超像 iPhone OS 程式的網頁框架，而最核心的部分是用 JavaScript 撰寫的控制碼，不過呢!不用看懂也是可以使用的很愉快哦。

如何使用 iUI 來建立 iPhone 網頁呢

1. 下載 Framework

• Google Code Project: [專案網頁]
• Download: [檔案下載]，(tar.gz)
• 解壓縮之後: 把 iui 資料夾放到網頁專案的目錄即可

2. 獲取網頁樣板和 JS 語法控制的程式

<style type="text/css" media="screen">@import "iui/iui.css";</style>
<script type="application/x-javascript" src="iui/iui.js"></script>

3. 簡單的說明網頁的元素

A. 階層主選單

<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
<a class="button" href="#searchForm">Search</a>
</div>

<ul id="home" title="Music" selected="true">
<li><a href="#artists">Artists</a></li>
<li><a href="#settings">Settings</a></li>
<li><a href="stats.php">Stats</a></li>
<li><a href="http://code.google.com/p/iui/" target="_self">About</a></li>
<li>Nothing</li>

</ul>

B. 搜尋框(Google Map路徑規畫會出的樣式)

<form id="searchForm" class="dialog" action="search.php">
<fieldset>
<h1>Music Search</h1>
<a class="button leftButton" type="cancel">Cancel</a>
<a class="button blueButton" type="submit">Search</a>

<label>Artist:</label>
<input id="artist" type="text" name="artist"/>
<label>Song:</label>
<input type="text" name="song"/>
</fieldset>

</form>

C. 登入頁面

<form selected="true" title="Login" class="panel" method="post" action="login.php" target="_self">
<fieldset>
<div class="row">
<label>Username</label>
<input type="text" name="username" value="">
</div>
<div class="row">
<label>Password</label>
<input type="password" name="password" value="">
</div>
</fieldset>
<a class="whiteButton" type="submit" href="http://www.blogger.com/post-create.g?blogID=4577829201181305192#">Login</a>
</form>

沒看錯，沒看錯，可以搭配 PHP 哦。看來完全改成 XAJAX 的模式是可行的，就讓其它的高手就這件事情囉。

就像一開始所說的一樣，核心是用 JS 寫的，而 iphone 的頁面常常會回上一頁下一頁的(嗯!~好難解釋，請翻一下自己手邊的 iPhone 囉)因此 toolbar 的回上一層其實是回上一頁，且他會讀取上一頁的 title 當作標籤內容，此外，本頁的 toolbar 文字也是在 title 做設定。至於蒐尋按鈕可以用 PHP 寫成其它的功能。

實做系統遇到的需求: Textarea 不能使用和呈現



請按照以下步驟修改

1. 動態增加 Textarea 的 row 數列，參考

<script type="text/javascript" src="http://www.felgall.com/inc/jstip45.js"></script>

建議把 JS 程式複製貼上到自己的網頁空間哦!!

2. 調整 Textarea 的 CSS 樣式

.row > textarea {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
margin: 0;
border: none;
padding: 5px 10px 5px 10px;
background: none;
font-size: 16px;
}

這段請放置於 iui/iui.css 裡面，就可以正確得呈現囉。

3. 最後，不要忘記 HTML 的設定

<textarea onclick="sz(this);" onkeyup="sz(this);" cols="30" rows="2"></textarea>

onclick 自動更新，以及 onkeyup 輸入完畢更新

希望下一次就是介紹 iPhone 程式設計的技巧，哈~期許

延伸閱讀

[1.] iUI 0.13 - An Overview (亦可參考 samples 資料夾的資料)
[2.] Dynamic Text Box Areas