Toutch JQuery mobile          何金龙        2011.12.30      jinlonghe@yahoo.cn
Winner of 2011 Open Source Mobile      Toolkits and Libraries
一、版本历史•   RC3 – November 13, 2011•   RC2 - October 19, 2011•   RC1 - August 29, 2011•   Beta 3 - September 8, 2011•   Beta...
二、特性1.   跨设备2.   跨平台3.   跨浏览器4.   其他特性
1.跨设备
2.跨平台
3.跨浏览器 ......
http://jquerymobile.com/gbs/
4.其他特性1)   HTML52)   Touch-optimized3)   jQuery and jQuery UI foundation4)   Lightweight5)   Progressive enhancement6)   F...
1).HTML5•   http://en.wikipedia.org/wiki/HTML5•   http://www.apple.com/html5/•   http://html5demos.com/•   http://www.w3sc...
2).Touch-optimized• 触摸优化,良好的手机用户体验
3).jQuery and jQuery UI foundation• 为所有的主流移动操作系统平台提供了高  度统一的UI框架
4).Lightweight
5).Progressive enhancement• jQuery Mobile采用完全的渐进增强原则:通  过一个全功能的HTML网页,和额外的  JavaScript功能层,提供顶级的在线体验。  这意味着即使移动浏览器不支持  Java...
6).Flexible•   自动初始化通过使用 mobilize自动初始化页面上的所有jQuery部件。•   http://cdn.mobilizejs.com/docs/trunk/manual/development.html
mobilizejs
7).Themeable• 强大的主题化框架 jQuery Mobile提供强大  的主题化框架和UI接口。• data-theme="a“   ata-theme="a“• http://jquerymobile.com/themerolle...
三、UI组件1.   Page templates2.   Dialogs3.   Header and footer bars4.   Navigation bars5.   Form elements6.   Collapsible con...
1.Page templates• data-role="page“  data-role="page“<!DOCTYPE html><html>       <head>       <title>Page Title</title>    ...
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="header“  data-role="header“<div data-role="header" data-position="inline">    <a href...
4.Navigation bars• data-role="navbar“  data-role="navbar             navbar“• 每行最多5条   5<div data-role=" navbar">     data...
5.Form elements•   Tag:<form action="form.php" method="post"> ... </form>•   data-role="fieldcontain“    data-role="fieldc...
6.Collapsible content blocks•   two    two-column (using the ui-grid-a class)•   three    three-column (using the ui-grid-...
7.Lists• data-role="listview“  data-role="listview             listview“<ul data-role="listview" data-theme="g">    <li><a...
四 、JQMPHP
五、DEMOka.games.cntv.cn
六、问题?
THANKS
Upcoming SlideShare
Loading in …5
×

Toutch Jquery Mobile

1,858 views

Published on

Jquery Mobile

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,858
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Toutch Jquery Mobile

  1. 1. Toutch JQuery mobile 何金龙 2011.12.30 jinlonghe@yahoo.cn
  2. 2. Winner of 2011 Open Source Mobile Toolkits and Libraries
  3. 3. 一、版本历史• RC3 – November 13, 2011• RC2 - October 19, 2011• RC1 - August 29, 2011• Beta 3 - September 8, 2011• Beta 2 - August 3, 2011• Beta 1 - June 20, 2011• Alpha 4.1 - April 7, 2011• Alpha 4 - March 31, 2011• Alpha 3 - February 4, 2011• Alpha 2 - November 21, 2010• Alpha 1 - October 16, 2010
  4. 4. 二、特性1. 跨设备2. 跨平台3. 跨浏览器4. 其他特性
  5. 5. 1.跨设备
  6. 6. 2.跨平台
  7. 7. 3.跨浏览器 ......
  8. 8. http://jquerymobile.com/gbs/
  9. 9. 4.其他特性1) HTML52) Touch-optimized3) jQuery and jQuery UI foundation4) Lightweight5) Progressive enhancement6) Flexible7) Themeable 9
  10. 10. 1).HTML5• http://en.wikipedia.org/wiki/HTML5• http://www.apple.com/html5/• http://html5demos.com/• http://www.w3schools.com/html5/default.asp 10
  11. 11. 2).Touch-optimized• 触摸优化,良好的手机用户体验
  12. 12. 3).jQuery and jQuery UI foundation• 为所有的主流移动操作系统平台提供了高 度统一的UI框架
  13. 13. 4).Lightweight
  14. 14. 5).Progressive enhancement• jQuery Mobile采用完全的渐进增强原则:通 过一个全功能的HTML网页,和额外的 JavaScript功能层,提供顶级的在线体验。 这意味着即使移动浏览器不支持 JavaScript,基于jQuery Mobile的移动应用程 序仍能正常的使用。
  15. 15. 6).Flexible• 自动初始化通过使用 mobilize自动初始化页面上的所有jQuery部件。• http://cdn.mobilizejs.com/docs/trunk/manual/development.html
  16. 16. mobilizejs
  17. 17. 7).Themeable• 强大的主题化框架 jQuery Mobile提供强大 的主题化框架和UI接口。• data-theme="a“ ata-theme="a“• http://jquerymobile.com/themeroller/ 17
  18. 18. 三、UI组件1. Page templates2. Dialogs3. Header and footer bars4. Navigation bars5. Form elements6. Collapsible content blocks7. Lists8. …
  19. 19. 1.Page templates• data-role="page“ data-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
  20. 20. 2.Dialogs• data-rel="dialog“• data-transition="pop,slidedown,flip"http://jquerymobile.com/demos/1.0/docs/pages/index.html
  21. 21. 3.Header and footer bars• data-role="header“ data-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
  22. 22. 4.Navigation bars• data-role="navbar“ data-role="navbar navbar“• 每行最多5条 5<div data-role=" navbar"> data-role="navbar navbar"> <ul> <li><a href="a.html" class="ui-btn-active">One</a></li> <li><a href="b.html">Two</a></li> </ul></div><!-- /navbar --> /navbarhttp://jquerymobile.com/demos/1.0/docs/toolbars/docs-navbar.html
  23. 23. 5.Form elements• Tag:<form action="form.php" method="post"> ... </form>• data-role="fieldcontain“ data-role="fieldcontain fieldcontain“<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
  24. 24. 6.Collapsible content blocks• two two-column (using the ui-grid-a class)• three three-column (using the ui-grid-b class)• four four-column (using the ui-grid-c class)• five five-column (using the ui-grid-d class)<div class="ui-grid-a"> <div class="ui-block-a"><strong>Im Block A</strong> and text inside will wrap</div> <div class="ui-block-b"><strong>Im Block B</strong> and text inside will wrap</div></div><!-- /grid-a -->http://jquerymobile.com/demos/1.0/docs/content/content-collapsible.html
  25. 25. 7.Lists• data-role="listview“ data-role="listview listview“<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
  26. 26. 四 、JQMPHP
  27. 27. 五、DEMOka.games.cntv.cn
  28. 28. 六、问题?
  29. 29. THANKS

×