按钮

addButton("name值", "按钮属性" [, "按钮类型"])

标识符：button

参数	含义	类型
name	name值	string
attr	按钮属性	array
ele_type	按钮类型	string

1.0.2版本开始支持

// 定义按钮属性
$btn = [
	"title" => "自定义按钮",
];

return ZBuilder::make("form")

->addButton("test", $btn)
->fetch();

![](https://box.kancloud.cn/49fe7fbf990145c130af8c2333f8923a_165x68.png)

默认情况下，按钮为`button`类型，也就是一个普通的按钮，不带任何事件，本身会有一个id，也就是上面的`name`参数。

比如上面的按钮，id默认为`test`，我们可以通过js来给它加事件，做我们想做的事情。

$("#test").click(function(){

alert("按钮被点击了");

});

### a标签按钮

如果有需要，我们可以把按钮改为a标签按钮，并添加按钮连接。

// 定义按钮属性
$btn = [

"title" => "自定义按钮",
"target" => "_blank",
"href" => url("add") // 此属性仅用于a标签按钮，button按钮不产生作用

];

return ZBuilder::make("form")

->addButton("test", $btn, "a")
->fetch();

>[info] 需要注意的是，`target`和`href`属性仅适用于a标签按钮。

### 添加图标

// 定义按钮属性
$btn = [

"title" => "自定义按钮",
"icon" => "fa fa-plus-circle",

];

return ZBuilder::make("form")

->addButton("test", $btn)
->fetch();

![](https://box.kancloud.cn/b408cf875a88aee4b5fbcda6627739f9_144x58.png)

也可以只用图标，不显示按钮标题。

// 定义按钮属性
$btn = [

"icon" => "fa fa-plus-circle",

];

return ZBuilder::make("form")

->addButton("test", $btn)
->fetch();

![](https://box.kancloud.cn/888c5b7846307a940f7b3a9c38024588_64x56.png)

### 更改按钮颜色

可以通过添加class属性，来改变按钮颜色。

// 定义按钮属性
$btn = [

"title" => "自定义按钮",
"icon" => "fa fa-plus-circle",
"class" => "btn-success",

];

return ZBuilder::make("form")

->addButton("test", $btn)
->fetch();

![](https://box.kancloud.cn/b74dbc12d5e72c970000da473c36fcdc_135x62.png)

### 禁用按钮

如果想默认禁用按钮，可以添加`disabled`。

// 定义按钮属性
$btn = [

"title" => "自定义按钮",
"icon" => "fa fa-plus-circle",
"class" => "btn-success",
"disabled" => "",

];

return ZBuilder::make("form")

->addButton("test", $btn)
->fetch();

![](https://box.kancloud.cn/ca4236a67deedc487276abae0f1e041b_135x61.png)

### 修改按钮id
默认情况下，按钮的id值是name参数的值，如果需要修改按钮的id，可以直接给id另外赋值。

// 定义按钮属性
$btn = [

"title" => "自定义按钮",
"id" => "newid",

];

return ZBuilder::make("form")

->addButton("test", $btn)
->fetch();

### 添加自定义属性

除了一些常规的参数，还可以给按钮添加一些自定义属性，但仅限于“data-”开头。

// 定义按钮属性
$btn = [

"title" => "自定义按钮",
"id" => "newid",
"data-url" => url("add")

];

return ZBuilder::make("form")

->addButton("test", $btn)
->fetch();

### 添加布局宽度

按钮也支持设定布局，但只能用`addFormItem`或`addFormItems`方法。

// 定义按钮属性
$btn = [

"title" => "自定义按钮",

];

return ZBuilder::make("form")

->addFormItem("button:4", "test", $btn)
->fetch();

![](https://box.kancloud.cn/888c5b7846307a940f7b3a9c38024588_64x56.png)