Jquery mobile学习教程之Jquery mobile 二 页面结构
来源:互联网 发布:centos6配置国内yum源 编辑:程序博客网 时间:2024/04/30 03:36
在jQuery Mobile中,有一个基本的页面框架模型,就是在页面中通过将一个
<!DOCTYPE html><html> <head> <title>jQuery Mobile基本页面结构</title> <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> <div data-role="page" id="home"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content"> <p>Content goes here</p> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div> </body></html>
源码分析:
为了更好的支持Html5的新属性和功能,第一行以HTML5的声明文档开始,即添加如下代码:
<!DOCTYPE html>
在<head>元素中添加一个名称为"viewport"的<meat>元素,并设置该元素的"content"属性,代码如下所示:
这行代码的功能是:设置移动设备中浏览器缩放的宽度和等级。通常情况下,移动设备的浏览器默认以900px的宽度 显示页面,这种宽度会导致屏幕缩小,页面放大,不适合浏览。如果在页面添加<meat>元素并设置"content"的属性值为“width=device-width.initial-scae=1”,可以使页面的宽度与移动设备的屏幕宽度相等更加适合用户浏览。
Jquery Mobile多页面容器框架
在一个供jQuery Mobile使用的HTML页面中,可以包含一个元素属性“data-role”值为“page”的容器,也允许包含多个,从而形成多容器页面结构。容器之间各自独立,拥有唯一的Id号属性。页面加载时,以堆栈的方式同时加载;容器访问时,以内部链接“#” 加对应“Id”的方式进行设置。单击该链接时,jQuery Mobile 将在页面文档寻找对应Id号的容器,以动画效果切换至该容器中,实现容器间内容的访问。
<!DOCTYPE html> <html> <head> <title>jQuery Mobile 多容器页面结构</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link href="Css/jquery.mobile-1.0.1.min.css" rel="Stylesheet" type="text/css" /> <script src="Js/jquery-1.6.4.js" type="text/javascript"></script> <script src="Js/jquery.mobile-1.0.1.js" type="text/javascript"></script> </head> <body> <div data-role="page"> <div data-role="header"><h1>天气预报</h1></div> <div data-role="content"> <p><a href="#w1">今天</a> | <a href="#">明天</a></p> </div> <div data-role="footer"><h4>2012 rttop.cn studio</h4></div> </div> <div data-role="page" id="w1" data-add-back-btn="true"> <div data-role="header"><h1>今天天气</h1></div> <div data-role="content"> <p>4~-7℃<br />晴转多云<br />微风</p> </div> <div data-role="footer"><h4>2012 rttop.cn studio</h4></div> </div> </body> </html>
效果截图:
源码分析:
在本实例页面中,从第一个容器切换至第二个容器时,采用的是“#”加对应“Id”的内部链接方式。因此,在一个页面中,不论相同框架的“page”容器有多少,只要对应的Id号唯一,就可以通过内部链接的方式进行容器间的切换。在切换时,jQuery Mobile会在文档中寻找对应“Id”的容器,然后通过动画的效果切换到该页面中。
从第一个容器切换至第二个容器后,如果想要从第二个容器返回第一个容器,有下列两种方法:
在第二个容器中,增加一个<a>元素,通过内部链接“#”加对应“Id”的方式返回第一个容器。
在第二个容器的最外层框架<div>元素中,添加一个“data-add-back-btn”属性。该属性表示是否在容器的左上角增加一个“回退”按钮,默认值为“false”;如果设置为“true”,将出现一个“back”按钮,单击该按钮,回退上一级的页面显示。
说明 如果是在一个页面中,通过“#”加对应“Id”的内部链接方式,可以实现多容器间的切换;但如果不是在一个页面,此方法将失去作用。因为在切换过程中,先需要找到页面,再去锁定对应“Id”容器的内容,而并非直接根据“Id”切换至容器中。
Jquery Mobile 外部页面链接框架
虽然在一个页面中,可以借助容器的框架实现多种页面的显示,但是,把全部代码写在一个页面中会延缓页面被加载的时间,使代码冗余,且不利于功能的分工与维护的安全性。因此,在jQuery Mobile中,可以采用开发多个页面并通过外部链接的方式,实现页面相互切换的效果。下面通过一个简单的实例来介绍它是如何实现的。
<!DOCTYPE html> <html> <head> <title>jQuery Mobile 外部页面链接</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link href="Css/jquery.mobile-1.0.1.min.css" rel="Stylesheet" type="text/css" /> <script src="Js/jquery-1.6.4.js" type="text/javascript"></script> <script src="Js/jquery.mobile-1.0.1.js" type="text/javascript"></script> </head> <body> <div data-role="page"> <div data-role="header"><h1>天气预报</h1></div> <div data-role="content"> <p><a href="#w1">今天</a> | <a href="#">明天</a></p> </div> <div data-role="footer"><h4>2012 rttop.cn studio</h4></div> </div> <div data-role="page" id="w1" data-add-back-btn="true"> <div data-role="header"><h1>今天天气</h1></div> <div data-role="content"> <p>4~-7℃<br />晴转多云<br />微风</p> <em style="float:right;padding-right:5px"> <a href="about.htm">rttop.cn</a>提供 </em> </div> <div data-role="footer"><h4>2012 rttop.cn studio</h4></div> </div> </body> </html>
另外,新建一个用于外部链接的HTML 页面about.htm,加入以下代码:
<!DOCTYPE html> <html> <head> <title>关于rttop</title> <meta name="viewport" content="width=device-width" /> </head> <body> <div data-role="page" data-add-back-btn="true"> <div data-role="header"><h1>关于rttop</h1></div> <div data-role="content"> <p> rttop.cn是一家新型高科技企业,正在努力实现飞翔的梦想。 </p> </div> <div data-role="footer"><h4>2012 rttop.cn studio</h4></div> </div> </body> </html>
页面效果
如果不想采用AJAX请求的方式打开一个外部页面,只需要在链接元素中将"rel"属性设置为"external",该页面将脱离整个jQuery Mobile的主页面环境,以独自打开的页面效果在浏览器中显示。
说明 如果采用AJAX请求的方式打开一个外部页面,注入主页面的内容也是以"page"为目标,"page"以外的内容将不会被注入主页面中;另外,必须确保外部加载页面URL地址的唯一性。
- Jquery mobile学习教程之Jquery mobile 二 页面结构
- 【jQuery Mobile学习】jQuery Mobile页面(二)
- Jquery Mobile 学习教程之页面脚本
- jquery mobile学习教程之初识Jquery mobile 一
- 【jQuery Mobile学习】jQuery Mobile页面(一)
- Jquery Mobile学习教程之预加载与页面缓存
- Jquery Mobile学习教程之四 页面过渡
- jQuery Mobile学习二:jQuery Mobile简介
- jQuery Mobile 学习二
- jQuery Mobile 基本页面结构
- Jquery Mobile学习教程之对话框
- jQuery-Mobile学习(页面)
- jQuery Mobile 学习(二)
- jQuery Mobile教程:jQuery Mobile基本事件
- JQuery mobile 基本结构
- jQuery Mobile 页面过渡
- jQuery Mobile 页面事件
- jquery mobile 页面
- windows下编译libuv
- 谷歌中一些十分有趣的特效现象
- VBX 如何使虚拟机支持多核
- 常用的查看数据库的SQL
- magento 结合 memcached
- Jquery mobile学习教程之Jquery mobile 二 页面结构
- R语言之回归分析篇
- 我的.zshrc
- 预编译的作用
- 踢猫效应的故事
- js控制网站中图片漂浮
- RPM方式安装MySQL5.6
- 用Excel打开csv文件时,如何处理数字内容展现会自动转换格式的问题
- Javascript中三个offset的不同,本人的基本了解