easyUi的dialog的buttons通过数组定义之后,怎么设置样式
时间: 2024-03-19 11:44:05 浏览: 13
EasyUI 的 Dialog 组件中的 buttons 属性可以通过一个数组来定义多个按钮,每个按钮可以指定一个 handler 函数来处理点击事件,并且可以设置按钮的文本、图标等属性。如果需要设置按钮的样式,可以通过给每个按钮添加 CSS 类名来实现。
例如,可以在 buttons 数组中为每个按钮指定一个 CSS 类名,然后在 CSS 文件中定义对应的样式,示例代码如下:
```javascript
$('#myDialog').dialog({
buttons: [
{
text: '确定',
iconCls: 'icon-ok',
class: 'my-btn-class', // 添加自定义的 CSS 类名
handler: function() {
// 点击确定按钮的处理逻辑
}
},
{
text: '取消',
iconCls: 'icon-cancel',
class: 'my-btn-class', // 添加自定义的 CSS 类名
handler: function() {
// 点击取消按钮的处理逻辑
}
}
]
});
```
在 CSS 文件中定义 `my-btn-class` 类的样式:
```css
.my-btn-class {
background-color: #f0f0f0;
color: #000;
border: none;
border-radius: 2px;
padding: 5px 10px;
margin-right: 10px;
}
```
上述代码中,我给按钮添加了一个名为 `my-btn-class` 的 CSS 类名,并且在 CSS 文件中定义了对应的样式。这样就可以通过添加自定义的 CSS 类名来设置 Dialog 组件中的按钮样式了。