jQTouch
 |
由 Griffith Chen 于 九月 1, 2010 - 14:15 提交。
|
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 的设计概念也是完全的遵守了这概念。
Print This Page