原创力文档- 1、本文档共51页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
jQuery Mobile 入门教程
[学期和年份]页 PAGE \* MERGEFORMAT51
jQuery Mobile 入门教程
jQuery Mobile入门
jQuery Mobile 基本页面结构
<!DOCTYPE html> <html> ??? <head> ??????? <title>jQuery Mobile基本页面结构</title> ??????? <link rel="stylesheet" href="/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /> ??????? <script type="text/javascript" src="/jquery-1.5.min.js"></script> ??????? <script type="text/javascript" src="/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>代码说明
要使用 jQuery Mobile，首先需要在开发的界面中包含如下3个内容： CSS文件jquery.mobile-1.0a3.min.css jQuery类库文件 jquery-1.5.min.js? jQuery Mobile文件 jquery.mobile-1.0a3.min.js? 在上面的页面基本模板中，引入这三个元素采用的是jQuery CDN方式，开发人员也可以下载这些文件及主题到你的服务器上。
我们可以看到页面中的内容都是包装在div标签中并在标签中加入data-role=”page”属性。 这样jQuery Mobile就会知道哪些内容需要处理。 说明：data-属性是HTML5新推出的很有趣的一个特性，它可以让开发人员添加任意属性到html标签中,只要添加的属性名有“data-”前缀。 在”page”div中，还可以包含”header”， ”content”， ”footer”的div元素,这些元素都是可选的，但至少要包含一个 “content”div。
jQuery Mobile 入门：
使用jQuery Mobile的第一步，先创建一个html页面，并在head标签中加入以下内容：
<link rel="stylesheet" href="/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"> <script src="/jquery-1.5.min.js"></script> <script src="/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
正如你在代码中看到的，jQuery Mobile是jQuery的一个扩展。目前来说，压缩后的jQuery Mobile 仅12Kb。
在创建第一个jQuery Mobile页面时你需要创建三块基本内容，下面的推荐模版展示了这一过程，你可以在未来的项目中使用它：
在 head 标签内填写：
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <link rel="stylesheet" href="/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"> <script src="/jquery-1.5.min.js"></script> <script src="/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
在body标签内填写：
<div data-role="page"> <div data-role="header"><h1>Page Title</h
文档评论（0）