JqueryMobile入门基础附源码下载，jquerymobile源码
JqueryMobile入门基础附源码下载，jquerymobile源码
最近要做一个手机版的网站，所以就了解了一点JqueryMObile,下面是我整理的笔记，现在分享给大家，希望朋友们喜欢，先给个首页看看吧！！！
一、JqueryMobile基本页面结构
代码说明：
要使用 jQuery Mobile，首先需要在开发的界面中包含如下3个内容：
在上面的页面基本模板中，引入这三个元素采用的是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="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"> <script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
正如你在代码中看到的，jQuery Mobile是jQuery的一个扩展。目前来说，压缩后的jQuery Mobile 仅12Kb。
在创建第一个jQuery Mobile页面时你需要创建三块基本内容，下面的推荐模版展示了这一过程，你可以在未来的项目中使用它：
1.在 head 标签内填写：
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
2.在body标签内填写：
<div data-role="page">
<div data-role="header"><h1>Page Title</h1></div><!-- /header --> <div data-role="content"><p>Page content goes here.</p></div><!-- /content -->
<div data-role="footer"><h4>Page Footer</h4></div><!-- /footer --> </div><!-- /page -->
在模版中有些地方值得我们注意。首先是DIV元素的使用，我们知道，既然HTML5在移动设备中如此流行，为什么不使用HTML5的 header, article, section, footer 标签元素呢？这是因为较老的智能手机浏览器无法明白新的HTML5元素。在某些情况下，例如windows phone上老版本的IE会出现一个bug使得无法加载页面的css。而DIV元素却被广泛支持。此时你已经可以保存你的网页并在浏览器中查看了，这些代码同样可以在桌面浏览器中正常工作。我推荐你使用Chrome来进行本地测试。要在真实环境测试，你就需要相应移动设备了。
3.使用超链接：
普通网页和移动网页的一个巨大的不同便是屏幕中呈现内容的数量多寡上。虽然你可以在你的iPhone上加载纽约时报的主页，但你需要缩放它才能顺利阅读上面的内容。这样的体验并不好，而更好的解决方案是减少那些杂乱的内容，只在屏幕上显示你需要显示的内容。
如果是传统的网站，你可能会创建一些包含少量内容的子页面，而当你使用jQuery Mobile时，你最好在页面中包含“微量”的内容，这样才会更有效率。
在上面例子中你已经看到了如何利用模版来创建一个页面。现在让我们更进一步，来创建内容的“page”。jQuery Mobile中的一个“page”结构一般使用一个DIV来组织。现在你可以使用上面的模板来创建一个包含四个跳转到其他页面的链接的导航页面：
<!-- Start of first page -->
<div data-role="page" id="menu">
<div data-role="header"><h1>Menu</h1></div><!-- /header --> <div data-role="content">
<p>What vehicles do you like?</p>
<p><a href="#Cars">Cars</a></p>
<p><a href="#Trains">Trains</a></p>
<p><a href="#Planes">Planes</a></p>
</div><!-- /content -->
<div data-role="footer"><h4>Page Footer</h4></div><!-- /footer --> </div><!-- /page -->
上面这段代码中第一个div非常重要，它包含有一个id和一个data-role属性：
data-role="page" id="menu"
data-role定义了这个div是一个“page”，page这个术语稍微有点让人误解，“page”这里其实指的是一个可视面或者在屏幕里未隐藏的HTML代码部分，而不是指的一个单独的页面（或者说单独的HTML文件）。data-role="page" 意味着jQueryMobile会根据div元素在屏幕中构建可视内容。而id属性允许你通过a标签链接到该page，或者其他page。
上面创建的导航页是我们在浏览器看到的第一个页面，接下来我们再添加三个“page”，他们有不同的id：Cars， Planes，Trains。
<div data-role="page" id="Cars">
<div data-role="header">
<h1>Cars</h1>
</div><!-- /header -->
<div data-role="content">
<p>We can add a list of cars</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of third page -->
<div data-role="page" id="Trains">
<div data-role="header">
<h1>Trains</h1>
</div><!-- /header -->
<div data-role="content">
<p>We can add a list of trains</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of fourth page -->
<div data-role="page" id="Planes">
<div data-role="header">
<h1>Planes</h1>
</div><!-- /header -->
<div data-role="content">
<p>We can add a list of planes</p>
</div><!-- /content -->
<div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page -->
现在，在你的Android或者IOS设备里测试一下，当你加载好页面后你会发现这三件事情：
导航页出现在屏幕中（你可以上下滚动一下，并没有别的东西出现）
当你点击一个链接时，会动画切换到另一个页面。
其实这些div元素预先会加载并缓存到你的浏览器中，因此“页面”间的切换会非常流畅。
在同一个HTML页面创建多个在屏幕上显示的“页面”使得你可以大大减少页面加载的次数，但同时也会导致许多移动设备运行缓慢。jQueryMobile将页面所有的链接跳转都视作Ajax调用，这样可以充分利用CSS的过渡效果，当你想要链接到你自己的web程序之外的某些链接时，你可以这样编写你的链接代码：
<a href="http://www.lampweb.org" rel="external">lampweb.org</a>
如上所示，仅需要为a标签添加 rel="external"属性即可。然而jQueryMobile对于（同域的）外部链接并不是简单地跳转完事儿，相比于其他移动框架它更进了一步，因为他对（同域的）所有链接都采用Ajax调用方式，从而实现漂亮的转场效果。基于此你可以将你的网页内容分离到许多页面来创建更大型的项目。
4.使用组件
链接和页面只是移动网页设计中一个很小的部分，APP程序（比如采用Object-C，C#，java等在Android或者IOS设备上创建的本地应用程序）快速增长的同时产生了丰富的控件和组件（例如菜单栏，列表等控件）使得开发者可以很方便地创建复杂的应用程序，这正是许多移动网页开发者第二个巨大的挑战——因为在原生的HTML里面并没有这些控件或者组件。针对这一问题，jQueryMobile当前正在创建一组非常有用的组件。以下是已经发布的组件：
Pages（页面）
Dialog boxes（对话框）
Toolbars（工具栏）
Buttons（按钮）
Content formatting（内容格式化）
Form elements（表单）
List views（列表）
只要你懂的html基础知识，你会发现添加这些组件并不困难，接下来我们看几个例子。
1>>为页面添加header和footer
上面的模版已经为你展示了如何轻松地创建工具栏（header，footer）。我们知道，在不同尺寸的屏幕上创建自适应工具栏通常都是非常难的活儿。而现在，jQueryMobile让你能够非常容易地创建一个带有一个居中标题和两个按钮并且自适应任何屏幕尺寸的header：
<div data-role="header" data-position="inline">
<a href="cancel.html" data-icon="delete">Cancel</a>
<h1>Edit Contact</h1>
<a href="save.html" data-icon="check">Save</a>
</div>
代码中a标签的顺序决定了按钮显示的位置。以上代码在几乎所有的设备中都能取得一致的显示效果。
header和footer同样可以被自定义为你想要的样式，比如改造一个导航条：你可以添加一些按钮在footer里面，从而导航到某一页面的不同部分：
<div data-role="navbar">
<ul>
<li><a href="#nav1" class="ui-btn-active">One</a></li>
<li><a href="#nav2">Two</a></li>
</ul>
</div><!-- /navbar -->
从这些代码你可以发现jQueryMobile不过是一些简单的HTML代码，导航条依然是div，而诸如ui-btn-active这个class可以使得你的按钮显示为被选择状态。
当你点击一个按钮并导航到该页面的另一个部分时，jQueryMobile会自动加上一个back按钮，以下的代码结构可以清晰地展现这一过程：
创建位置固定的header和footer
工具条固定在屏幕上方或者下方是一个很常见的界面设计，你可以为footer或者header添加 data-position="fixed"来实现这一点。
以下代码会强制footer/header固定在下方/上方：
看，现在不使用Objective-C ，你也可以创建一个易用的界面，是不是很不错？
2>>对话框
使用data-rel属性可以方便地创建弹出式对话框，以下代码将会以对话框形式加载dialog.html页面：
<a href="dialog.html" data-role="dialog">Open dialog</a>
由于对话框在jQueryMobile里面其实和其他page没有任何区别，因此你可以在对话框里添加任何类型的HTML代码，当然你也可以在同一个html文件里创建两个page，一个是主界面：
<div data-role="page">
<div data-role="header">
<h1>Dialog Box</h1>
</div><!-- /header -->
<div data-role="content">
<a href="#dialogPopUp" data-rel="dialog" data-role="button">Open dialog</a>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
另一个是对话框（上面的HREF属性便指向这个对话框page）：
<div data-role="page" id="dialogPopUp">
<div data-role="header">
<h1>Dialog Title</h1>
</div><!-- /header -->
<div data-role="content">
This is a dialog box
</div><!-- /content -->
<div data-role="footer">
<h4>Additional Footer information</h4>
</div><!-- /footer -->
</div><!-- /page -->
要注意以上代码中footer是可选的，但是你必须包括header，因为如果没有header，将无法显示自动生成的对话框关闭按钮。
3>>列表
当你有大量的数据条目需要显示时，列表是一个不错的选择。下面是使用ul时的HTML代码：
<ul>
<li><a href="#nav1">Henry VIII</a></li>
<li><a href="#nav1">George V</a></li>
<li><a href="#nav1">Prince of Wales</a></li>
<li><a href="#nav1">Elizabeth I</a></li>
<li><a href="#nav1">Elizabeth II</a></li>
</ul>
在jQueryMobile你可以通过data-role="listview"来将一个普通的列表转换成一个非常华丽如同本地APP一般的列表样式：
<ul data-role="listview">
<li><a href="#nav1">Henry VIII</a></li>
<li><a href="#nav1">George V</a></li>
<li><a href="#nav1">Prince of Wales</a></li>
<li><a href="#nav1">Elizabeth I</a></li>
<li><a href="#nav1">Elizabeth II</a></li>
</ul>
就是这样，仅需要20个字母，你就搞定了这一切。
除此之外，jQueryMobile还为列表提供了一些增强的选项，以下代码将为列表添加分隔符（divider):
<ul data-role="listview" data-dividertheme="d">
<li data-role="list-divider">Royal Family</li>
<li><a href="#home">Henry VIII</a></li>
<li><a href="#home">George V</a></li>
<li><a href="#home">Prince of Wales</a></li>
<li><a href="#home">Elizabeth I</a></li>
<li><a href="#home">Elizabeth II</a></li>
<li data-role="list-divider">Prime Ministers</li>
<li><a href="#home">Winston Churchill</a></li>
<li><a href="#home">Tony Blare</a></li>
<li><a href="#home">David Cameron</a></li>
</ul>
如上面的代码所示，为li元素添加data-role="list-divider"即可实现分隔符的效果。
你还可以为列表添加小气泡来展示一些附加数据（本例展示了英国皇室的统治时间）：
<ul data-role="listview" style="margin-top: 0;">
<li><a href="#nav1">Henry VIII <span class="ui-li-count">Reign 37 Years</span></a></li>
<li><a href="#nav1">George V <span class="ui-li-count">Reign 25 Years</span></a></li>
<li><a href="#nav1">Prince of Wales <span class="ui-li-count">N/A</span></a></li>
<li><a href="#nav1">Elizabeth I <span class="ui-li-count">Reign 44 Years</span></a></li>
<li><a href="#nav1">Elizabeth II<span class="ui-li-count">Reign since 1952</span></a></li>
</ul>
下面是一个更加复杂的例子，列表中包含了链接，图片，文本：
在你需要展现富文本时这种列表尤为有用，比如显示一个包含照片，名字，平均分等信息的学生名单。
最后：部署你的jQueryMobile站点
当你完成了开发，最后一步当然是展示你的成果啦！
到现目前为止，jQueryMobile都只是包含了一些HTML，CSS，javascript文件罢了，部署方式与一般的HTML站点无异。用FTP（或者其他你喜欢的方式）上传到你的web服务器就可以了，当然，你要确保你上传了所有用到的文件。
此时已经大功告成，你就可以用你的移动设备访问站点啦！
使用jQueryMobile的目标群是移动设备用户，因此你可以考虑为你的网站创建两个版本，一个为桌面用户准备，另一个则为移动用户（准备比如主站为http://www.zhuzhan.com，移动站位 :http://www.yidong.com）。
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
还没有结束：下面呢是我的笔记，分享给大家，当然是JqueryMobile的啦。一些常用的组件和属性，以实例和代码的形式展示给大家，希望对想了解JqueryMobile的朋友有帮助。不多说了，先给个图看一下：
还犹豫什么，想学习就点击这里：http://files.cnblogs.com/itxiaoyan2013/JqueryMObile.zip这是我的劳动成果，免费分享给大家。。。
随着这种需求的日益增长，越来越多的开发者开始关注移动开发工具和开发库的开发了，他们试图帮助移动开发者扫平实现梦想的障碍。
虽然这套工具的开发目前尚不成熟，但是HTML5的出现让大家看到了移动Web开发的光明前景，它让用户摆脱了对native软件的依赖。
首先，web是完全开放的，它不用受到App Store的协议限制。
其次，程序开发人员能够获得100%的收益。当然，这也意味着必须找到一种新的获得收益的方式，这一点并不简单。但是，一旦找到了合适的方法，程序员就不用再将自己30%的收益拱手让给Apple了。
第三，HTML5变得越来越强大了，功能也变得更加丰富了。最新的HTML5版本已经能够支持客户端在本地保存数据了，目前基本能够替代native app的功能。换句话说，浏览器已经基本能够取代native apps的地位了。
第四点，HTML5 apps不与具体设备绑定。虽然目前大部分的宣传还是围绕着Apple的iPhone，但是HTML5 apps是比较容易迁移到其他平台上的。虽然可能还没简单到按下一个按钮就完成平台的迁移，但是起码和Objective C转换为Java的工作比起来，还是简单许多的。
当然，HTML5也不是万能的。Web apps最大的缺陷就是对网络连接的依赖。它确实不如native apps响应及时，而native app的开发者常常在讨论微秒级的延迟是否会影响用户的体验。游戏开发者在使用JavaScript编程前需要再三权衡一下。
目前最大的限制可能就是工具本身的开发。Apple的开发工具能够看到native apps的结构，而移动浏览器却很难深入了解上面运行的应用程序的代码结构。现在已经有一些开发工具和开发库来帮助程序员简化web开发的难度。下面介绍 一些移动web开发中著名的相关项目。
移动web开发工具：ChocolateChip-UI（下载）
由于移动设备上的屏幕通常都比较小，因此为移动设备设计一个有效的UI显得尤为重要。Enter Robert Biggs是一个来自Northern California的Web程序员，他开发的ChocolateChip-UI成为使用HTML开发移动界面的优秀示例。
开发中使用的WAML（Web Application Markup Language）是基于HTML5封装的编程语言。使用WAML提供的标签（如<slider>或是<stack>）能够极大 地简化开发者的工作。可以在JavaScript中使用WAML并在支持HTML5的智能手机上运行。
程序员可以将HTML、CSS、JavaScript和WAML组合起来，只需指定好ChocolateChip-UI的翻译进程即可。
虽然这种做法并不完美，但这已经足够好用了。我之前曾用过其他的移动开发工具，他们都不能很好地封装在JavaScript中。
ChocolateChip-UI已经基本将所有的WAML提供的组件都封装好了，效果几乎与标准的iPhone UI相当。它甚至还包括了一个额外的删除列表，用户通过点击鼠标就能将组件从UI上删除。
移动Web开发工具：Mobl（下载）
JavaScript使用起来不算太简单，而Mobl就 是用来简化JavaScript的开发的。Mobl是专门用于Webkit浏览器上应用开发的框架。它不使用HTML、JavaScript或是CSS编 写程序，而是直接使用Mobl编程，然后通过Mobl编译器将它转换为适合在移动浏览器上运行的HTML、JavaScript和CSS语言。
Mobl......余下全文>>
我没做过mobile的开发 但是做过不少WEB的前端开发
用JQ的话 不说其他的 你至少先熟悉他 想要尽快掌握那你先把JQ的api文档先看个十来遍吧 ；
边看边写些DEMO相信你会很快上手。当然前提是有一点JS和CSS的基础。
用户评论