jqm入门页面及对话框

1.JQM工作原理：

以页面中的元素标记为事件驱动对象，当触摸或者单击时进行触发。

注意js引入的顺序，先要引入jq库，在引入mobile库；

“data-role”：page；角色（相当于一个容器）----一个页面可以有多个容器，当成多个页面，页面切换的方式通过a标签，加href

 

<div data-role="page" >

<div data-role="header">头部区域</div>

<div data-role="content">内容区域</div>

<div data-role="footer">底部区域 </div>

</div>

页面跳转的方式：

Slide：从右向左滑动的效果

Pop：弹出效果打开页面

Slideup：向上滑动的动画效果

Slidedown：向下滑动的动画效果

Fade：渐变褪色的效果

Flip：旧页飞出，新页飞入的效果

 

2.内部链接与外部链接

内部：#加对应id的方式

外部：加rel=“external”的方式

 

采用外链接的好处：

把全部代码写在一个页面中会延缓页面加载的时间，使代码冗余，且不利于功能的分工与维护的安全性；

 

3.后退的按钮

“data-add-back-btn”的属性设置为true

或者

在a标签中加data-rel为back的方式，直接退回至浏览器历史的上一页

 

4.预加载和页面缓存

为了加快页面移动终端的访问速度，在jqm中，使用预加载和页面缓存是十分有效的；

 

预加载：（当当前页面加载完成之后，目标页面也被自动加载到当前文档中）

在a标签中添加data-prefetch为true，表示预加载a元素的链接页面；

 

另一种方式：$.mobile.loadPage() 

页面缓存：

在jqm中，可通过页面缓存的方式将访问过的历史内容放到页面文档的缓存中，当页面重新访问时，不需要加载，只从缓存中读取即可；

在a标签加data-com-cache为true的方式，表示将页面的内容注入到文档缓存中

另一种方式：$.mobile.page.prototype.options.domCache=true

创建页面：

Pagebeforecreate：正在创建页面

Pagecreate：页面创建完成

跳转页面：

 

加载页面：

 

5.对话框（a标签中，可以添加对话框打开的方式） 

设置data-rel为dialog；

关闭对话框：data-rel设置为back

按钮：设置data-rel为button