《jQuery Mobile快速入门》—— 2.1 jQuery Mobile页面模板

本节书摘来异步社区《jQuery Mobile快速入门》一书中的第2章,第2.1节,作者:【美】Brad Broulik,更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.1 jQuery Mobile页面模板

jQuery Mobile快速入门
一个jQuery Mobile页面模板如程序清单2-1所示。在往下讲解之前,我们先来运行一下这个模板。复制HTML模板(ch2/template.html),然后粘贴到你的台式机中,并通过你最喜欢的浏览器中打开它。现在,你运行的就是一个jQuery Mobile app,而且无论使用的是什么浏览器,它看起来应该与图2-1所示相同。该模板符合HTML5语法标准,并且包含了jQuery Mobile的特定属性和asset文件(CSS、js)。在程序清单2-1中,每一个特定的jQuery Mobile asset和属性都突出显示,并进行了解释。

3851d77505466710aafc2e7aa1ae147a1e76c573

1.对jQuery Mobile来说,这是一个推荐的视图(viewport)配置。device-width值表示,我们希望让内容扩展到屏幕的整个宽度。initial-scale设置了用来查看Web页面的初始缩放百分比或缩放因数。值为1,则显示一个未缩放的文档。作为一名jQuery Mobile开发人员,你可以根据应用程序的需要自定义视图的设置。例如,如果你希望禁用缩放,则可以添加user-scalable=no。然而,如果禁用了缩放,则会破坏应用程序的可访问性,因此要谨慎使用。

2.jQuery Mobile的CSS会为所有的A级和B级浏览器应用风格(stylistic)的优化。你可以根据需要自定义或添加自己的CSS。

3.jQuery库是jQuery Mobile的一个核心依赖,如果你的app需要更多动态行为,则强烈建议在你的移动页面中使用jQuery的核心API。

4.如果你需要改写jQuery Mobile的默认配置,则可以应用你的自定义设置。有关自定义jQuery Mobile默认配置的细节,请参考第8章。

5.jQuery Mobile JavaScript库必须在jQuery和任何可能存在的自定义脚本之后声明。jQuery Mobile库是增强整个移动体验的核心。

6.data-role=“page”为一个jQuery Mobile页面定义了页面容器。只有在构建多页面设计时,才会用到该元素(见程序清单2-3)。

7.data-role=“header”是页眉(header)或标题栏,如图2-1所示。该属性是可选的。

8.data-role=“content”是内容主体的包装容器(wrapping container)。该属性是可选的。

9.data-role=“footer”包含页脚栏(见图2-1)。该属性是可选的。

5e28b62a5056cc6ca0792dc859faf0c699150634

重要:

CSS和JavaScript文件的顺序必须与程序清单2-1中列出的顺序一致。这种排序是必要的,它可以正确地初始化这些文件,然后再让jQuery Mobile来引用。此外,建议从内容分发网络(Content Delivery Network,CDN)下载这些文件。尤其是,你可以从jQuery Mobile CDN1下载这些文件。这些从CDN中下载的文件都是经过高度优化的,可以为用户提供更好的响应式体验。它们是一些缓存的压缩文件,体积很小,因此可以并行载入。

提示:

为了将页脚定位到屏幕的最底部,可以为页脚元素添加data-position=“fixed”。默认的页脚位置是在内容之后,并不是屏幕的底部。例如,如果你的内容只占据了一半的屏幕高度,则页脚会出现在屏幕中间。

2.1.1 jQuery Mobile页面增强

jQuery Mobile是如何为优化的移动体验增强标记的呢?我们来看图2-2。

1.首先,jQuery Mobile会载入语义HTML标记(见程序清单2-1)。

2.其次,jQuery Mobile会迭代由它们的data-role属性定义的每一个页面组件。由于jQuery Mobile迭代每一个页面组件,因此会为每一个应用优化过的移动CSS3组件添加标记。jQuery Mobile最终会将标记添加到页面中,从而让页面能够在所有平台上普遍呈现。

3.最后,在完成页面的标记添加之后,jQuery Mobile会显示优化过的页面。要查看由移动浏览器呈现的添加源文件,请参考程序清单2-2。

eac9141ca48d934b757e58b866276433e5122bec

1.base标签(tag)的@href为一个页面中的所有链接指定了一个默认的地址或者默认的目标。例如,当载入特定页面的资源(assets)时(比如图片、CSS、js等)jQuery Mobile会用到@href。

2.body标签包含了header、content和footer组件的增强样式。默认情况下,所有的组件都是使用默认的主题和特定的移动CSS增强来设计(styled)的。作为一个额外的好处,所有的组件现在都证明了可访问性,而这要归功于WAI-ARIA角色和级别。我们可以免费获得这些增强。

现在你应该感觉到,可以很容易地设计一个基本的jQuery Mobile页面了。我们前面已经介绍了核心的页面组件(page、header、content、footer),并看到了一个增强的jQuery Mobile页面所产生的文档对象模型(Document Object Model, DOM)。接下来,我们开始讲解jQuery Mobile的多页面模板。

相关资源:jQueryMobile-HTML5模板
已标记关键词 清除标记
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
<p> <b><span style="background-color:#FFE500;">【超实用课程内容】</span></b> </p> <p> <br /> </p> <p> <br /> </p> <p> 本课程内容包含讲解<span>解读Nginx的基础知识,</span><span>解读Nginx的核心知识、带领学员进行</span>高并发环境下的Nginx性能优化实战,让学生能够快速将所学融合到企业应用中。 </p> <p> <br /> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b><br /> </b> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b><span style="background-color:#FFE500;">【课程如何观看?】</span></b> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> PC端:<a href="https://edu.csdn.net/course/detail/26277"><span id="__kindeditor_bookmark_start_21__"></span></a><a href="https://edu.csdn.net/course/detail/27216">https://edu.csdn.net/course/detail/27216</a> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 移动端:CSDN 学院APP(注意不是CSDN APP哦) </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 本课程为录播课,课程永久有效观看时长,大家可以抓紧时间学习后一起讨论哦~ </p> <p style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <br /> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <strong><span style="background-color:#FFE500;">【学员专享增值服务】</span></strong> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b>源码开放</b> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化 </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 下载方式:电脑登录<a href="https://edu.csdn.net/course/detail/26277"></a><a href="https://edu.csdn.net/course/detail/27216">https://edu.csdn.net/course/detail/27216</a>,播放页面右侧点击课件进行资料打包下载 </p> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页