第一步
当你用框架开始新项目时，第一步是删除掉 pages 目录下的所有文件，并修改 index.js。以下是最简单的示例。
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title>Web 2.0 Touch</title>
5: <meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=no; width=device-width;" />
6: <meta name="apple-mobile-web-app-capable" content="yes" />
7: <meta name="apple-mobile-web-app-status-bar-style" content="black" />
8:
9: <link rel="apple-touch-startup-image" href="images/iphone_startup.png" />
10: <link rel="apple-touch-icon" href="images/iphone_icon.png" />
11: <link id="coreCSS" type="text/css" rel="stylesheet" media="screen" href="css/core.css">
12: <link id="mainCSS" type="text/css" rel="stylesheet" media="screen" href="css/ipad-dark.css">
13:
14: <script type="text/javascript" src="includes/jquery.js"></script>
15: <script type="text/javascript" src="includes/jsTouch.js"></script>
16: <script type="text/javascript" src="includes/iscroll.js"></script>
17: <script type="text/javascript">
18: var myTouch;
19: $(document).ready(function () {
20: myTouch = jsTouch.init('myTouch', { 320, page: 'pages/home.php' } );
21: jsTouch.resize();
22: });
23: // prevent default scroll
24: document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
25: </script>
26: </head>
27: <body style="background-image: url(images/iphone_startup.png);">
28: <div id="myTouch" class="jsTouchPanel" style="position: absolute; left: 0px; top: 0px; border-left: 0px !important;">
29: </div>
30: </body>
31: </html>
重点说明如下
- 包含 css/core.css 核心样式。
- 包含不同的主题皮肤 (1)css/apple.css (2)css/ipad-light.css (3)css/ipad-dark.css
- 确保你包含了 jquery.js, jsTouch.js 和 iscroll.js 类库。
- 初始化 jsTouch -- myTouch = jsTouch.init('myTouch', { 320, page: 'pages/home.php' } ); 这会创建一个320px 宽度的容器, 并加载第一个页面 pages/home.php 到主要控制器内.确保这是个body元素内的 div 元素并且 id 是myTouch.
第二步
创建你需要的页面.承上例, 假设你已经拥有了 pages/home.php 页面, 这个页面将被加载并初始化.这个页面通过 $.post() 动态加载并被插入到视图里面.这个页面也可以是任何HTML标记.虽然这样, 但能利用主题皮肤的优势就更好了.例如:
1: <div class="toolbar">
2: <h1>Web 2.0 Touch</h1>
3: </div>
4: <div class="content">
5: <div>
6: <div style="padding: 5px 15px">
7: Welcome to Web 2.0 Touch - a Concise Mini JavaScript frame work for touch devices (iPhone, iPad, Android).
8: </div>
9: <ul class="rounded">
10: <li>
11: <a onclick="jsTouch.loadPage('pages/page1.php', { transition: 'slide-left' });">Page 1 <span class="arrow"></span></a>
12: </li>
13: <li>
14: <a onclick="jsTouch.loadPage('pages/page2.php', { transition: 'slide-left' });">Page 2 <span class="arrow"></span></a>
15: </li>
16: </ul>
17: </div>
18: </div>
重点说明如下
- 这里有二个主要的 div 元素, 上面的样式类是 toolbar 底下的样式类是 content (你也可以设第三个div并设置样式类为 footer ). 这是非常重要的, 因为只有这样, 才可以将合适的样式摓应用到这些元素上.
- 中间的那个 class=content div是空的div---不要移除它, 这个是iScroll 所需要的.
- 注意新页面是怎样通过 jsTouch.loadPage('pages/page1.php', { transition: 'slide-left' }); 加载的, 加载的页面必须存在, 同时你可以利用不同的切换效果比如: slide-left, slide-right, slide-up, slide-down, flip-left, flip-right, flip-up, flip-down, pop-in, pop-out
第三步
学习其它UI控件的用法, 你可以打开 pages 内的文件揣摩, 这些文件都非常小并且能自我解释. 每次页面切换的时候, 上一个页面的内容将会被移除, 这有利于手机处理器的操作, 放多手机处理器都是低效的, 你也许已经注意到了.但这也带来了新的问题, 就是页面些的状态无法保存.
- 注意一些控件可能需要额外引入 js 类库及样式, 更多的信息请查看示例文档.