欢迎来到做网站吧,请先 登录注册

教程观看记录

资源投稿 | 网站地图 | 联系我们 | 收藏本站 |

做网站吧 > HTML5 > jquery Mobile >
收 藏
2600

jQuery Mobile 基本页面结构

所属栏目:jquery Mobile 来源:未知 内容发布:做网站吧

大部分jQuery Mobile Web应用程序都要遵循下面的基本模板
<!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>


在android模拟器中显示效果如下:



               

代码说明

要使用 jQuery Mobile,首先需要在开发的界面中包含如下3个内容

CSS文件jquery.mobile-1.0a1.min.css
jQuery library jquery-1.4.3.min.js
jQuery Mobile library jquery.mobile-1.0a1.min.js
在上面的页面基本模板中,引入这三个元素采用的是jQuery CDN方式,开发人员也可以下载这些文件及主题到你的服务器上。

我们可以看到页面中的内容都是包装在div标签中并在标签中加入data-role=”page”属性。 这样jQuery Mobile就会知道哪些内容需要处理。

说明:data-属性是HTML5新推出的很有趣的一个特性,它可以让开发人员添加任意属性到html标签中,只要添加的属性名有“data-”前缀。

在”page”div中,还可以包含”header”, ”content”, ”footer”的div元素,这些元素都是可选的,但至少要包含一个 “content”div。

div dat-role=”header”></div>

在页面的顶部建立导航工具栏,用于放置标题和按钮(典型的至少要放一个“返回”按钮,用于返回前一页)。通过添加额外的属性

data-position=”fixed”,可以保证头部始终保持屏幕的顶部

<div dat-role=”content”></div>

包含一些主要内容,例如文本内容,图像,按钮,列表,表单等等

<div dat-role=”footer”></div>

在页面的底建立工具栏,添加一些功能按钮

为了确保它始终保持在页面的底部,可以给其加上data-position=”fixed” 属性

               

文章关键词:jQuery Mobil  

相关推荐
网友评论
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
上一篇:jQuery Mobile AJAX导航
下一篇:HTML5 前端框架 jQuery Mobile 使用教程

返回顶部