Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Web App UI设计模式

From 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 10:21.
324 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×