jQuery Mobile 页面
jQuery Mobile页面
开始学习 jQuery Mobile
|
尽管jQuery Mobile兼容所有的移动设备，但是并不能完全兼容PC机（由于有限的CSS3支持）。 为了更好的阅读本教程，建议您使用 Google Chrome 浏览器。 |
实例
<body>
<div data-role="page">
<div data-role="header">
<h1>欢迎来到我的主页</h1>
</div>
<div data-role="main" class="ui-content">
<p>我现在是一个移动端开发者!!</p>
</div>
<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>
</body>
<div data-role="page">
<div data-role="header">
<h1>欢迎来到我的主页</h1>
</div>
<div data-role="main" class="ui-content">
<p>我现在是一个移动端开发者!!</p>
</div>
<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>
</body>
实例解析：
- data-role="page" 是在浏览器中显示的页面。
- data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者搜索按钮)
- data-role="main" 定义了页面的内容，比如文本， 图片，表单，按钮等。
- "ui-content" 类用于在页面添加内边距和外边距。
- data-role="footer" 用于创建页面底部工具条。
- 在这些容器中你可以添加任何 HTML 元素 - 段落, 图片, 标题, 列表等。