学习资料来源http://www.w3school.com.cn/jquerymobile/jquerymobile_pages.asp
1.安装 与 jQuery 类似,无需在您的计算机上安装任何程序;您只需直接在 HTML 页面中引用以下样式表和 JavaScript 库,这样 jQuery Mobile 就可以工作了
<head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> </head>
提示:您是不是奇怪为什么 <script> 标签中没有 type="text/javascript" 属性?
在 HTML5 中该属性不是必需的。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言!
2.入门
<body> <divdata-role="page"
> <divdata-role="header"
> <h1>欢迎访问我的主页</h1> </div> <divdata-role="content"
> <p>我是一名移动开发者!</p> </div> <divdata-role="footer"
> <h1>页脚文本</h1> </div> </div> </body>
例子解释:
- data-role="page" 是显示在浏览器中的页面
- data-role="header" 创建页面上方的工具栏(常用于标题和搜索按钮)
- data-role="content" 定义页面的内容,比如文本、图像、表单和按钮,等等
- data-role="footer" 创建页面底部的工具栏
在这些容器中,您可以添加任意 HTML 元素 - 段落、图像、标题、列表等等。
提示:HTML5 data-* 属性用于通过 jQuery Mobile 为移动设备创建“对触控友好的”交互外观。
练手:
在 jQuery Mobile 中添加页面
在 jQuery Mobile,您可以在单一 HTML 文件中创建多个页面。
请通过唯一的 id 来分隔每张页面,并使用 href 属性来连接彼此:
实例
<div data-role="page"id="pageone"
> <div data-role="content"> <a href="#pagetwo">转到页面二</a> </div> </div> <div data-role="page"id="pagetwo"
> <div data-role="content"> <a href="#pageone">转到页面一</a> </div> </div>
注释:包含大量内容的 web 应用程序会影响加载时间(比如文本、链接、图像和脚本等等)。如果您不希望在内部链接页面,请使用外部文件:
<a href="externalfile.html">转到外部页面</a>