脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JQuery Mobile页面的载入方式，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

1.jqM页面结构

 

jQuery mobile是通过data-role属性来区分渲染界面样式的,JQM里面提供的data-role如下表:

参数
 说明
 
page
 页面容器，其内部的mobile元素将会继承这个容器上所设置的属性
 
header
 页面标题容器，这个容器内部可以包含文字、返回按钮、功能按钮等元素
 
footer
 页面页脚容器，这个容器内部也可以包含文字、返回按钮、功能按钮等元素
 
content
 页面内容容器，这是一个很宽容的容器，内部可以包含标准的htML元素和jQueryMobile元素
 
controlgroup
 将几个元素设置成一组，一般是几个相同的元素类型
 
fieldcontain
 区域包裹容器，用增加边距和分割线的方式将容器内的元素和容器外的元素明显分隔
 
navbar
 功能导航容器，通俗的讲就是工具条
 
listview
 列表展示容器，类似手机中联系人列表的展示方式
 
list-pider
 列表展示容器的表头，用来展示一组列表的标题，内部不可包含链接
 
button
 按钮，将链接和普通按钮的样式设置成为jQueryMobile的风格
 
none
 阻止框架对元素进行渲染，使元素以html原生的状态显示，主要用于form元素
 

jQuery Mobile应用了HTML5标准的特性，在结构化的页面中完整的页面结构分为header、content、footer这三个主要区域。

在body中插入内容块：

<p data-role="page">

<p data-role="header">...</p>

<p data-role="content">...</p>

<p data-role="footer">...</p>

</p>

data-role="page”代表这个p是一个Page，在一个屏幕中只会显示一个page；

header是标题，content是内容块，footer是页脚.

 

2.JQM的ajax加载方式

jQuery Mobile为了减少页面加载的数据量,实现了页面的ajax加载模式.当使用ajax方式(链接标签上加上data-ajax="true")加载页面时,只在第一个页面加载html的全部内容,包括html的head里面引用的样式脚本文件,后面载入的页面只加载data-role="page"的p容器的内容,所以非第一次加载的页面里面的脚本(javascript)必须写在data-role="page"的p容器里面.

 

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JQuery Mobile页面的载入方式全部内容，希望文章能够帮你解决javascript代码实例教程-JQuery Mobile页面的载入方式所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。