第一天 认识jQuery mobile 框架,资源,书籍前言jQuery mobile 框架纵览headercontentfooter

这里就不对jquery mobile做过多的历史介绍,直接进行jQuery mobile的学习

<a target="_blank" href="http://blog.51cto.com/attachment/201202/201658768.png"></a>

从上面的图示我们可以知道,一个完整的页面是由

这三部分组成.那这三部分是不是一个jQuerymobile 页面必须拥有的元素呢,而且必须是这样的排序呢?答案是:不是,这些元素可以组合和排序可以任由自己自由选择,当然,我个人建议还是严格按照规范进行排序.

在进行我们第一个jQuery Mobile Hello world程序之前,我们要对html5进行一个简单的认识,因为,jQuery Mobile是基于Html5开发的.

相比当初html 4 那种冗长的文档的声明相比,html5的文档声明无疑简洁很多,你只需在你的页面第一行输入:

&lt;!DOCTYPE html&gt; 

这样就完成了一个html5 的文档类型声明了,接下来就开始一个标准的html的页面编写:

&lt;html&gt;   

&lt;head&gt;   

&lt;meta charset="utf-8"&gt;   

&lt;title&gt;Hello,Mobile,world&lt;/title&gt;   

&lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /&gt;   

&lt;script src="http://code.jquery.com/jquery-1.6.4.min.js"&gt;&lt;/script&gt;   

&lt;script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"&gt;&lt;/script&gt;   

&lt;/head&gt;   

&lt;body&gt; &lt;/body&gt;   

&lt;/html&gt; 

这样一个标准的jQuery Mobile的文档格式就初始化完毕,这里,我使用了jQuery Mobile 的CDN 连接,如何是本地的话,只要做出相应的替换即可.

编码的步骤按照我上面的元素写即可,page,header,footer,注意!html5 新增的一个属性,data-role!!!

&lt;div data-role="page"&gt;   

&lt;div data-role="header"&gt;      

&lt;h1&gt;Hello,World!!&lt;/h1&gt;     

&lt;/div&gt;   

&lt;div data-role="content"&gt;      

&lt;p&gt;Hello,Mobile World!&lt;/p&gt;     

&lt;div data-role="footer"&gt;    

&lt;h1&gt;Coypright:youxiachai&lt;/h1&gt;   

&lt;/div&gt; 

这样就完成了我们第一个jQuery mobile的页面,很简单是不?

一个完整的jQuery mobile页面

&lt;!DOCTYPE html&gt;  

&lt;html&gt; &lt;head&gt; 

&lt;meta charset="utf-8"&gt; 

&lt;title&gt;Hello,Mobile,world&lt;/title&gt; 

&lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /&gt; 

&lt;script src="http://code.jquery.com/jquery-1.6.4.min.js"&gt;&lt;/script&gt; 

&lt;script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"&gt;

&lt;/script&gt; &lt;/head&gt;  &lt;body&gt;  &lt;div data-role="page"&gt;     

&lt;div data-role="header"&gt;         &lt;h1&gt;Hello,World&lt;/h1&gt;     

&lt;/div&gt;       &lt;div data-role="content"&gt;          

&lt;p&gt;Hello,Mobile,World!!&lt;p&gt;     &lt;/div&gt;     &lt;div data-role="footer"&gt;         

&lt;h4&gt;Copyright:youxiachai&lt;/h4&gt;     &lt;/div&gt; &lt;/div&gt;   &lt;/body&gt; &lt;/html&gt; 

我们的第一个jQuery Mobile就这样完成了,是不是简单到难以置信呢?没错,jQuery mobile就是这么方便,下面介绍一下,我们从那里获取学习的资源,第二天,我详细说说jQuery mobile 的几个常用组件,如果,你觉得这些很不够的话,我建议你,认真看下我提供的传送门

jQuery 的学习资源

<a href="http://jquerymobile.com/resources/">http://jquerymobile.com/resources/</a> jQuery Mobile 已经提供了非常丰富的学习资源,涵盖了,jQuery mobile 项目的演示,书籍,框架,第三方插件,,工具,还有相应的教程和文章,当然,都是英文的…

jQuery 书籍介绍

以下都是豆瓣的传送门,书籍介绍我已经全部补全了 jQuery mobile <a href="http://book.douban.com/subject/6724989/">http://book.douban.com/subject/6724989/</a> <a href="http://book.douban.com/subject/6954448/">http://book.douban.com/subject/6954448/</a> <a href="http://book.douban.com/subject/7564687/">http://book.douban.com/subject/7564687/</a> <a href="http://book.douban.com/subject/7070561/">http://book.douban.com/subject/7070561/</a> 对了大家应该更关心电子版吧.呵呵,正在上传中,因为版权问题,等课程完了就撤销…还有下载了的朋友不要到处传,就算要传也要记得不要写上转载地址.本来是打算打包上传..不知道为什么115上传速度才几K….就单个上传好了,如果要转帖的话,记得把下载的链接去掉… <a href="http://115.com/file/aqx9nw32#">http://115.com/file/aqx9nw32#</a> __jQuery_Mobile.pdf <a href="http://115.com/file/cl142kj7#">http://115.com/file/cl142kj7#</a> __Adobe_Dreamweaver_CS5_5_Studio_Techniques__Designing_and_Developing_for_Mobile_with_jQuery__HTML5__and_CSS3.pdf <a href="http://115.com/file/aqx9nbee#">http://115.com/file/aqx9nbee#</a> __Using_the_CSS3_Mobile_Pack_for_Adobe_Fireworks_CS5.epub <a href="http://115.com/file/cl142epx#">http://115.com/file/cl142epx#</a> __jQuery_Mobile_First_Look.pdf 本文转自 liam2199 博客，原文链接： http://blog.51cto.com/youxilua/772634    如需转载请自行联系原作者