使用jQuery Mobile快速开发手机站点
重:
- 文件以 <!DOCTYPE html> 宣告成 HTML5 的格式在 header 中,以 <link>, <script> 必要的 CSS & javascript library include data-role=”page”, data-role=”header”, data-role=”content”, data-role=”footer” 是 jQuery Mobile 所定的 tags。使用了 HTML5 custom data attributes 的 data-* 法, 分告 jQuery Mobile 哪是 header, content, footer。其中 page & content 是一定要有的,header & footer 自己的需要。
在器入案的位址,就可以看到下面面:
?


List View 可以算是手上常常使用的 UI,它的相如上。在 jQuery Mobile 要作的 UI 非常,只要用一般 HTML 常常使用的 ordered list (<ol> + <li>), 或是 unordered list (<ul> + <li>) ,在 <ul> 加上 data-role=”listview” 就可以了。像上的 UI ,它的 HTML 其非常:
重:
在 <ul> 上加上 data-role=”listview”data-inset=”true” 主要指定 listview 是不是出在文中。如果是的, jQuery Mobile 自你在最上面的 item 及最下面的 item 加上弧如果你希望 list 分成一 (有像 HTML 的 <optgroup> tag),你可以在 li 上面加上一 data-role=”list-divider” 的 item。如上面例中的 <li data-role=”list-divider”>Overview</li>
Advanced List View
List View 可以有很多化,的明可以考 jQuery Mobile 上的 List views 的明。介三常用的化:
- Nested list:只要 list 加上多的,jQuery Mobile 就自 list view 加上切上下的效果List views with thumbnails
在每 li 的一始加上一 <img> , jQuery Mobile 就自把它放在最左做。如:?
List views with Count Bubbles
在 <li> 面加上一 <span>,jQuery Mobile 把容包在 bubble 放在每 item 的最右,如:?
Navigation Bar
just <ul> & <li> 放在一 data-role=”navbar” 的 div 面,就可以上做出一 navigation bar, 可以更
重:
- jQuery Mobile 面原本就有很多建的 icon 可以使用,你可以用 data-icon=”xxx” icon 加到 navigation bar 面(有哪些 icon 可考 icon 列表),用 data-iconpos 指定 icon 的位置 (分成 left, right, top, bottom, notext, default 成 left)如果你想要的,只要稍微多做一些定,你也可以使用自己的 icon :)
Form
控的 UI (Touch input optimized controls)
了表在多控操作的 portable device 可以方便地操作,jQuery Mobile 自很多表的元素控好操作的形式(可考完整的 Form elements 列表)。如果不想用 jQuery Mobile 自你的 UI,可以在元件加上 data-role=”none”,便回到未化前的形式除了原本 Form 就有的 text, textarea, radio, checkbox, select menus, jQuery Mobile 也提供了 Slider, Flip, DatePicker (似乎仍在中)性化的表呈 (Dynamic form layout)
jQuery Mobile 了利用它的 app 可以 port 到不同的平台,不同的幕度做不同的 layout,其中一最明的例子就是表 (Form)。如果幕是窄的 (~480px),jQuery mobile label block element; 如果是的幕,看起就是 2-column layout。要利用方便的功能,你只要 data-role=”fieldcontain” 的 div 就可以了,如:?
Summary
jQuery Mobile 提供了多 mobile app 的工具。篇文章大家了 jQuery Mobile Progressive Enhancement 不同置提供不同工具的哲、知道 jQuery mobile 定的定程,也了 jQuery Mobile 所提供的工具,包括:list view , navigation bar, form elements 等等。希望能大家到 jQuery mobile 的便利性,我一起 “write less, do more”
Reference
How to Build an RSS Reader with jQuery Mobile
一篇容易懂的教。使用 jQuery mobile List view ,用 Yahoo! YQL 做一的 RSS readerjQuery Mobile Framework A Forms Tutorial
用一表的程式示 jQuery mobile 如何用在典型透 Ajax server 端程式的串接jQuery Mobile: What Can It Do for You?
very detailed explaination for different components of jQuery Mobile几个不错的 jQuery Mobile 页面设计及样例参考站点:
?
http://www.jqmgallery.com/
http://view.jquerymobile.com/master/demos/
?
附几个简单的例子:
?


