Dojo入门之(2)—Widget

前端之家收集整理的这篇文章主要介绍了Dojo入门之(2)—Widget前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

@H_404_3@

一、为什么要使用@H_404_3@Widget(窗口控件@H_404_3@)?

使用窗口控件可以@H_404_3@:

@H_404_3@(1)带来更好用户的体验@H_404_3@:

·易用;

·易懂@H_404_3@;

·操作更不容易出错;

·更加漂亮的界面;

@H_404_3@(2)让开发更加快捷:

·不需要@H_404_3@javascript

·必须考虑其它@H_404_3@(如跨浏览器@H_404_3@)

二、@H_404_3@Widget对象

@H_404_3@<button dojoType="Button" id="foo"> Click me </button>

这样的语句就能让你的网页上的按钮变成@H_404_3@DOJO@H_404_3@Widget对象@H_404_3@--漂亮的蓝色图形按钮!

但,这不是@H_404_3@DOJO能为你做的一切。事实上,它已经为你准备好了在@H_404_3@JavaScript中轻松使用的对象,就象这样操作它:

@H_404_3@var myButton = dojo.widget.byId("foo");

三、粗览@H_404_3@Widget的名字空间@H_404_3@(NameSpace)

默认使用@H_404_3@DOJO的名字空间,你也可以使用自己的名字空间来实现自定义@H_404_3@Widget。看这个代码片:

@H_404_3@<img dojoType="acme@H_404_3@:Image" />

这儿使用了@H_404_3@acme名字空间,由你自己定义的。那么,你需要按以下方式来组织你的目录:

@H_404_3@<root>/dojo

@H_404_3@<root>/acme/

@H_404_3@<root>/acme/widget@H_404_3@/Image.js <- 定义你的@H_404_3@acme.widget.Image 窗口控件

当然,也可以使用@H_404_3@ dojo.registerModulePath来设定模块的使用路径,使用@H_404_3@dojo.registerNamespace来实现@H_404_3@Widget选择。

四、定制@H_404_3@Widget的外观

很明显,你的程序可能不需要@H_404_3@Widget的蓝色外观,换个色彩如何?或者:干脆换个图片

改变@H_404_3@DOJO@H_404_3@CSS 可以做到这一切。

@H_404_3@FloatingPanl(FloatingPane.html)为例,你可以在@H_404_3@: root/dojo- 0.4.1 -ajax/src/widget/templates目录下找到这个@H_404_3@html文件代码如下:

@H_404_3@<div id="${this.widgetId}" dojoAttachEvent="onMouseDown" class="dojoFloatingPane">

<div dojoAttachP@H_404_3@oint="titleBar" class="dojoFloatingPaneTitleBar" style="display:none">

@H_404_3@ <img dojoAttachPoint@H_404_3@="titleBarIcon" class="dojoFloatingPaneTitleBarIcon">

@H_404_3@ <div dojoAttachPoint="closeAction" dojoAttachEvent="onClick:closeWindow"

class="dojoFloatingPaneCloseIcon"></div>

<div dojoAttachPoint="restoreAction" dojoAttachEvent="onClick:restoreWindow"

class="dojoFloatingPaneRestoreIcon"></div>

<div dojoAttachPoint="maximizeAction" dojoAttachEvent="onClick:maximizeWindow"

class="dojoFloatingPaneMaximizeIcon"></div>

<div dojoAttachPoint="minimizeAction" dojoAttachEvent="onClick:minimizeWindow"

class="dojoFloatingPaneMinimizeIcon"></div>

<div dojoAttachPoint="titleBarText" class="dojoFloatingPaneTitleText">${this.title}</div>

</div>

<div id="${this.widgetId}_container" dojoAttachPoint="containerNode" class="dojoFloatingPaneClient"></div>

<div dojoAttachPoint="resizeBar" class="dojoFloatingPaneResizebar" style="display:none"></div>

</div>

在同一目录下,你可以看到对应的@H_404_3@CSS,对着@H_404_3@HTML更改它的内容吧,比如:

dojoFloatingPaneTitleText@H_404_3@ {
float: left;
padding: 2px 4px 2px 2px;
white-space: nowrap;
color: CaptionText;
font: small-caption;
}

不用改变源代码CSS方式: 
   
如果你不想改为DOJO代码(我承认,我也不想),那么,在你的程序中直接重载它的CSS也行(CSS本就是可重叠的,对不?),就象这样: 
   

@H_404_3@body .dojoFloatingPaneTitleText {
color: blue;
font: 20pt ;
}

嗯,更多的更改?

@H_404_3@body .dojoFloatingPaneMinimizeIcon,body .dojoFloatingPaneMaximizeIcon,body .dojoFloatingPaneRestoreIcon,body .dojoFloatingPaneCloseIcon {float: left;}body .dojoFloatingPaneMinimizeIcon {background-image: url(/icons/myMinimize.gif);}body .dojoFloatingPaneMaximizeIcon {background-image: url(/icons/myMaximize.gif);}body .dojoFloatingPaneRestoreIcon {background-image: url(/icons/myPaneRestore.gif);}.dojoFloatingPaneCloseIcon {background-image: url(icons/myPaneClose.gif);}

猜你在找的Dojo相关文章