域名注册

中文域名
英文域名
通用网址
域名解析
域名转入\转出

虚拟主机

主机购买
管理主机
FTP上传
数据库管理
主机续费升级

网站建设

建站流程介绍
网站设计
网站改版
网站维护
网站推广

企业邮局

邮箱使用
管理邮箱
邮箱续费升级
全球邮局

网站优化

seo优化
seo技巧
收索引擎优化
关键词优化

网站备案

备案流程指南
修改备案
备案资料下载
备案小技巧

服务器租用

服务器租用
服务器托管

其它服务

400电话
在线客服
财务常见问题
会员常见问题

您现在的位置：创新互联 >> 网站建设 >> 网站建设常见问题 >> 如何使用jQuery Mobile创建页面和视图

如何使用jQuery Mobile创建页面和视图

作者：谭小姐文章来源：网站制作设计部点击数：2164 更新时间：2009-2-24
页面和视图作为移动web应用程序最重要的用户界面之一，主要承担整个web应用程序的界面的呈现工作。 jQuery Mobile 提供了一套自定义元素属性用于搭建各种页面和视图。接下来，我们成都网站制作将与读者探讨如何使用jQuery Mobile 创建页面和视图。
1.标准的移动web页面
根据上节我们成都网站制作讲过的jQuery Mobile 入门示例，我们可以看到一个运行在在移动设备上的web页面。
首先，一个标准的jQuery Mobile应用程序web页面需要指定为HTML5标准文档类型，即<!DOCTYPE html>。
一个web页面必须导入一个jQuery Mobile CSS文件、一个jQuery 类库文件、一个jQuery Mobile文件。
同时，我们还需要对web页面设置wiewport属性，如下代码：
<meta name"viewport" content="width=device-width,initial-scale=1" />
2.移动设备的视图
jQuery Mobile在定义了<body>标签内通过对元素（通常采用div元素）指定其属性 data-role="page" 作为一个视图页面。一个web页面可以定义一个或多个视图，每个视频之间可以互相切换。
在每个page视图内的任意元素，都可以定义data-role属性。例如标识页头的header、内容区域的content以及页脚的footer。
我们在上述过程中采用jQuery Mobile推荐使用div元素作为视图页面的布局元素。但是，有HMTL5标准定义的新元素在ios和android平台下都能使用，例如header、footer、section、article等元素。
下面我们成都网页设计公司再来简单描述一下HTML5标准定义的新元素在移动web页面中的含义。
section标签元素，在HTML5标准中定义为页面文档中的一段或一节，通常在网站中被分成各种不同模块或不同栏目。当使用在移动web页面时，可以将section元素看作每一个视图页面。
header元素和footer元素在每个视图中可以作为页头和页脚的标识。
artcle元素可以作为每个视图的一个主题内容。
3.多视图web页面
四川网站建设在前面提到，在一个web页面内，允许开发者定义多个视图页面。实现多视图页面非常简单，我们成都网站设计只需要在web页面内定义几个div或section标签，并设置其data-role属性值为page即可实现。
我们通过指定视图的id，并在各自视图内容区域添加超链接，同时在超链接的href属性中设置#符号+id方式，就可以通过该超链接实现切换到指定id的视图。
在页面中单击“切换第二个视图”链接时，页面就会切换到第二个视图，同时在第二个视图中单击“切换第一个视图”链接，就能回到第一个视图。
4.改变页面标题的视图
jQuery Mobile 的 data-title属性值自动更新HTML文档中的标题，一般用在多视图页面中。当每次切换视图时，如果新视图定义了data-title属性时，HTML文档就会自动跟新标题。
5.视图切换动画
jQuery Mobile通过CSS3的transition动画机制，在多视图切换或返回按钮事件中，采用动画效果切换视图。
目前，jQuery Mobile 提供有6种切换动画属性。
如下示例代码：
<a href="#firstView" data-transition="pop">切换第二视图</a>
6.dialog对话框
任何一个视图页面，只要在标签的data-rel属性中定义了dialog属性值，视图就具有dialog浮动层的效果
7.页面主题
jQuery Mobile提供一个非常灵活和强大的主题系统。开发人员可以通过data-theme属性对视图、header、footer等设置不同的主题。我们在section标签中定义了“a”主题，那么整个视图内都是a主题风格，接着在视图内部对header和footer标签定义了各自的主题“b”和“c”，因此成都网站建设不再使用a主题风格，而使用自己定义的主题。
上一篇文章：CSS语法及其与XML结合使用方法
下一篇文章：CSS式样的阴影式样效果

分享到： QQ空间新浪微博腾讯微博人人网开心网百度搜藏腾讯微博网易微博