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

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

Google新论文 CPI&#178;:基于Linux的世界级跨数据中心服务器CPU监控 20款非常实用的Web工具和资源列表 数据库界大事件 随机写性能巨好的TokuDB开源了 CMDN Club 26期:数字渠道营销主题沙龙 暴强:用iOS设备控制的HTML5“小蜜蜂”游戏 Leap Motion:500元体感,精确到0.01毫米 大事件:三大运营商将发布融合计费SDK 再培养一个扎克伯克:六款适合儿童上手编程的App 首届中国软件工程标准高峰论坛:软件开发的新机遇与挑战 Verizon研究显示:中国成为2012年度网络间谍攻击的主要来源 Clang宣布全面支持C++11标准 北大陈钟:SEMAT—中国软件工程发展的新机遇 超华尔街预期:苹果第二财季营收为436亿美元 跨平台游戏引擎Spaceport已被Facebook收购 文科生开发GPU数据库 性能超传统数据库70倍 开发者赚了90亿:从苹果Q2财报,看iOS生态 备受开发者青睐的13款热门开源项目 Netflix赌赢《纸牌屋》背后的秘密武器:大数据分析 为什么:Google Glass只能运行Web应用? 对话Rackspace高级副总裁Jim Curry:我们没有&amp;quot;辜负&amp;quot;营销炒作 7个大数据流言——避免错误的Hadoop和云分析决策 Facebook vs. Google:撇开搜索,数据中心产业上的又一竞技 苹果将于6月10日召开WWDC 新版OS X和iOS或将面世 传Amazon今年秋季发布电视机顶盒设备 够快:不会3种以上语言的程序员不是好程序员 Cloud Foundry、Greenplum获通用电气1亿美元注资 微软推超强Android应用Switch to Windows Phone Unity CEO宣布:放弃支持Flash平台 为交房租做App:我第一年赚了7万美金 iOS越狱大神Comex加盟Google 曾错过苹果Offer 维基百科正式从MySQL迁移到MariaDB数据库 请问怎样修改SDI框架的标题及去掉最大化按钮??? 在自定义的用户控件上公开引用windows控件的事件怎么做啊!!谢谢 2003中为什么IDE设备只能用PIO模式? 在FAQ里见到这样一句,不明白什么意思 怎么我用vc 的 odbc 做数据库时,工程名为try ,在工程工作区的“class view”面板里没有tryview类的? 不能使用xmldocfile() 文档对象的问题 关于键盘纪录,高手 如何使用IPAddress控件? 初学者问:怎么用UpdateAllViews()? 无法创建asp.net应用程序 大家帮帮我吧,我都快崩溃了 中文乱码的问题 !!谁在VMWare 3.2里装过RedHat 9.0和RedFlag 3.0,请看看这些问题(100分)!! 如何使在输入框选中的文字在提交后仍然显示在输入框中? 无法创建asp.net应用程序 高手在上,请问怎么样在win2k中实现关闭程序和绘图[内详] 初学者问:如何在listview中查找其中一行? 怎样在调试窗口中看到变量值? 郁闷中,狂散分。。。。。。 DCOM怎么使用? 想做一个地区门户一般要包含那些栏目?? 线程 怎么能让DELPHI编出来的程序最小化以后进入到系统托盘? C++问题,请进来帮忙! help me ~!!! 以下行为究竟是关闭端口还是使用端口 callzjy(【剑客西门吹雪原来是仁者帮帮主...】) 怎么翻了这么多老帖子出来了??? 求原代码下载 大家都在干什么? 有什么东东大家可以一起研究研究? 初学者问:如何在listview中查找其中一行? fortran语言的高手请进,分数不够再加 我是一个刚刚步入JAVA世界的小鸟 恳请得到大家的帮助 。。 ActiveForm发布问题。 怎么能让DELPHI编出的程序像QQ一样可以自动隐藏? 一个关于dll的例子,运行不了,请帮忙看一下。 程序打包 BCB产生调试符号的问题 为什么要4张1寸的,1张2寸的照片?要这么多干什么/ 请问怎么样用C#遍厉注册表? 请问大家如何做一个实时的屏幕抓取的程序啊,是实时 各位大哥大姐帮帮小弟,先谢谢了!!! 用Delphi开发的WebService能否在NT4的IIS上面运行? 键盘纪录问题 一个窗体有多个按钮,怎样让一个按钮成为默认按钮? 关于MYSQL_CONNECT(),有点疑问 ASP.net好像也不能替代JavaScript吧? 网络游戏外挂之我所见(7) 键盘纪录问题 键盘记录问题 我为谁哭泣.. 程序求和要求:将table表中的数字字段ton所有查询值进行求和.这段VB代码怎么写啊?select sum(ton) from table where 条件以上查询中,还可以加入查询其它字段并能将其值依次输出吗?我想达到:将表table 参加翻译成 英文 要所有的 英语翻译原句是 死亡如影相随 求和?(要有过程和结果)∑[i/(2的i次方)]=?(i从1到无穷) 我要参加【翻译成英文】 如影相随是不是成语?大师们帮帮忙! 第一个字是映的成语有什么`?迅速`! 把“正在参加”翻译成英文 在雨中 看图作文.一共有四副图.要求::①仔细观察下面的图画,并根据这三幅图的内容,想象第二幅图的内容.(不必画出来)②把看到的和想到的内容连起来,围绕中心,写一篇450字以上的记 求和.要手写详细过程 万一他不参加 你还参加么?怎么翻译成英文 图上画了些什么?小朋友正在干什么?他是什么表情 请用映字组个成语,急用!请用映字组个成语. Could you___the baby laugh?--Could you____the baby laugh?--Certainly.It's easy.A.ask B.am C.are D.were 一天吃几根香蕉最好? can't 现在那种红外感应开关是只要感应范围里有人 就会一直亮 还是会延时亮十几秒灭了再亮啊? 一天吃几根香蕉最合适? 小学人教版五上课堂作业本《落花生》最后一题(告诉我题目,我本子忘带了. 不延时的红外感应或者光电开关有吗?我需要一种不延时的红外感应开关或者光电开关,要求当手放入探测范围时,开关立即打开或者关闭,请问是否存在这种开关,价格约是多少? 一天最多吃几根香蕉? 在不考虑空气阻力 本木倒致是什么意思 Don't leave, i can't spare you the world has. 是什么意思 考虑空气阻力的弹道是怎样的?听说最大射程的发射仰角有60度左右,明显大于理论上的45度. 到底是本木倒置还是本末倒置啊? 一天吃几根香蕉比较合适啊?吃两三根会不会太多啊? 晚期猿人和晚期智人有什么不同之处?晚期智人的出现之时,世界各地的古人类发生了什么变化? 本木倒置用英语怎么说 香蕉可以提高记忆力吗?一天吃几根香蕉最好了? 求教.航空部门规定,对于体积超过20cm/40cm/55cm或质量超过10kg的行李,需要托运.红红的爸爸乘飞机是带了一个长18厘米,宽35厘米,体积是370立方分米,质量是9公斤的包装盒,需要托运吗? 函数的导数表达式包含函数本身⋯ y'=-y^2-1 只知道自变量x=0时y=1 求y表达式 一天吃几根香蕉为极限?香蕉促消化我是知道的,但吃了一根后,由于它特别新鲜我就又吃2根,但我不敢吃多,怕吃多了对身体有害.到现在还想再吃一根呢.听他们说吃多了会拉稀呀?一天吃几根是 本未倒置的反义词 baby、we can fly fly away .. 艾滋病是由什么引起的 一水桶侧壁上不同高度处有两个小孔,装满水,水从孔中流出,将桶提至高处然后松手让桶落下问:在水桶下落的过程中,为什么水几乎不从孔中流出? 2*0.3m 平方线材导体多少根 艾滋病是什么引起的 本未倒置错在哪个字? 线材:导体截面积怎样计算 快要读二级了,孩子的看图写画很差,怎么样才能让她提高水平,请高手指教, 一水桶侧壁上不同的高度处有两个小孔,把桶装满水,水从孔中流出,用手将桶提高,然后松手让桶落下,在水桶下落的过程中()A.水仍然以原速度流出B.水仍然从孔中流出,但流速变快.C.水几乎不 导体材料的问题二氧化硅(玻璃)在纳米尺寸时能导电,如果把纳米二氧化硅连接制成导线后,还能不能保持导电性? 1.南方古猿、能人、直立人、智人这四个人类可进化的阶段中那一阶段人类最先开始直立行走?2.克隆羊多利具有生殖能力吗?骡子具有生殖能力吗? 如图,一个盛水的容器底部有一小孔.静止时用手指堵住小孔不让它漏水,假设容器在下述几种运动过程中始终保持平动,且忽略空气阻力,则(  ) A.容器自由下落时,小孔向下漏水B.将容 英语翻译在纽约一座漂亮的房子里,凯瑟琳斯洛珀跟父亲和姨妈一起过着平静的生活.父亲去世后,她将会继承一大笔钱.一天,凯瑟琳遇到一位英俊的小伙子,名叫莫里斯汤森.不久,他便称自己爱 进化的阶段 特征 古猿 南方猿 能人 直立人 智人 古猿 特征:人类和类人猿祖先,开始向不同方向进化 什么是2叉树 什么材料能作为导体为什么?那个电线电缆采用的是铜?而非铝或是别的导体? 看图写画我是用吸管和废衣架做桥的弯曲的一段,用泡沫做他的平面,下面奠了纸板,同时牙签作为护栏,废弃的饰品中的小花小草做绿化,体现出一种环保的概念,用桥来显示出宁波是我们美好的 2叉树是什么? 翻译 Can the ostrich fly? 万丈盐桥怎么样 什么是2叉树的度? 英语翻译这次考试对他来说太难了 你怎么样?英语振作起来,我确信我们能取得高分.(get good marks) 爱滋病的病原体是什么?它的结构由哪两部分组成?请详细说明原因.十万火急! 青海湖有多少盐 请问能不能电器通过红外感应开关接通电源之后通过其他系统将一种电器的上盖儿打开,延时一段时间之后再关闭,然后电器进行下一个工作程序呢?用电磁阀或是电磁开关等能解决这个问题吗 我去抽签了,签上说如影随天.我抽的是婚姻签, 美国使馆神秘“白盒”遍布全球 疑为监男子荒野露营遇熊袭击 杀爱犬果腹(图经略千年路 惠济万邦策——中国富邻外东非海盗勒索赎金四亿多美元 大多用于杭州大学生创业三年计划 最高可获25杭城中“霾”伏,昨晚能见度不到1公里先治水 广植绿 晚建城 宁波杭州湾新冲上云霄不容易 空军招飞初检一半卡在快递业欲借\"双十一\"重分市场 背多地实行公租房并轨试点 经适房或退出男子越野车启动将蹲在车前两小姑娘卷进崇信修和睦 行道有亲邻——中国睦邻外记者调查转基因食品渗透情况:新西兰澳德国大使馆:\"德国空置房组织流浪汉中国少数民族歌舞走进巴西安邻兴伟业 善邻谋致远——中国安邻外韩国电影节女星清凉上阵拼性感(组图)美一涂鸦街区将拆迁 艺术家联名告开发2013年是“男”还是“女”?斯诺登将在俄“遥助”德国 作证“监听加拿大暴风雨30多万人受影响我在美国男校读高中的所见所闻安宰贤和具惠善5月21日结婚!婚礼当散户须知:下周大盘暗藏凶机 刻不容缓股权众筹投资风险高 打造“合格投资人风险定价重磅来袭:P2P网贷行业开启活期理财究竟怎么样?你一定要看清楚!散户须知:下周大盘暗藏凶机 刻不容缓科学家发明一种材料,几分钟后就可以在琥珀108颗,每一颗都有它的故事!《神泣》限量版职业打造 秀出真我风采新一代励志哥出炉,看海外版励志哥的传同样是白t恤 为什么她们就能穿出万年精曜科技创业七年有成,宣布再度获得国爆料:Facebook将发布即时聊天《龙武2》今日开新服 赢取海量Q币皮大屏手机续航PK:体验差距到底有多大将军也卖萌? 《战意》Q版武将征集赛长续航拍照旗舰 OPPO R9 Pl萝莉与“野兽”:早衰少女遇到肌肉金刚和颐酒店遇袭女生专访:这不是个人问题花样炫技! 《艾尔之光》RU神娜姐技
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘