jQTouch
 |
由 Griffith Chen 於 9月 1, 2010 - 13:55 發表
|
|
|
jQTouch 是一個基於 jQuery 的 JavaScript Framework，使用在手機裝置的 webkit 瀏覽器開發。iPhone、Nexus One、以及 Palm Pre 都可以使用 jQTouch 來開發手機應用軟體。jQTouch 提供讓開發者選擇自己的 css 主題，與加入插件 (extensions)。jQuery 是一個快速又簡淨的 JavaScript Framework，能過簡化開發者在 HTML 文件裡面尋找 DOM 物件、處理事件 (events)、製作動畫、和處理 Ajax 互動的過程。jQTouch 與 jQuery 的組合，甚至可以讓沒 jQuery 經驗的開發者容易的製作手機裝置上的手機應用軟體。
以下是一個程式首頁(Home)裡的 HTML：
<html>
<head>
<title>To-Do</title>
<link type=”text/css” rel=”stylesheet” media=”screen” href=”jqtouch/jqtouch.css”>
<link type=”text/css” rel=”stylesheet” media=”screen” href=”themes/jqt/theme.css”>
<script type=”text/javascript” src=”jqtouch/jquery.js”></script>
<script type=”text/javascript” src=”jqtouch/jqtouch.js”></script>
<script type=”text/javascript”>
var jQT = $.jQTouch({
icon: ‘todo.png’,
statusBar: ‘black’
});
</script>
</head>
<body>
<div id=”home”>
<div class=”toolbar”>
<h1>To-do</h1>
</div>
<ul class=”edgetoedge”>
<li class=”arrow”><a href=”#about”>About To-Do</a></li>
</ul>
</div>
<div id=”about”>
<div class=”toolbar”>
<h1>About To-Do</h1>
<a class=”back” href=”#”>Back</a>
</div>
</div>
</body>
</html>
程式首頁的 HTML 很簡單，它的 body 只有兩個 div。jQuery 和 jQTouch 是在 HTML head 加上去的：
• jqtouch.css 是一個必要的檔案，在裡面定義了手機裝置的架構設計規則，也同時包含了動畫處理，還有手機方向模式的處理。
• theme.css 是 jQTouch 提供的 css 主題之一。
• jquery.js 是 jQuery Framework 主要的檔案。jQTouch 是基於在 jQuery，所以它的 Framework 同時也包含了 jQuery 的檔案。
• jqtouch.js 是 jQTouch Framework 主要的檔案。
• 參數 jQT 是 jQTouch 的 initialized object。在首頁的例子裡，兩個屬性被定義：icon 以及 statusBar。
除了這兩個屬性以外，jQTouch 還有提供更多的屬性讓使用者可以指定和客製化他們程式的行為 (behavior) 和顯示 (appereance)。在例子裡，icon 指定了程式的 Web Clip 圖，statusBar 指定了程式在全螢幕模式裡，螢幕上顯示的 status bar顏色。
jQTouch 是一個很方便和豐富的 framework，可以讓開發者很快的加在程式裡 native-looking 的動畫和感覺。就像 Dave Methvin 說的: “你用10行的 jQuery 完成以往要 20 行左右枯燥的 DOM JavaScript。在寫完那 20 行的時間你已經用兩三行的 jQuery 完成要完成的工作。這不可能在更快，除非程式能有讀心術。” jQTouch 的設計概念也是完全的遵守了這概念。
列印此頁