Web 2.0 Touch 文档说明

当你用框架开始新项目时，第一步是删除掉 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 内的文件揣摩, 这些文件都非常小并且能自我解释. 每次页面切换的时候, 上一个页面的内容将会被移除, 这有利于手机处理器的操作, 放多手机处理器都是低效的, 你也许已经注意到了.但这也带来了新的问题, 就是页面些的状态无法保存.