基本介绍

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:

@CHARSET "UTF-8";
.button1{
	border: 1px solid gray;
	background-color: mediumvioletred;
	height:100%;
}
.button2{
	border: 1px solid gray;
	background-color: mediumaquamarine;
	height:100%;
}
.button3{
	border: 1px solid gray;
	background-color: brown;
	height:100%;
}
.button4{
	border: 1px solid gray;
	background-color: cadetblue;
	height:100%;
}
.button5{
	border: 1px solid gray;
	background-color: chocolate;
	height:100%;
}
.button6{
	border: 1px solid gray;
	background-color: cornflowerblue;
	height:100%;
}
.button7{
	border: 1px solid gray;
	background-color: darkmagenta;
	height:100%;
}
.button8{
	border: 1px solid gray;
	background-color: mediumpurple;
	height:100%;
}
.button9{
	border: 1px solid gray;
	background-color: darkseagreen;
	height:100%;
}

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

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

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

.button_hover{
	border: 1px solid gray;
	background-color: seashell;
	cursor: pointer;
	height:100%;
}

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

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

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

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

详细属性说明

className

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

hoverClassName

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

技巧

技巧一：定制DIV的内容

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

// @Bind #button3.onCreateDom
!function(self, arg) {
	var div = self.getDom();
	$("<label>用户指南</label>").appendTo(div);
}

同时修改button3的css:

.button3{
	border: 1px solid gray;
	background-color: brown;
	height:100%;
	color: white;
	font-size: 20px;
	padding-top: 30px;
}

.button_hover{
	border: 1px solid gray;
	background-color: seashell;
	cursor: pointer;
	height:100%;
	color: black;
}

最终执行效果：

Dorado 9 : SimpleButton(DCUG)

基本介绍

详细属性说明

className

hoverClassName

mouseDownClassName

disabledClassName

toggledClassName

技巧

技巧一：定制DIV的内容

Attachments: