说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

JQuery Mobile 页面结构

HTML文档下载 WORD文档下载 PDF文档下载
Jquery Mobile中的"页面"结构已经优化为支持单个的页面,或者在一个页面内嵌入的多个“page”。使用这种模型的目的是使WEB开发人员使用最佳实践创建WEB网站,使得普通的链接不需要任何特殊配置就可以工作,而且能创造出富媒体的像本地应用一样通过标准的http无法创造出的用户体验。

 

Jquery Mobile支持包含历史回退按钮的自动ajax读取外部页面的功能,一组页面转场动画,以及将页面显示为对话框的简易工具。

 

页面结构 Anatomy of a Page

 

Jquery Mobile中的"页面"结构已经优化为支持单个的页面,或者在一个页面内嵌入的多个“page”。

使用这种模型的目的是使WEB开发人员使用最佳实践创建WEB网站,使得普通的链接不需要任何特殊配置就可以工作,而且能创造出富媒体的像本地应用一样通过标准的http无法创造出的用户体验。

移动网站页面结构Mobile page structure

 

Jquery Mobile网站必须使用HTML5文档声明开始,使得网站能够适用HTML5的特性(不支持HTML5的旧浏览器会安全地静默忽略HTML5的文档声明和一些自定义属性)。 在head标签内需要引用Jquery,Jquery Mobile和mobile的主题CSS文件,我们推荐链接到  jQuery 的CDN上 :

HTML 代码:

<!DOCTYPE html> 

<html> 

<head> 

 <title>Page Title</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://code.Jquery.com/mobile/1.0a3/Jquery.mobile-1.0a3.min.css" />

<script type="text/javascript" src="http://code.Jquery.com/Jquery-1.5.min.js"></script>

<script type="text/javascript" src="http://code.Jquery.com/mobile/1.0a3/Jquery.mobile-1.0a3.min.js"></script>

</head> 

<body>

...

</body>

</html>

 

Viewport的meta标签

 

注意在内容之前在HEAD标签内有一个viewport的meta标签设定了浏览器怎样展示页 面的缩放等级和范围。如果没有设置的话,许多移动设备的浏览器会使用一个“虚 拟的”页面宽度,大约是900PX宽,使得桌面的网站工作的也很好,但是这样屏幕看 起来是缩小的而且太宽了。通过设置viewport属性为content="width=device- width, initial-scale=1,会使宽度会被设定为设备的屏幕宽度。

<meta name="viewport" content="width=device-width, initial-scale=1"> 

这个设置没有没有禁用用户缩放页面的权限,使得可访问性非常好。但是在iOS设备 上有一个小问题,就是旋转屏幕的时候,这个viewport的设定没有设置宽度,在将 来的版本我们希望能修正。如果有需求的话,你可以设定viewport 的其他的属性来 禁用缩放。

在body内:pages

 

在<body>标签内,移动网站的每一个视图或者“page”都要通过 data-role="page" 属性的标签来定义。

<div  data-role="page"> 

  ... 

 </div> 

在page容器内,任何有效的html标签都可以使用,但是对于Jquery Mobile的典型页面来说,page容器的直接子结点应该为使用"data-role"标记属性为"header""content"和"footer"的3个容器。

<div data-role="page"> 

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

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

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

</div>

一个完整的独立页面实例: Complete single page template

 

集合在一起后,这就是一个标准的Jquery Mobile页面的样板了。

html 代码:

<!DOCTYPE html> 

<html> 

 <head> 

  <title>Page Title</title>

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" href="http://code.Jquery.com/mobile/1.0a3/Jquery.mobile-1.0a3.min.css" />

<script type="text/javascript" src="http://code.Jquery.com/Jquery-1.4.3.min.js"></script>

<script type="text/javascript" src="http://code.Jquery.com/mobile/1.0a3/Jquery.mobile-1.0a3.min.js"></script>

</head> 

<body>

 <div data-role="page">

  <div data-role="header">

   <h1>Page Title</h1>

   </div><!-- /header -->

   <div data-role="content"> 

   <p>Page content goes here.</p> 

  </div><!-- /content -->

 <div data-role="footer">

  <h4>Page Footer</h4>

 </div><!-- /footer -->

 </div><!-- /page -->

</body>

</html>

 

外部页面的链接 External page linking

 

Jquery Mobile会自动构建AJAX驱动的站点和应用。

默认情况下,当你点击了一个指向外部页面(比如:products.html)的链接,JQmoblie的分析链接地址,然后产生一个ajax请求(Hajax),显示一个读取中的提示框。

如果AJAX请求成功,新页面的内容会添加到DOM中,所有MOBILE组件都会自动初始化,所以新的页面会通过页面转场动画看到。

如果AJAX请求失败,JQmoblie会显示一个小错误提示框(默认的主题为E),然后过一会就消失了,不会影响你继续浏览。

多个页面的模板结构 Multi-page template structure

 

一个独立的html文件可以包含多个“pages”,在加载的时候这些data-role="page" 的div会一起堆栈加载。每一个page区块需要由一个独特的ID(id="foo")标记,通过 给内部链接地址定义为(herf="#foo"),互相跳转。当连接被点击时,JQmoblie会在 文档内寻找带有ID的page容器,然后通过页面转场显示。

这是一个包含 2个“page”的站点的示例,通过每个页面的ID进行连接。注意每个 page容器的ID属性只是用来做内部连接导航的,如果每一个PAGE都是一个独立的 HTML文件的话,那这个ID属性就可有可无了。

<body>

<!-- Start of first page -->

<div data-role="page" id="foo">

   <div data-role="header">

     <h1>Foo</h1>

   </div><!-- /header -->

   <div data-role="content"> 

     <p>I'm first in the source order so I'm shown as the page.</p> 

     <p>View internal page called <a href="#bar">bar</a></p> 

  </div><!-- /content -->

  <div data-role="footer">

    <h4>Page Footer</h4>

  </div><!-- /footer -->

  </div><!-- /page -->

<!-- Start of second page -->

  <div data-role="page" id="bar">

  <div data-role="header">

   <h1>Bar</h1>

 </div><!-- /header -->

  <div data-role="content"> 

   <p>I'm first in the source order so I'm shown as the page.</p> 

   <p><a href="#foo">Back to foo</a></p> 

 </div><!-- /content -->

 <div data-role="footer">

  <h4>Page Footer</h4>

 </div><!-- /footer -->

 </div><!-- /page -->

</body>

请注意:我们对于所有AJAX的"page"使用的是哈希值来跟踪导航历史,所以现在还不可以通过外部页面的一个ID指向那一个锚点,因为Jquery Mobile会寻找带有该ID的"page",而不是滚屏到带有该ID的内容上。

一些约定,不是要求  Conventions, not requirements

 

尽管上述的页面结构是通过jQuery Mobile构建移动网站的标准格式,但是jqm框架 是一个灵活的框架。page, header, content, and footer和data-role元素都是可 选的。 page 容器用来进行页面初始化,但是现在的版本对于单独的page 文档也不 是必须的。对于一个自定义布局的页面,所有的这些结构元素都可以没有,但是基 于AJAX的导航和组件都必须在标准的结构中才能工作。如果页面没有page 容器, jqm会自动插入一个,因为需要这样一个容器来管理页面,但是基本的标记现在可以 写的非常简单了。

注意:在多PAGE的结构中,你在页面必须要有多个page标签的容器。

 

后退链接 Back linking

 

如果你添加了data-rel="back"属性给某个链接,那对于该链接的任何点击行为,都是后退的行为,会无视链接的herf,后退到浏览器历史的上一个地址。 当想链接到一个命名好的页面,或者要关闭对话框时特别有用。使用这一特性时要注意:务必请使用一个有意义的herf值实际地指向要引用的地址(因为这样也会让GRADE-C的浏览器也支持这个按钮)。而且如果你只是要看到一个翻转的页面转场而不是真正的回到上一个历史记录的地址,你就要使用data-direction="reverse"属性,而不是后退链接。

重定向以及链接到目录 Redirects and linking to directories

 

当连接到的是一个目录地址(比如href="typesofcats/"而不是href="typesofcats/index.html"),你必须在地址后面加一个斜杠("/")。因为Jquery Mobile假定最后一个斜杠后的部分为文件名,当接下来引用到的页面生成基地址的会的时候会删除它。

但是,你可以通过已经指定好的data-url地址来返回到上一个page容器,就可以绕过这一个问题。Jquery Mobile 会使用那个data-url值来更新url,来替代过去请求的那个页面 。这样你也允许你通过返回url的更改来作为重定向的结果。例如:你想通过post方式提交表单到 /login.html",但是提交成功以后返回一个url为 "/account 。这个工具就可以让你在这种情况下控制历史记录堆栈。以下是一个实例:

有一个链接是指向  "docs-links-urltest/index.html" ,该链接是指向目录的索引页,返回的页面会使用 "docs/pages/docs-links-urltest/" 更新哈希值,这是通过代码里的 data-url 值完成的。请注意data-url值会替换整个哈希值,由你来把他替换成当刷新或者下层链接时URL发出的请求能解析正确的页面.

更多技术细节请参见导航模型Ajax, hashes and history

微软新Visual Studio Code开发工具支持Mac和Linux 科技新创公司想做大?从CNN记者跳槽Snapchat谈起 Java二十年特别奉献:晒博文、赢大奖! 《近匠》华为创新总监蔡绪鹏:智能手表的三大感知与未解难题 从Samurai-Native框架开发谈React Native Qualcomm公司李申:Vuforia打破AR设备界线 物与物的互通:解析Thread、AllJoyn、OIC、Bonjour的特点 《天龙八部3D》中Unity使用介绍 微软推出ManifoldJS,Web App自动转成各平台本地App 专访庄晓丹:Java程序员眼中的Clojure 全面解析ECMAScript 6模块系统 七牛技术总监陈超:记Spark Summit China 2015 Project Tungsten:让Spark将硬件性能压榨到极限 Android手表在中国这样落地 ART运行时Foreground GC和Background GC切换过程分析 开创未来的关键:是什么造就了硅谷?(上) 微软前员工:开发Apple Watch应用的27个技巧 Apple Watch应用开发:从再造墨迹天气谈起 Java二十年特别策划:有奖征文,评选结果出炉! Zen=禅道:图解AMD技术战略转型 从友盟微社区看Android第三方SDK架构实践 无创客 不青春!2015全国大学生移动应用创新大赛在京启动 响应式Web开发,必懂媒体查询(系统理论+实战教程) 实例剖析:如何用Foundation For Apps创建完美Web应用 【舌尖上的CTO】兄弟肉夹馍的开发运维一体化 开创未来的关键:是什么造就了硅谷?(下) 安全漏洞影响2.5万iOS应用?AFNetworking维护者发布回应 《近匠》专访AbleCloud李海磊:IoT平台求变 腾讯、京东、微软等设计专家齐聚,探讨移动应用体验创新设计 TIOBE 2015年5月编程语言排行榜:微软系语言份额上升 《Hadoop核心技术》作者翟周伟 :我与Hadoop的不解之缘 谁有jbuilder6的license keys或serial number? 請教:vb里dim oRs as ADODB.Recordset與dim oRs as new ADODB.Recordset的區別在哪里? 请大家指点下在深圳哪里可以办个边防证?谢谢 在程序中如何得到一网页中的按钮焦点? 用vc生成曲面要用到那些类? 有關微軟的MCSE認証 请问如何用DELPHI实现拨号连接服务器? 有关界面的问题 如何实现Windows 2000 Server 远程拨号登录?请奉上你的经验和智慧!!! 莱鸟级的问题,你敢来挑战吗? TADODataSet 读磁盘文件是怎么用的? 我的毕业设计,一百分的送分题啊!!!!!!!!!!!!!!!!!1 请教这个函数的作用 //创建列的问题,谁帮我看一看缺什么,谢了 如何在本地访问远程数据库,用什么样的方法在速度、安全上都好一些 请大家指点下在深圳哪里可以办个边防证?谢谢 各位大侠,谁能介绍一下utf8,还有怎么把它转到gb2132编码呢? 我的毕业设计,一百分的送分题啊!!!!!!!!!!!!!!!!!1 窗体问题。。。 现有一个小项目: 怎样动态增加表格? 有人解决了jive的中文问题吗?? 报表就是查询结果吗?用VB很难做吗?为什么这么多人讨论,请问设计报表难点是什么? 请问我的VC地ClassView无法打开,有什么快速的方法可以打开 一个关于tomcat中servlet的棘手问题..... 谁可以帮我提供一个PHP的站内目录管理程序! 请问c++中,函数重载和虚函数有什么区别,在实现多态性方面有差别吗? 现有一个小项目: 如何对多个按钮的BN_ClICK进行映射 SQLserver备份与恢复 Delphi中怎样声明一个类?怎样实现多态?如果要在类库的一个类中添加一个方法又怎么做? 然后怎样封装它?是不是封装以后维护就非常简单? 可 计算机网络--〉清华大学出版社,作者:Andrew S Tanenbaum哪里有电子版下载 把播放F4的时间上《我们程序员都是活雷锋》 随便问问:VC能不能调用Access中的Form,Report 用ADO在线程中打不开数据库,请帮忙 如何在VB中动态的加载Dll,并使用其加载的函数??? 高手们看过来 Oracle初学,兄弟们多帮忙了! 怎么打开一个.txt文件,然后一行一行读取? 请问大家知道一个局域网里的IP在因特网上如何表示的呢。 请问各位,如何在我的程序中用代码生成Access数据库? 神啊,救救我吧,我想要含笑半步喋=== 请教NT4。0下的IE2。0怎样升级到IE6。0或IE5。0? 我要在程序中重载CBitmap类的一个函数,请问如何做 为什么我在bcb的new中找不到multitier(就是多层)选项页 请问如何知道数据库中有哪些表存在?在线等待 向各位大侠求救中 这是数据库的缺点吗? Choice.asp?VehicleType=a+&VehicleColor=Red + 传不到Choice.asp 如何获取文件扩展名关联信息 急!应选择什么样的服务器? 化学分辨稀硫酸,氯化钠溶液,氢氧化钠溶液.只用酚酞指示剂和适当的仪器设计一个简单的实验,将三种溶液区别出来,写出相关实验现象和结论.除此之外,你还能想出哪些鉴别方法. 氧气和烧碱溶液会反应吗?氯化钠和水会反应吗? 宝宝淘气,水银体温计测体温时间太长,有没是方便使用的? 我国根本政治制度和我国基本政治制度是什么 中国的基本政治制度、根本政治制度是什么?详细说明他们的含义、意义等~ 氢氧化钠碳酸钠和氢氧化钡三种无色溶液,用一种试剂把它们鉴别出来,并写出来反应的化学方程式和离子方程 中国的政治制度 我国基本政治制度是什么?我国基本制度是什么? 体温计里是水银吧.万一破了企不是很危险.有没有是煤油的体温计呀 不懂是什么 意思啊 3号线 可以直接到上海的虹口足球场吗或者 从火车站出去后 什么可以直接坐到虹口足球场 紧急的 已知某固体粉末是由NaCL,Ba(N03)2,CuSO4,Na2SO4,Na2CO3中的一种或几种组成,取这种粉末加足量的水,振荡后呈浑浊,再加稀盐酸,沉淀不溶解,过滤后得无色溶液,取滤液并滴加AgNO3溶液,产生白色沉淀色沉 氯化铜与氢氧化钡的离子方程式 氯化钙与碳酸钠的离子反应方程式 钠与水的离子反应方程式 有铜与硝酸的离子 篮球的一号位,二号位,三号位…等是啥意思 中华人民共和国基本的政治制度是什么? 碳酸钠与氯化钙的离子方程式 cf里面的 一号位 二号位 三号位 不是 是在沙漠灰中 一号位是主道机枪 其他的不知道了. 已知某固体粉末是由NAC1、BA(NO3)2、CUSO4、NA2SO4、NA2CO3中已知某固体粉末是由NaC1、Ba( N03)2、CuSO4、Na2SO4、Na2C03中的一种或几种组成,取这种粉末加足量的水,振荡后变浑浊,再加稀盐酸,沉淀不溶解, 硫酸 碳酸钠 氢氧化钡 氯化钙 四种溶液中,其中1种与其他3种溶液都能反应.则该溶液是______?写出该溶液与其他3种溶液反应的化学方程式 1、2、3号是什么意思GAY 里1、2、3、号是什么意思? 我国基本政治制度有哪些? 安全标志的分类及其安全色的含义?如题 怎样分离金刚石与石墨或碳混合物?得到纯净金刚石!金刚石的熔点是3550℃,石墨的熔点是3652℃~3697℃(升华)。石墨熔点高于金刚石。加热是没有办法得到金刚石的,我说的是人造金刚石,能 氢氧化钠溶液易变质的原因是什么? 主链上有四个碳原子的某种烷烃有两种同分异构体,含有相同碳原子数目且主链上也有4个碳原子的单烯烃的同分异构体有几种?将同分异构体画出, 美国政治制度为何会如此持久 这对我们中国有什么启示? 新中国政治制度的突出特点概括地说 我们公司是生产一次性使用手术电极的,刀头部分是用304不锈钢做的,药监局要求做生物相容性评价,是不是要找专门的检测机构进行测试!希望懂的高手可以给个回答 美国与日本政治制度异同,中国与美日政治制度的不同及根本原因能不能简明扼要, 中国早期政治制度有何突出特点 一次性PE手套生物相容性报告,生物相容性测试哪些项目?一次PE手套生物相容性测试周期多长呢? 什么是人类的1号病、2号病、3号病啊? 唐朝政治制度的突出特点 铜的生物相容性 为什么说中国的政治制度要比美国的政治制度先进? 美国政治制度最突出的特点是什么?是”最突出的”特点是什么? 什么是安全色?安全色的含义和用途有哪些? 太空3号治什么病? 如何鉴别硫酸 碳酸钠 氢氧化钠 如何认识欧洲中世纪的等级制度 什么是疾病险?疾病险的定义是什么?如何定义疾病险?疾病险的具体含义是什么? 新中国成立之初,是如何从制度上保证人民把政权掌握在自己手里的?概括新中国政治制度的突出特点求大神帮 生物相容性测试那里测试请教一下要做生物相容性测试可以在哪里做啊? 美国、中国两国的政治制度 反应2NaOH+CO2=Na2CO3+H2O的离子方程式是什么? 如何评价欧洲森严的等级制度 吾病甚中“甚”是什么意思? Na2CO3和CO2少量足量反应离子方程式 什么涂层材料具有生物相容性?什么涂层材料具有生物相容性 往往不病则已、是什么意思? 2012年12月28日,武汉地铁2号线正式通车.已知相距4000 m的甲乙两站之间的线路为直线,在调试运行时,列车出站加速和进站减速的加速度大小均为1 m/s2,中途保持匀速运行.列车从甲站由静止出发到 北京西站的高铁和北京西站的火车是同一地方乘坐吗,听说有高铁了想乘高铁回广州. 烷烃的同分异构体的种数与碳原子个数有没有规律(有什么规律)? 求助…两支水银体温计先后测体温…一支36.9度,一支37.0度!低的那支用时用力甩才能甩到35度以下,高的那支很容易甩就甩到35度以下,请问我该相信哪支? 武广高铁是武汉到广州的时间比原来快速列车缩短了8小时,武汉到广州为1068.6km,客运列车的速度是特快列车的3倍,那么客运的速度为多少 在氧气、铝、二氧化锰、硫酸、过氧化氢、氢氧化钠、氢氧化钡、氯化钠、硫酸铜中,选出恰当的物质,……在氧气、铝、二氧化锰、硫酸、过氧化氢、氢氧化钠、氢氧化钡、氯化钠、硫酸铜 水银体温计打烂后应该怎么消毒?水银溅到了很多地方,应该怎么处理? 欧洲中世纪时占统治地位的思想与制度是什么 我国的政治制度是什么?根本政治制度. 什么与氢氧化钠反应生成氯化钠和难容物,难容物与氧气和水反应生成另一种难容物 水银体温计打烂了打烂了,用纸巾清理地下,手或许会接触到些,但是立刻洗手了,还有就是一些进到地板的缝隙里了,听人说蒸发 会有毒?是这样么,请教教怎么处理,或者这根本没什么事?
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘