Toutch Jquery Mobile

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 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

二、特性
1. 跨设备
2. 跨平台
3. 跨浏览器
4. 其他特性

4.其他特性
1) HTML5
2) Touch-optimized
3) jQuery and jQuery UI foundation
4) Lightweight
5) Progressive enhancement
6) Flexible
7) Themeable

9

1).HTML5

• http://en.wikipedia.org/wiki/HTML5
• http://www.apple.com/html5/
• http://html5demos.com/
• http://www.w3schools.com/html5/default.asp
10

2).Touch-optimized
• 触摸优化,良好的手机用户体验

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

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

6).Flexible
• 自动初始化通过使用 mobilize自动初始化页面上的所有jQuery部件。

• http://cdn.mobilizejs.com/docs/trunk/manual/development.html

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

• http://jquerymobile.com/themeroller/

17

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

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

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="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="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

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

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

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

五、DEMO

ka.games.cntv.cn

Toutch Jquery Mobile

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Toutch Jquery Mobile

Semelhante a Toutch Jquery Mobile (20)

Último

Último (20)

Toutch Jquery Mobile