预览加载中，请您耐心等待几秒...

jQueryMobile入门教程.docx

预览
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10

亲，该文档总共50页，到这已经超出免费预览范围，如果喜欢就直接下载吧～

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

[学期和年份]页PAGE\*MERGEFORMAT50 jQueryMobile入门教程 jQueryMobile入门 jQueryMobile基本页面结构 <!DOCTYPEhtml><html><head><title>jQueryMobile基本页面结构</title><linkrel="stylesheet"href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css"/><scripttype="text/javascript"src="http://code.jquery.com/jquery-1.5.min.js"></script><scripttype="text/javascript"src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script></head><body><divdata-role="page"id="home"><divdata-role="header"><h1>Header</h1></div><divdata-role="content"><p>Contentgoeshere</p></div><divdata-role="footer"><h4>Footer</h4></div></div></body></html>代码说明 要使用jQueryMobile，首先需要在开发的界面中包含如下3个内容：CSS文件jquery.mobile-1.0a3.min.cssjQuery类库文件jquery-1.5.min.jsjQueryMobile文件jquery.mobile-1.0a3.min.js在上面的页面基本模板中，引入这三个元素采用的是jQueryCDN方式，开发人员也可以下载这些文件及主题到你的服务器上。 我们可以看到页面中的内容都是包装在div标签中并在标签中加入data-role=”page”属性。这样jQueryMobile就会知道哪些内容需要处理。说明：data-属性是HTML5新推出的很有趣的一个特性，它可以让开发人员添加任意属性到html标签中,只要添加的属性名有“data-”前缀。在”page”div中，还可以包含”header”，”content”，”footer”的div元素,这些元素都是可选的，但至少要包含一个“content”div。 jQueryMobile入门： 使用jQueryMobile的第一步，先创建一个html页面，并在head标签中加入以下内容： <linkrel="stylesheet"href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"><scriptsrc="http://code.jquery.com/jquery-1.5.min.js"></script><scriptsrc="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> 正如你在代码中看到的，jQueryMobile是jQuery的一个扩展。目前来说，压缩后的jQueryMobile仅12Kb。 在创建第一个jQueryMobile页面时你需要创建三块基本内容，下面的推荐模版展示了这一过程，你可以在未来的项目中使用它： 在head标签内填写： <metaname="viewport"content="width=device-width,minimum-scale=1,maximum-scale=1"><linkrel="stylesheet"href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"><scriptsrc="http://code.jquery.com/jquery-1.5.min.js"></script><scriptsrc="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> 在body标签内填写： <divdata-role="page"><divdata-role="header"><h1>PageTitle</h1></div><!--/header--><divdata-role="content"><p>Pagecontentgoeshere.</p></div><!--/con