Web 2.0 Touch 文档说明

红太狼 2022-01-06 12:55 190阅读 0赞

[Web 2.0 Touch 文档说明][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" />

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', { width: 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', \{ width: 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 类库及样式, 更多的信息请查看示例文档.

posted on 2012-09-21 15:14 [叶子绿][Link 1] 阅读( ...) 评论( ...) [编辑][Link 2] 收藏

转载于:https://www.cnblogs.com/ms\_config/archive/2012/09/21/2696929.html

[Web 2.0 Touch]: https://www.cnblogs.com/ms_config/archive/2012/09/21/2696929.html
[Link 1]: https://www.cnblogs.com/ms_config/
[Link 2]: https://i.cnblogs.com/EditPosts.aspx?postid=2696929