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.跨平台
- 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
- 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><!-- /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
- 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 --> /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><!-- /grid-a --> 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
- 28. 六、问题 ?
- 29. THANKS