Dojo入门之(2)—Widget
使用窗口控件可以: (1)带来更好用户的体验: ·易用; ·易懂; ·操作更不容易出错; ·更加漂亮的界面; (2)让开发更加快捷: ·不需要javascript ·必须考虑其它(如跨浏览器) 二、Widget对象<button dojoType="Button" id="foo"> Click me </button> 这样的语句就能让你的网页上的按钮变成DOJO的Widget对象--漂亮的蓝色图形按钮! 但,这不是DOJO能为你做的一切。事实上,它已经为你准备好了在JavaScript中轻松使用的对象,就象这样操作它: var myButton = dojo.widget.byId("foo"); 三、粗览Widget的名字空间(NameSpace)默认使用DOJO的名字空间,你也可以使用自己的名字空间来实现自定义的Widget。看这个代码片: <img dojoType="acme:Image" /> 这儿使用了acme名字空间,由你自己定义的。那么,你需要按以下方式来组织你的目录: <root>/dojo <root>/acme/ <root>/acme/widget/Image.js <- 定义你的acme.widget.Image 窗口控件 当然,也可以使用 dojo.registerModulePath来设定模块的使用路径,使用dojo.registerNamespace来实现Widget选择。 四、定制Widget的外观很明显,你的程序可能不需要Widget的蓝色外观,换个色彩如何?或者:干脆换个图片? 改变DOJO的CSS 可以做到这一切。 以FloatingPanl(FloatingPane.html)为例,你可以在: root/dojo-
<div id="${this.widgetId}" dojoAttachEvent="onMouseDown" class="dojoFloatingPane">
<div dojoAttachPoint="titleBar" class="dojoFloatingPaneTitleBar" style="display:none"> <img dojoAttachPoint="titleBarIcon" class="dojoFloatingPaneTitleBarIcon"> <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>
在同一目录下,你可以看到对应的CSS,对着HTML更改它的内容吧,比如: dojoFloatingPaneTitleText { 不用改变源代码的CSS方式: 如果你不想改为DOJO源代码(我承认,我也不想),那么,在你的程序中直接重载它的CSS也行(CSS本就是可重叠的,对不?),就象这样: body .dojoFloatingPaneTitleText { 嗯,更多的更改? 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);} (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |