×
Namespaces

Variants
Actions

Web App UI设计模式

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata

代码示例
文章
max.chen 在 02 May 2011 创建
最后由 hamishwillee 在 09 May 2013 编辑

目前,在W3C的标准里还没有关于UI的标准,诺基亚还是推荐以下三个UI设计模式供开发者参考。

  • Accordion
  • Carousel
  • Tabs

下面就开发分别介绍这三个UI设计模式。

Contents

Accordion(折叠)

当列表中有多个内容简单的条目,而我们只需同时显示其中的一个的内容的时候,就可以选择Accordion模式。


UIdesingpattern 1.png

为了实现上图中所示的效果,需要在HTML页面中加入以下一段代码:

 <div id="accord1">
<div onclick="mwl.setGroupTarget('#accord1','#fold1', 'show-transition', 'hide-transition');return false;" class="sect">
Fold 1
</div>
<div id="fold1" class="show-transition fold">
This is the content of the first fold
</div>
<div onclick="mwl.setGroupTarget('#accord1','#fold2', 'show-transition', 'hide-transition');return false;" class="sect">
Fold 2
</div>
<div id="fold2" class="hide-transition fold">
This is the content of the second fold
</div>
<div onclick="mwl.setGroupTarget('#accord1','#fold3', 'show-transition', 'hide-transition');return false;" class="sect">
Fold 3
</div>
<div id="fold3" class="hide-transition fold">
This is the content of the third fold
</div>
</div>

这里我们用到了WML库中的setGroupTarget()方法。setGroupTarget()方法使一组中的一个节点与它的兄弟节点有着不同的表现。在这个例子中,有三个div,但同时只有一个div是显示状态,而其他的两个是隐藏的。具体的setGroupTarget()方法请参考Series 40 web apps: Developer’s guide and API


Carousel(跑马灯)

当我们有一系列图片或很长的文字需要展示的时候,就可以通过Carousel模式,以动画滚动的方式实现。

UIdesingpattern 2.png

在这个例子中,我们实现了两种方式,第一种是手动滚动方式,用户根据需要手动向前或向后翻动。

   <div id="btns">
<a href="#" onclick="mwl.iterateClass('#images', 'im', 'prev', 4, false, null);">Prev</a>
<a href="#" onclick="mwl.iterateClass('#images', 'im', 'next', 4, false, null);">Next</a>
</div>
<div class="container">
<div class="strip im0" id="images">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td id="t2">
<img src="img/ClownFish_sm.jpg" />
</td>
<td id="t1">
<img src="img/Cirques_sm.jpg" />
</td>
<td id="t3">
<img src="img/Stones_sm.jpg" />
</td>
<td id="t4">
<img src="img/Summit_sm.jpg" />
</td>
</tr>
</table>
</div>
</div>

这里我们用到了iterateClass()方法,iterateClass()方法可以遍历一组拥有共同前缀的节点。


第二种是自动滚动,通过定时器的使用,每隔一段时间进行自动滚动。

  <div id="slideshow">
<a onclick="mwl.setGroupNext('#images_forward_no_animation', 'show', 'hide', 'next');mwl.timer('timer1', 3000, 0, 'mwl.setGroupNext(\'#images_forward_no_animation\', \'show\', \'hide\', \'next\');');" href="#">Start (Changes every 3 seconds)</a><br/>
<a onclick="mwl.stopTimer('timer1');" href="#">Stop</a><br/>
<div id="images_forward_no_animation">
<div id="img1_next" class="hide">
<img src="img/chic1.jpg">
</div>
<div id="img2_next" class="show">
<img src="img/chic2.jpg">
</div>
<div id="img3_next" class="hide">
<img src="img/chic3.jpg">
</div>
</div>
</div>

这里我们用到了三个wml库的方法,分别是setGroupNext(),timer()和stopTimer()。

setGroupNext()方法可以向前或向后遍历一组节点,同时改变节点的class。 timer()和stopTimer()是wml库中的定时器方法。

Tabs(标签页)

Tabs与Accordion有些类似,当需要显示内容太多时,我们可以将它们进行分组,每次只显示其中的一部分。

UIdesingpattern 3.png

   <!-- START TAB SNIPPET -->
<!-- Tab Control -->
<table cellpadding="0" cellspacing="0" class="tab_table">
<tr>
<td id="tab_1" class="tab tab_selected" onclick="mwl.setGroupTarget('#tab_control_content', '#tab_1_content', 'show', 'hide');mwl.switchClass('#tab_1', 'tab_not_selected', 'tab_selected');mwl.switchClass('#tab_2', 'tab_selected', 'tab_not_selected');mwl.switchClass('#tab_3', 'tab_selected', 'tab_not_selected');">Tab 1</td>
<td id="tab_2" class="tab tab_not_selected" onclick="mwl.setGroupTarget('#tab_control_content', '#tab_2_content', 'show', 'hide');mwl.switchClass('#tab_1', 'tab_selected', 'tab_not_selected');mwl.switchClass('#tab_2', 'tab_not_selected', 'tab_selected');mwl.switchClass('#tab_3', 'tab_selected', 'tab_not_selected');">Tab 2</td>
<td id="tab_3" class="tab tab_not_selected" onclick="mwl.setGroupTarget('#tab_control_content', '#tab_3_content', 'show', 'hide');mwl.switchClass('#tab_1', 'tab_selected', 'tab_not_selected');mwl.switchClass('#tab_2', 'tab_selected', 'tab_not_selected');mwl.switchClass('#tab_3', 'tab_not_selected', 'tab_selected');">Tab 3</td>
</tr>
</table>
<!-- End Tab Control -->
 
<!-- Tab Control Content -->
<div id="tab_control_content">
<div id="tab_1_content" class="show">
Tab 1 Content
</div>
<div id="tab_2_content" class="hide">
Tab 2 Content
</div>
<div id="tab_3_content" class="hide">
Tab 3 Content
</div>
</div>
<!-- End Tab Control Content -->
<!-- END TAB SNIPPET -->

这个例子中除了第一节中用到的setGroupTarget()方法外,还用到了switchClass()方法。switchClass()方法的目的是移除一个节点的class同时添加另外一个class。


示例

HelloNews作为一个例子,展示了上面所述的三种UI模式。

UIdesingpattern 31.pngUIdesingpattern 32.pngUIdesingpattern 33.png

其中,第一个页面采用了走马灯的模式用来同时显示多条新闻,用户可以点击左右箭头切换新闻,对于触摸屏手机还可以直接在新闻上拖动进行切换。第二个页面采用了标签页模式,方便用户进行新闻频道的选择。第三个页面采用了折叠显示的模式,这样利用在同一个页面中显示更多的分类信息。

源代码: File:HelloNews.zip

相关链接

This page was last modified on 9 May 2013, at 13:21.
231 page views in the last 30 days.