jqm入门页面及对话框

1.JQM工作原理:

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

注意js引入的顺序,先要引入jq库,在引入mobile库;

data-role”:page;角色(相当于一个容器)----一个页面可以有多个容器,当成多个页面,页面切换的方式通过a标签,加href

 

头部区域

内容区域

底部区域

页面跳转的方式:

Slide:从右向左滑动的效果

Pop:弹出效果打开页面

Slideup:向上滑动的动画效果

Slidedown:向下滑动的动画效果

Fade:渐变褪色的效果

Flip:旧页飞出,新页飞入的效果

 

2.内部链接与外部链接

内部:#加对应id的方式

外部:加rel=external”的方式

 

采用外链接的好处:

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

 

3.后退的按钮

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

或者

a标签中加data-relback的方式,直接退回至浏览器历史的上一页

 

4.预加载和页面缓存

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

 

预加载:(当当前页面加载完成之后,目标页面也被自动加载到当前文档中)

a标签中添加data-prefetchtrue,表示预加载a元素的链接页面;

 

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

页面缓存:

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

a标签加data-com-cachetrue的方式,表示将页面的内容注入到文档缓存中

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

创建页面:

Pagebeforecreate:正在创建页面

Pagecreate:页面创建完成

跳转页面:

 

加载页面:

 

5.对话框(a标签中,可以添加对话框打开的方式) 

设置data-reldialog

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

按钮:设置data-relbutton

转载于:https://www.cnblogs.com/mumianhua1003/p/4687718.html

你可能感兴趣的:(jqm入门页面及对话框)