toutch jquery mobile
DESCRIPTION
Jquery MobileTRANSCRIPT
Winner of 2011 Open Source Mobile Winner of 2011 Open Source Mobile Winner of 2011 Open Source Mobile Winner of 2011 Open Source Mobile Toolkits and LibrariesToolkits and LibrariesToolkits and LibrariesToolkits and Libraries
一、版本历史
• RC3RC3RC3RC3 – November 13, 2011• RC2RC2RC2RC2 - October 19, 2011• RC1RC1RC1RC1 - August 29, 2011• Beta 3Beta 3Beta 3Beta 3 - September 8, 2011• Beta 2Beta 2Beta 2Beta 2 - August 3, 2011• Beta 1Beta 1Beta 1Beta 1 - June 20, 2011• Alpha 4.1Alpha 4.1Alpha 4.1Alpha 4.1 - April 7, 2011• Alpha 4Alpha 4Alpha 4Alpha 4 - March 31, 2011• Alpha 3Alpha 3Alpha 3Alpha 3 - February 4, 2011• Alpha 2Alpha 2Alpha 2Alpha 2 - November 21, 2010• Alpha 1Alpha 1Alpha 1Alpha 1 - October 16, 2010
二、特性
1. 跨设备
2. 跨平台
3. 跨浏览器
4. 其他特性
1.跨设备
2.跨平台
3.跨浏览器
......
http://jquerymobile.com/gbs/
9
4.其他特性
1) HTML5
2) Touch-optimized
3) jQuery and jQuery UI foundation
4) Lightweight
5) Progressive enhancement
6) Flexible
7) Themeable
10
1).HTML5
• http://en.wikipedia.org/wiki/HTML5• http://www.apple.com/html5/• http://html5demos.com/• http://www.w3schools.com/html5/default.asp
2).Touch-optimized
• 触摸优化,良好的手机用户体验
3).jQuery and jQuery UI foundation
• 为所有的主流移动操作系统平台提供了高度统一的UI框架
4).Lightweight
5).Progressive enhancement
• jQuery Mobile采用完全的渐进增强原则：通过一个全功能的HTML网页，和额外的JavaScript功能层，提供顶级的在线体验。
这意味着即使移动浏览器不支持JavaScript，基于jQuery Mobile的移动应用程序仍能正常的使用。
6).Flexible• 自动初始化通过使用 mobilize自动初始化页面上的所有jQuery部件。
• http://cdn.mobilizejs.com/docs/trunk/manual/development.html
mobilizejs
17
7).Themeable
• 强大的主题化框架 jQuery Mobile提供强大的主题化框架和UI接口。
• ddddata-theme="aata-theme="aata-theme="aata-theme="a““““
• http://jquerymobile.com/themeroller/
三、UI组件
1. Page templates2. Dialogs3. Header and footer bars4. Navigation bars5. Form elements6. Collapsible content blocks7. Lists8. …
1.Page templates• data-role="pagedata-role="pagedata-role="pagedata-role="page““““<!DOCTYPE html>
<html> <head> <title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script><script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<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 -->
</body></html>
http://jquerymobile.com/demos/1.0/docs/pages/index.html
2.Dialogs
• data-rel="dialog“
• data-transition="pop,slidedown,flip"
http://jquerymobile.com/demos/1.0/docs/pages/index.html
3.Header and footer bars
• data-role="headerdata-role="headerdata-role="headerdata-role="header““““
<div data-role="header" data-position="inline"> <a href="index.html" data-icon="delete">Cancel</a>
<h1>Edit Contact</h1> <a href="index.html" data-icon="check">Save</a> </div>
• http://jquerymobile.com/demos/1.0/docs/toolbars/docs-headers.html• http://jquerymobile.com/demos/1.0/docs/toolbars/docs-footers.html
4.Navigation bars
• data-role="data-role="data-role="data-role="navbarnavbarnavbarnavbar““““• 每行最多5555条
<div data-role="<div data-role="<div data-role="<div data-role="navbarnavbarnavbarnavbar">">">"> <ul> <li><a href="a.html" class="ui-btn-active">One</a></li> <li><a href="b.html">Two</a></li> </ul> </div><!-- /</div><!-- /</div><!-- /</div><!-- /navbarnavbarnavbarnavbar --> --> --> -->
http://jquerymobile.com/demos/1.0/docs/toolbars/docs-navbar.html
5.Form elements
• Tag:<form action="form.php" method="post"> ... </form>
• data-role="data-role="data-role="data-role="fieldcontainfieldcontainfieldcontainfieldcontain““““
<div data-role="fieldcontain"> <label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</div>
http://jquerymobile.com/demos/1.0/docs/forms/index.html
6.Collapsible content blocks
• twotwotwotwo-column (using the ui-grid-a class)• threethreethreethree-column (using the ui-grid-b class)• fourfourfourfour-column (using the ui-grid-c class)• fivefivefivefive-column (using the ui-grid-d class)
<div class="ui-grid-a"> <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div> <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div></div><!-- /grid-a -->
http://jquerymobile.com/demos/1.0/docs/content/content-collapsible.html
7.Lists
• data-role="data-role="data-role="data-role="listviewlistviewlistviewlistview““““
<ul data-role="listview" data-theme="g"><li><a href="acura.html">Acura</a></li><li><a href="audi.html">Audi</a></li><li><a href="bmw.html">BMW</a></li>
</ul>
http://jquerymobile.com/demos/1.0/docs/lists/index.html
四 、JQMPHP
五、DEMO
ka.games.cntv.cn
六、问题
?
THANKS