Toutch Jquery Mobile

1. Toutch JQuery mobile 何金龙 2011.12.30 jinlonghe@yahoo.cn

2. Winner of 2011 Open Source Mobile Toolkits and Libraries

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. 二、特性 1. 跨设备 2. 跨平台 3. 跨浏览器 4. 其他特性

5. 1.跨设备

6. 2.跨平台

7. 3.跨浏览器 ......

8. 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 9

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. 2).Touch-optimized • 触摸优化,良好的手机用户体验

12. 3).jQuery and jQuery UI foundation • 为所有的主流移动操作系统平台提供了高度统一的UI框架

13. 4).Lightweight

14. 5).Progressive enhancement • jQuery Mobile采用完全的渐进增强原则：通过一个全功能的HTML网页，和额外的 JavaScript功能层，提供顶级的在线体验。这意味着即使移动浏览器不支持 JavaScript，基于jQuery Mobile的移动应用程序仍能正常的使用。

15. 6).Flexible • 自动初始化通过使用 mobilize自动初始化页面上的所有jQuery部件。 • http://cdn.mobilizejs.com/docs/trunk/manual/development.html

16. mobilizejs

17. 7).Themeable • 强大的主题化框架 jQuery Mobile提供强大的主题化框架和UI接口。 • data-theme="a“ ata-theme="a“ • http://jquerymobile.com/themeroller/ 17

18. 三、UI组件 1. Page templates 2. Dialogs 3. Header and footer bars 4. Navigation bars 5. Form elements 6. Collapsible content blocks 7. Lists 8. …

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> <div data-role="content"> <p>Page content goes here.</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> </body> </html> http://jquerymobile.com/demos/1.0/docs/pages/index.html

20. 2.Dialogs • data-rel="dialog“ • data-transition="pop,slidedown,flip" http://jquerymobile.com/demos/1.0/docs/pages/index.html

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. 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 http://jquerymobile.com/demos/1.0/docs/toolbars/docs-navbar.html

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. 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>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> http://jquerymobile.com/demos/1.0/docs/content/content-collapsible.html

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. 四、JQMPHP

27. 五、DEMO ka.games.cntv.cn

28. 六、问题 ?

29. THANKS

Toutch Jquery Mobile

Toutch Jquery Mobile

Recommended

More Related Content

What's hot

What's hot(20)

Similar to Toutch Jquery Mobile

Similar to Toutch Jquery Mobile(20)

Recently uploaded

Recently uploaded(20)

Toutch Jquery Mobile