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

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

欲与谷歌、亚马逊抗衡,苹果推CloudKit拥抱云服务 针对新一代物联网应用 Atmel推全新32位微控制器 实时计算,流数据处理系统简介与简单分析 Cue:秒杀HealthKit,打造自己的家庭医生 新iPhone要来:4.7就够了么?我们还有更大的 Docker迈入云(DockerHub)+端(Docker引擎)时代 《近匠》壹枱智能钢琴:改造音乐行业的新“玩”家 圣何塞Hadoop Summit 2014看点 唯快不破!90后大学生9天完成近670页的Swift语言文档翻译 一周消息树:Java、.NET、Web技术应用特点 苹果生态格局:软硬件之后,iLifestyle才是王道 小米互娱总经理尚进:独立游戏当为发烧而生 哪些编程语言、框架/平台最受企业青睐? 高德LBS应用大赛:百万大奖、千万基金等你来拿! Gartner:有数据有真相 从浪潮看服务器市场走势 PhoneGap 3.5.0发布,不再支持iOS 5和ARM64 “中美青年创客大赛”之“创客&#183;教育论坛” 以创客教育支持创新人才培养 授之以渔,谷歌发布开源秘密武器Kubernetes 炫耀分数已经out!ShareSDK发布游戏内视频录制SDK Android开发者必知的5个开源库 UCloud完成B轮融资5000万美元 Git远程操作详解 《近匠》iMAG:移动应用快速跨平台开发工具 Facebook斥资30亿美元购Snapchat遭拒后,推Slingshot 全球开发者报告:程序媛崛起,企业应用更赚钱! 土豪经济 E人E本发布首款4G安全手机 内忧外患:Android版FuelBand应用来得太迟? MongoDB 2.6.2 发布,大大改进查询功能 清华毕军&amp;amp;华为马云:SDN是学术和产业都看好的领域 向三星和苹果发难:亚马逊FirePhone 3D手机强势来袭 支付宝移动端与NFC芯片商、手机商合作 推出近场支付产品 如何做一个像VC一样的,对话框编辑器,主要是能拖动上面的控件,或者可以改变控件的大小。 为什么在HTML文件中插入一个文件名是中文的图片,不能显示。我用的是TOMCAT4.03 我该如何表示windows 下D盘中的dd目录?(机器共有c,d 两个盘) 关于内存分配的问题! 请问大家 关于用游标自动生成月工资的问题!!!!!!!!!! csdn的贴子怎样保存? 如何将string转化为Tstring呢?另外能给出一些delphi关于类型转换的函数和用法吗? question 关于程序再类里得执行顺序,我很菜,...送分.!!!!! 如何获取网上一个html文档的内容,我是新手. 请熟悉TC的朋友给改一下,我又VC写了一个控制台的程序,想用TC编译,但我不太熟悉TC。 owner draw 的问题 有关GDI+的问题 项目管理 请问如何在VB中调用SQL Server 2000的存储过程?我的存储过程是关于数据库的备份与恢复的。 如何将一个字符串赋值给编辑框所映射的变量,应该用什么命令啊?急! 注册表中的位置——修改启动程序! 哪里有操作系统原理和程序编译原理方面的电子书籍可以下呀?!?! Cool Search Maker 1.0的注册码或注册机谁知道? TCP包 如何传 0 这个...? 请问在一台机(win98)中,如何模仿一个局域网的环境? 我想开发COM组件,但目前为止对它从未接触过,我该看什么书 50分奉送!!谢谢 我装了网上邻居,可是我在网上邻居里找不到自己呢?要安装什么协议吗? 中巴之战----------------中国队的恐怖阵形:911(转贴) qq中察看聊天纪录的窗口中右边那个表格,有没有类似的控件 我做的程序只用了内部控件,打包后必须的文件是身摸?为身摸打包后很大? 真的还是假的?浙江育英学院VS浙江司法职业警校-----愤怒!!!!!!!!!!! 关于SQL的一些问题! 有没有熟悉CAD编程的高手,我们需要合作 关于数据库编程中的CDaoRecordset等几个问题!在线等待! 在这最后的大学时光里,我衷心感谢那些给我帮助的兄弟姐妹们!!! 想找lzw算法的源程序(c/c++) 那位朋友机器上有VS.net中文版的软件呀,如果可以的话,可以用pp共享,给200分 大家帮我看看这个怎么解决,解决了,另开帖送分!急! 请大家帮忙!!! 如何取消vb默认的应用程序忙对话框 请问这段代码哪里有误? 请问各位高手制作MediaPlayer问题,急急!!要交作业。 VB能做绿色软件吗?几十K的! &&&&&&小弟现在初学COM,有谁留下QQ,帮助小弟,小弟感激不尽。 十万火急 我想开发一些牌类和棋类的游戏,有什么外国的网站可以学到,和开放源代码。知道的请帮帮忙(100) 万分感谢 怎样配置运行.exe的CGI程序 请教,如何改变 TreeView的背景颜色? 一个算法问题 誰能介紹廣州几個做掌上電腦開發的牛一點的公司? 如何在客户端的Web Service请求中加入SOAP标头 Fortran中怎样实现类似 全局变量的实现方法。 关于无边框窗口 漂白粉防在空气中失效的原因 CuSO4溶液加热蒸干后为什么能得到原溶质,Cu2+不是弱碱阳离子会水解吗 在油膜法估测分子大小的实验中,总体积要除以油酸被酒精的稀释倍数,那为什么总面积不用除以稀释倍数? 怎么判断一种物质是离子化合物还是共价化合物? 两种不反应的溶液(如硫酸铜和氯化钠)混合低温蒸干后产物是什么?是原来的两种还是变成了四种,分别是硫酸铜,氯化钠,氯化铜,硫酸钠.如果是这四种,那就代表有新的物质生成了,那么发生 为什么一件衣服到底不用a piece of clothes 来表示? 怎样证明蛋白质只能被蛋白酶水解?【要试验过程】蛋白酶本身也是蛋白质 如果用双缩尿试剂检验是否有蛋白质的话 蛋白酶是一个干扰因素 所以不能用双缩尿试剂来检验 为什么醋酸比乙酰胺的相对分子量比醋酸和乙酰氯小,而他们的沸点却高,在线等追加分,,快啊同志们 初一日记感谢,但不是我想要的答案……希望来写哲理的…… 字数120字左右,单单的一篇日记 乙酸乙酯的制备与鉴别写实验报告啊 a piece of paper 的中文意思 初一日记求 如何去除塑料茶杯上的茶垢 a piece of paper 是什么意思 日记,以月亮为承托物,写400字日记,2篇 塑料杯子怎么去掉茶污? 英语翻译 铁、镁在氯化钠溶液中如何反应?为何铁在氯化钠溶液中是变为二价,而镁是变为沉淀?还有,题目中没有说Mg,Fe是否纯.难道就默认是有杂质而形成原电池吗? 盘冰柜毛细管与蒸发器的接头一般在哪个位置?问下师父们 盘冰柜想用原来的毛细管 请问毛细管与蒸发器的接头一般在哪个位置 或者怎么可以找出来也行 呵呵 49克H2SO4和H3PO4的混合物共有氧原子的数目是?以上为问题原题, 请问:a piece of paper和a sheet of paper有区别吗? 冰柜毛细管与蒸发器尺寸的算法重做蒸器188L单温新飞冰柜 如HNO3 H2SO4 H3PO4所含的氧原子数之比是1:2:3,则其质量比为 在一定温度下,某硫酸铜饱和溶液蒸发ag水后,同时析出Wg胆矾.若保持温度不变,剩余溶液的质量分数为A.16w/25a+9w乘以100% B.1600w/25a+25w% C.16w/25(a+w)% D.16w/25a乘以100% 冰箱,冰柜重绕蒸发器如何计算毛细管的管径与长度. 0.2NA 个硫酸分子与15.6g磷酸含有相同的氧原子数怎么看 将100℃的硫酸铜饱和溶液200克蒸发掉50克水后再冷却到0℃时,问能析出胆矾多少克?在100℃的硫酸铜饱和溶液200加入16克无水硫酸铜,问同温度下能析出胆矾多少克?怎么解才好那? 脂肪动员时脂肪酸在血中运输形式是什么A与球蛋白结合 B与VLDL结合 C与HDL结合 D与CM结合 E与清蛋白结合 蛋白酶能被什么水解 t摄氏度时,将某硫酸铜溶液蒸发掉55克水,或向该溶液中加入25克胆矾,都能得到该温度下的硫酸铜饱和溶液,则该温度下的硫酸铜的溶解度( )A.45 B.25 C.29 D.39 20.脂肪血液中主要运输形式是----.( ) A 长链脂肪酸 B中链脂肪酸 C 短链脂肪酸 D乳糜微粒 E 磷脂 蛋白酶能催化什么酶的水解 has a copy of .printed的意思这是原句The library of congress has a copy of every book printed in the united states. 下列物质在空气中变质,该过程中既有氧化还原反应发生,又有非氧化还原反应的是1溴水2绿矾3电石4漂白粉 大豆磷脂粉是什么 copy of 要最正确的.. 脂肪酸以什么方式运输?网上各说各的,我现在也糊涂了 透明塑料杯子,沏茶后杯子变黄如何恢复. A book of mine 和 A book of me我是英语初学者 昨天刚刚学过介词短语 今天遇到了一个句子“我的一本书”,将其翻译成了a book of me ,结果发现这个说法是错误的,正确的是 a book of mine .我不是很理解 脂肪酸在植物中的运输方式 经常用塑料杯子装可乐,杯壁都变黄了,怎样恢复原来的颜色?杯子是那种普通的乐扣乐扣塑料杯~因为很喜欢, 我想问一下,为什么四氧化三铁要保有超顺磁性,用油酸改性是最好的?有相关文献吗?因为油酸比较贵,所以现在想找一种能够替代油酸的物质进行改性 脂肪酸在体内的跨膜运输方式? 急用 谢谢 硫酸铜怎么提纯详细步骤 They have a book each(该为同义句)____of them ____a book 蛋白酶是一种蛋白质,它能水解蛋白质,为什么蛋白酶之间不会相互水解呢? 怎样以水合硫酸铜为原料制取浓硫酸溶液(包括提纯除杂的过程)尽量详细一点,列出每一个反应的化学方程式,写出实验过程中可能出现的危险,出现危险时的解决方法(即实验时的注意事项 They each buy a comic book 改为同意句 ()()()()a comic bookHow do you like your school 同意句()()()()()your school 蛋白酶的成分是蛋白质,那为什么蛋白酶放在一起不会出现蛋白酶把蛋白酶水解了的情况? 1.__I__(get)you a copy of today's newspaper?Thank you.动词填空 they each与each they有何区别 关于蛋白酶的叙述,不正确的是 A.蛋白酶是蛋白质 B.蛋白酶可以作为药物治疗某些疾病 C.蛋白酶可以水解所有的肽键 D.利用酶工程可以提高蛋白酶的稳定性 A newspaper 和 A piece of newspaper有什么区别? They each have a new English book (改为同义句) 观察日记的结尾怎么写? —_____ I ______(get) you a copy of today's newspaper?—Thank you!Do get 怎样鉴别丙酮,丙酸,三戊酮 找两篇观察日记的开头和结尾.只要开头和结尾就行 2.___I___(get)you a piece of today is newspaper? 如何鉴别乙酰乙酸乙酯,丙二酸二乙酯,丙酮,3—戊酮
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘