JQuery Mobile 入门1

来源：互联网发布：阿里云系统登录编辑：程序博客网时间：2024/05/17 00:04

学习资料来源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>

下载jQuerymobile.com

提示：您是不是奇怪为什么 <script> 标签中没有 type="text/javascript" 属性？

在 HTML5 中该属性不是必需的。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！

2.入门

<body><div data-role="page">  <div data-role="header">    <h1>欢迎访问我的主页</h1>  </div>  <div data-role="content">    <p>我是一名移动开发者！</p>  </div>  <div data-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>

0 0