×
Namespaces

Variants
Actions

MWL介绍

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

文章
max.chen 在 22 May 2011 创建
最后由 hamishwillee 在 09 May 2013 编辑

正如 Series 40 web apps平台介绍 一文中介绍的那样,大部分的运算工作是在Ovi浏览器的云服务器上完成的,其中包括与应用服务器的交互,JavaScript的解释以及对HTML,CSS的优化,从而大大的降低了流量同时使得它们更适合在Series40手机上显示。

MWL introduction 1.png

在Ovi浏览器客户端上也并不是完全舍弃的JavaScript,仍然有一个叫做MWL (Mobile Web Library)的JavaScript可供开发者使用,它是唯一运行在Ovi浏览器客户端上的JavaScript。

目前,MWL的主要功能包括两项:

  • 用户交互
  • 动画效果

下图中显示的是MWL的主要方法分类,从中可以看出MWL的方法主要覆盖了CSS操作,事件处理(支持触摸屏),计时器以及一些其他的方法。如果需要在客户端执行某些特定功能需要JavaScript,那么记住一定要从MWL中选取。具体的MWL文档可以参考Series 40 web apps: Developer’s guide and API(英文)

MWL introduction 2.png

这里我们以setGroupTarget()方法为例,简单介绍一下MWL库的用法。

<static> mwl.setGroupTarget(groupNode, targetNode, targetClass, defaultClass)

setGroupTarget()方法可以使一组节点中的一个与它的兄弟节点有着不同的表现。“groupNode”作为选择器选取一组节点,setGroupTarget()方法将“targetClass”应用到“targetNode”节点,同时其他所有的兄弟节点都将统一改变成“defaultClass”。方法具体的参数如下:


Parameter Type Description
groupNode String This is the selector of the group to be changed.


targetNode String The selector of the sibling element to add a class.


targetClass String The class to apply to the targetNode. The method removes this class from all other sibling nodes.


defaultClass String The class to apply to all other sibling nodes. This can be a class name or the prefix of a class name when appended with ‘*’.

在应用的时候,由于MWL库是常驻Ovi浏览器客户端的,所以我们不必显式的将它包含在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>

其结果如下图所示:

UIdesingpattern 1.png

相关链接

This page was last modified on 9 May 2013, at 13:21.
199 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.

×