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

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

走近英特尔软件技术王牌之师:系统技术和优化部门 新兴技术袭来,Web开发如何抉择? 新创社交平台Tsu 5周註冊用户破百万秘訣 Google Play:助力中国开发者的海外梦想 JPHP——一款基于JVM的新PHP编译器 舌尖上的CTO——小杨生煎的持续交付 《近匠》滴答清单,跨平台云同步的任务管理工具 DJI与优酷土豆战略合作:提升UGC价值,先内容再营销 Android性能优化典范(二) 从三大运营商联手 看电视游戏背后的现状 【工具推荐】Vert.x——非阻塞、高并发的编程开发框架 Google搜索在确定结果排名时会将网站的移动设备适用性作为考量因素 W3C首次发布SVG标记、SVG轮廓标准工作草案 第七届中国云计算大会 | 首批主会演讲嘉宾和议题公布(表) 安沃传媒创始人王旭东:开发者从移动广告获利的黄金时代已经来临 【舌尖上的CTO】砂锅馄饨的交付件 微软新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切换过程分析 各位帮忙啊!怎么用程序生成access数据库! Word转换PDF文档时,图像失真问题如何解决 请问一下是不是中毒了,如何处理?...(很急的问题,在线守候) 怎样动态更新数据控件?快快求解?进者有分 如何合并磁盘上的两个Word文件为一个文件? 请问显卡的总线接口共有哪几种??比如PCI,ISA等等!!!!!!! 急!为什么数据已经删除了还看的到???在线等! 用template作c数组的问题,请各位进来帮帮忙,看一看! 如何在Notes的Web开发中,让嵌入视图列表有两种颜色隔行现实? 关于radio的问题,局简单 ping 不通网关! 小问题 这个打开数据库语句有何错误?老是说:'Open' : function does not take 4 parameters java执行操作系统命令的问题:如何判断多个操作系统? 硬盘逻辑出错!怎么办? 求购 侯捷翻译的《C++ Primer》 为论坛整齐起见,建议增加“转让分数”功能 再线求救:关于vector 小弟有事请教,关于用mysql同java构件安全的c/s应用的问题,高人请指点?分不是问题,不够再加 读取文件夹内容?来者有分! 关于reportbuilder换行的问题,很简单,来者有分!! 源程序错在那里了?把一个文件分成块,模拟文件在网上传输Stream! 获得硬盘的物理序列号 如何在一个页面里面既完成添加,又完成删除的操作,类似于收邮件的收件箱 JRE 1.4下,如何更改Applet安全性让IE可以支持一个无签名,且有特殊操作的Applet 各位老大,VB用什么方式调用SQL Server最好???(本人给分结贴最积极) 在SQL Server 中SQL语句连接与嵌套的效率的比较 谁知到在windos xp下是否可以用vc++6。0? 如何清理‘用户配置文件’?? 女友在深圳,身在广州,想要到深圳去工作,但又不知那边怎么样? vc6中有跳入成员函数实现的快捷键吗? 关于struts 的问题。 求助:"异或指针双向链表",偶怎么也弄不明白!:( rtf文件格式的问题 Sumtec、Latitude、Montaque 班主 帮我!!! 拨号上网什么卡最实惠? 关于delegate委托的问题 请问高手,如何用linux操作系统里的标准c函数获取bios时间,高分!!!! 求教!怎么实现这个设计!!!分不够还能加! VB 谁能提供NetRay 这个软件,我搜了半天没找到。 关于VCL高级应用的问题!! 哪位大侠可以手把手教我设置cygwin~~~ 有关Access的一个小问题! 一个非常非常非常非常简单的问题! 请求帮忙... 如何在父类的成员函数中用子类的成员??? 济南的哥们进来。统计一下。 请问哪个网站提供Sybase PowerDesigner 的下载??? 我是新手,我没分了,我怎么办? 怯怯地问:“八女王”和“六匹马”是有关什么的算法呀? 菜鸟问题!给分! 请问用vfw能检测并使用专业摄像机吗?通过图像卡,如大恒的摄像机 内蒙古呼和浩特市的海拔多高 已知P为正△ABC内一点,∠APB=110°,∠APC=125°求证:以AP,BP,CP为边可以构成一个三角形,并确定所构成的三角形的各内角的度数 以《————的滋味》为题作文 春节期间家人们都团聚在一起,用英语怎么说 如图,现在想找一点P,使得△APB,△BPC,△APC均为等腰三角形已知等边三角形ABC,如图,现在想找一点P,使得△APB,△BPC,△APC均为等腰三角形,试问,这样的点P是否存在?如果存在,共有几个? 我收获了劳动的果实 作文 全家人在一起吃年夜饭,怎么翻译 2014年6月四级成绩什么时候出来 求一篇关于工作收获的文章 三年级同学乘水车到某地旅游买车票99张共花28元其中单程票每张2角往返票4角那么单程票和往返票相差()张 2014年6月的四级成绩什么时候能出来 在作文中劳动成果是好词吗? 六年级同学乘车到某地旅游,买车票99张,共花28元,其中单程票每张2角,往返票4角,那么单程票和往返票相差多少张? 某单位组织员工到外地去游玩.买车票99张,共用去5600元,其中,单程票每张40元,往返票翻倍,因为有几个人不和大家同返回,所以买的单程票.求单程票买了多少张? 除夕英文怎么拼 六(1)班同学外出春游,买车票58张,共花160元,其中单程每张2元,往返每张4元,单程票与往返票相差( )算式 我要一篇以“ 的滋味”为题的作文 祝福大家除夕快乐.观看热闹春节晚会.英文怎么说 塑料大棚骨架如何搭建?宽度骨架之间的距离,棚的高度, 求一篇以“味道”为题的作文 There are no d____ between the twins.. 塑料大棚建造6米高 6000平方 大概造价是多少 His hobby is ____(collect) stamps请问动名词 不定式做表语有什么区别呢? 用所给词的适当形式填空:There is no _ between the twins.But they are in_ (different) classes. 没有信号灯的十字路口应该东西走向让南北走向的还是南北让东西走向的? His job is _____.A.teach English B.teaches English C.to teaching English D.teaching English look 养猪厂是南北走向好还是东西走向好 His hobby is (收集)tamps中间添什么?为什么?麻烦说下,困扰我好久了我们的老师是说加to,不也不知道为什么,不是collecting,回答问题时我答过了,不对的 西藏铁路经过的海拔有多高 有关点面结合的作文(校运会) 英语选择小问题:A.his job is B.is his job C.was his job D.his job wasShe wanted to know what ________.A.his job is B.is his job C.was his job D.his job was 100澳元相当于多少美元 如图,△ABC中AB=AC,AD⊥BC,垂足为D,P为,△ABD内任意一点.试说明∠APB>∠APC如图,△ABC中AB=AC,AD⊥BC,垂足为D,P为,△ABD内任意一点.试说明∠APB>∠APC 英语口语话题话题是:以“Is dating on campus compatible with school work?Why or why not?”为话题讨论,角色两人!5分钟左右就好.你这似乎是在答非所问哎! have a look at 可不可以加 地点 在△ABC中,AB=AC,AD垂直BC于点D,点P在△ABC内,求证∠APB大于∠APC 离我们最近的宇宙有多远? look on 和look at有一个改错题:原题是 I'll look at the computer.正确答案是把at 改为on.也就是 I'll look on the computer.我很费解啊. 六年级同学乘汽车到某地旅游,买车票99张,共花28元,其中单程票每张2角,往返票4角,那么单程票和往返票 天离宇宙有多远? 知道大写字母A的ASCII值,如何求字母C的值? 填空:这些蓝色的运动包售价30元.These blue sports bags are ( ) ( )for 30$. 为什么今日的云飘的很快 ___others play football is my hobby. A. Watch.___others play football is my hobby. A. Watch. B. Watches. C. To watching D. Watching 在荔枝开花的季节,低温阴雨的天气导致荔枝花不能完成正常的受精作用,这时可用一定浓度的生长素类似物喷洒于花上,其目的是促进荔枝的A.基因突变B.染色体加倍C.果实发育D.种子发育 会计云最近很热门,懂的来... 求作文《从生活中我学到了》 let mw have a look at it的中文 如图,在△ABC中,AB=AC,P是△ABC内一点,且∠APB>∠APC,试着说明PB<PC. NWSMYTLA.NMHYGXM 这些字母都是 每个汉字的大写字母.谁能帮我破解里面的意思 内蒙古海拔高度大约是多少 wyncwwdwypsm每个字母都是一个字,连在一起一句话,怎么解释汉语拼音 大写字母不认识谁可以把大写字母后面标上汉字? Let us have a look,()()?反意疑问句 tdsbnr 一个拼音代表一个字,每个拼音是这个字的第一个字母,还能组成一句话 look _at中间加什么词 内蒙古海拔高度是多少内蒙古应该属于高与地区,各城市海拔肯定不一样,哪位大侠帮忙提示一下!谢谢 RYJHWXWXYCNHYYPZWSBWAN 这是一句话,每个字母代表一个字的首字母, look后面能跟什么,例如:look at
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘