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

不同颜色的:

实现代码:

@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

EasyMvc入门教程-基本控件说明(1)按钮的更多相关文章

  1. EasyMvc入门教程-基本控件说明(8)提醒导航

    提醒导航顾名思义就是提醒大家注意某些文字了..请看下面的例子: 实现代码如下: @Html.Q().BlockRemind().Text("我可以作为提醒使用") 有的同学会说:这 ...

  2. EasyMvc入门教程-基本控件说明(11)菜单导航

    基本上,是个网站就会有菜单导航,目前流行的菜单是不是这样样子的? 似乎是bootstrap引领的风格,我们就用EasyMvc实现吧,上代码: @{ var data = new List<Men ...

  3. EasyMvc入门教程-基本控件说明(13)选项卡导航

    选项卡Tab导航主要用于企业页面显示不同子类或者子页面的信息内容. 先来一个基本的使用例子:代码如下: @{ var data = new List<TabItem>() { new Ta ...

  4. EasyMvc入门教程-图形控件说明(21)线形图+柱状图+饼形图

    本章将介绍一些基本但常用的图形:线型图,柱状图和饼形图. 以上三种图形对于的数据都是键值对数组,请参考第一个例子: @{ var data = new List<LineItem>(); ...

  5. EasyMvc入门教程-基本控件说明(4)折叠面板

    折叠面板一般出现在管理后台,大家用的OutLook里就是用了折叠面板,样子大概是这样的: 把其中的内容替换成图标按钮,是不是就是我们常见的样子了?:)那么如何实现呢?请看例子: @{ var data ...

  6. EasyMvc入门教程-基本控件说明(6)进度条

    进度条的发明是很牛逼的,就如12306采用了队列解决了系统崩溃的问题一样..:) 进度条大家都见过,那么我们先来实现一个简单的进度条,请看例子: @Html.Q().Progress().Value( ...

  7. EasyMvc入门教程-基本控件说明(12)栏目导航

    栏目导航一般用来显示当前页面所在的模块层级位置关系,如下图所示: 当然也有前端网站作为小栏目导航,凡是没有绝对,只要不违和就好:),下面上代码: @{ var data = new List<N ...

  8. EasyMvc入门教程-基本控件说明(2)定时器

    我们有时候希望系统能自动刷新后台数据或者做某个动作,那么定时器的作用就体现出来了. EasyMvc默认提供的服务器可以定时调前端方法与定时调后端方法,先看例子: 定时调客户端事件 实现代码: @Htm ...

  9. EasyMvc入门教程-基本控件说明(3)时间线

    我们有时候经常看到如下的页面: 或者快递物流信息图标,那么利用EasyMvc如何实现呢?很简单,看下面的例子: @{ var data=new List<TimeLineItem>() { ...

随机推荐

  1. PHP 获取客户端用户 IP 地址

    一般情况下可以使用以下代码获取到用户 IP 地址 echo 'User IP - '.$_SERVER['REMOTE_ADDR']; // 服务器在局域网的话,那么显示的则是内网IP .// 如果服 ...

  2. ActionContext和ServletActionContext小结

    1. ActionContext 在Struts2开发中,除了将请求参数自动设置到Action的字段中,我们往往也需要在Action里直接获取请求(Request)或会话(Session)的一些信息, ...

  3. sun.misc.BASE64Encoder()编码有换行符需要手动去除passwordEncode.replace("\n","");

    String passwordEncode = new BASE64Encoder().encodeBuffer(password.getBytes());//sun.misc.BASE64Encod ...

  4. vue - computed

    computed 的作用主要是对原数据进行改造输出.改造输出:包括格式的编辑,大小写转换,顺序重排,添加符号……. 一.格式化输出结果: 我们先来做个读出价格的例子:我们读书的原始数据是price:1 ...

  5. 【bzoj3771】Triple FFT+容斥原理

    题目描述 樵夫的每一把斧头都有一个价值,不同斧头的价值不同.总损失就是丢掉的斧头价值和. 他想对于每个可能的总损失,计算有几种可能的方案. 注意:如果水神拿走了两把斧头a和b,(a,b)和(b,a)视 ...

  6. spring+xml集成测试(准备数据和验证项的外部文件化)

    Spring的集成测试 单位测试和集成测试,我想大家都做过,一般情况下,一般逻辑且不需要操作数据库的情况比较适合于单位测试了.而对于一个数据库应用来说,集成测试可能比单元测试更重要,你可以想象,一个互 ...

  7. ionic2添加自定义文字

    上次更新到如何添加自定义图标,紧接着这次更新ionic2如何添加自定义字体 首先你要有自己的字体文件以.ttf结尾的文件字体 :推荐个字体文件网站(相对来说流氓软件比较少的)http://www.ps ...

  8. Linux服务器之SSH

    SSH 1.ssh是安全的加密协议,用于远程连接linux服务器. 2.ssh默认端口是22,安全协议版本ssh2. 3.ssh服务端主要包含两个服务功能ssh远程连接,sftp服务. 4.linux ...

  9. Mongoose 表实例

    /********** 用户表 BY Jaysir 2015.6.21 *********** *********** 可搜索以下关键词来查看未实现功能 *********** *********** ...

  10. sokect数据压缩实现

    上一篇文章说到了用Java Socket来传输对象,但是在有些情况下比如网络环境不好或者对象比较大的情况下需要把数据对象进行压缩然后在传输,此时就需要压缩这些对象流,此时就 可以GZIPInputSt ...