Skip to end of metadata
Go to start of metadata

基本介绍

SimpleButton继承AbstractButton,具有AbstractButton的基本特性,详情请参考:AbstractButton(DCUG) Control(DCUG)

这种类型的按钮仅由一个div构成,需要用户提供一组className,即可构成一个图标按钮。
用户需要提供所有的背景图片以及样式,如果不是需要特殊定制的按钮,建议使用dorado.widget.SimpleIconButton,只需要提供一个图标即可实现不错的效果。

下面我们以一个SimpleButton.view.xml范例说明基本用法。

设置View的布局类型为form布局,并且设置其cols为"100,100,100",rowHeight属性为"100".

并在View中添加9个SimpleButton.

前面介绍过SimpleButton按钮仅由一个div构成,我们结合Control的className特性为这些Button定义其className。

首先我们在SimpleButton.view.xml的同名目录中添加一个SimpleButton.css文件,并在其中添加如下的css:

 

之后分别设置每一个SimpleButton的className属性,如button3的className属性设置为button3:

设置好之后浏览这个范例:

如果我们还希望在鼠标经过的SimpleButton上有一个选中的效果,则可以在css文件中再添加一个配置:

 

并设置所有SimpleButton的hoverClassName的值为button_hover:

设置好之后再看页面的运行效果:

之后我们再定义每一个SimpleButton的onClick事件:

这样我们就基本完成了SimpleButton的基本开发。

详细属性说明

className

DIV的CSS风格(上面的范例已经介绍过)

hoverClassName

鼠标经过时DIV的CSS风格(上面的范例已经介绍过)

mouseDownClassName

参考JSDOC: http://bsdn.org/projects/dorado7/deploy/jsdoc/

disabledClassName

参考JSDOC: http://bsdn.org/projects/dorado7/deploy/jsdoc/

toggledClassName

参考JSDOC: http://bsdn.org/projects/dorado7/deploy/jsdoc/

技巧

技巧一:定制DIV的内容

本文提供的范例中DIV内容就是一个单一的DIV,如果您希望将DIV调整为一个更复杂的DOM结构,如图片加标题,则可以在其onCreateDom事件中实现,如我们定义button3的onCreateDom:

 

同时修改button3的css:

 

最终执行效果:


Labels
  • No labels