jQuery Mobile (html5)开发入门教程.pdf

jQuery Mobile 入门教程 jQuery Mobile 基本页面结构 !DOCTYPE html html head titlejQuery Mobile 基本页面结构/title link rel=stylesheet href=/mobile/1.0a3/jquery.mobile-1.0a 3.min.css / script type=text/javascript src=/jquery-1.5.min.js/scrip t script type=text/javascript src=/mobile/1.0a3/jquery.mobil e-1.0a3.min.js/script /head body div data-role=page id=home div data-role=header h1Header/h1 /div div data-role=content pContent goes here/p /div div data-role=footer h4Footer/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-sc ale=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=headerh1Page Title/h1/div!-- /header -- div data-role=contentpPage content