EasyMvc入门教程-基本控件说明（1）按钮

按钮是我们最常用的控件之一了，先看下我们提供的按钮风格：

不同颜色的：

实现代码：

@Html.Q().Button().Text("Danger").ColorDanger()
@Html.Q().Button().Text("Default").ColorDefault()
@Html.Q().Button().Text("Normal").ColorNormal()
@Html.Q().Button().Text("Warm").ColorWarm()
@Html.Q().Button().Text("Primary").ColorPrimary()

　　

不同尺寸的：

实现代码：

@Html.Q().Button().Text("超小按钮").SizeXSmall()
@Html.Q().Button().Text("小的按钮").SizeSmall()
@Html.Q().Button().Text("正常按钮").SizeDefault()
@Html.Q().Button().Text("我大的按钮").SizeLarge()

　　

圆角的：

实现代码：

@Html.Q().Button().Text("正常按钮")
@Html.Q().Button().Text("圆角按钮").Radius()

　　

被禁用的按钮：

@Html.Q().Button().Text("正常按钮")
@Html.Q().Button().Text("禁用按钮").Enable(false)

　　 

---

 

看完了以上的按钮外观和实现方式，有没有一种轻松的感觉呢？原来开发可以这么简单！

接下来将重点介绍下开发中常用的按钮事件，同样，为了保持简单，我们提供了常用的两种事件处理：单击触发客户端事件与单机触发服务端事件（带回调），具体看下文：

•  单击触发客户端事件

实现代码：

@Html.Q().Button().Text("点击我触发客户端事件").ClickClientEvent("clientEvent")
<script>function clientEvent() { layer.msg('我是客户端事件触发的'); }</script>

效果截图如下：　　

 　　

• 单击触发服务端事件

 

@Html.Q().Button().Text("点击我触发服务端事件").ClickServerEvent("/Home/GetTime", null, "callBack")
<script>function callBack(data) { layer.msg('服务器返回：<br>' + data); }</script>

　　效果截图如下：

 

---

 

总结：按钮的使用就简单介绍到这里，希望能激发您的软件开发热情，世界原来是可以简单的 ：）

 

更多使用示例请浏览在线示例：http://core.zwc.cn