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
EasyMvc入门教程-基本控件说明(1)按钮的更多相关文章
- EasyMvc入门教程-基本控件说明(8)提醒导航
提醒导航顾名思义就是提醒大家注意某些文字了..请看下面的例子: 实现代码如下: @Html.Q().BlockRemind().Text("我可以作为提醒使用") 有的同学会说:这 ...
- EasyMvc入门教程-基本控件说明(11)菜单导航
基本上,是个网站就会有菜单导航,目前流行的菜单是不是这样样子的? 似乎是bootstrap引领的风格,我们就用EasyMvc实现吧,上代码: @{ var data = new List<Men ...
- EasyMvc入门教程-基本控件说明(13)选项卡导航
选项卡Tab导航主要用于企业页面显示不同子类或者子页面的信息内容. 先来一个基本的使用例子:代码如下: @{ var data = new List<TabItem>() { new Ta ...
- EasyMvc入门教程-图形控件说明(21)线形图+柱状图+饼形图
本章将介绍一些基本但常用的图形:线型图,柱状图和饼形图. 以上三种图形对于的数据都是键值对数组,请参考第一个例子: @{ var data = new List<LineItem>(); ...
- EasyMvc入门教程-基本控件说明(4)折叠面板
折叠面板一般出现在管理后台,大家用的OutLook里就是用了折叠面板,样子大概是这样的: 把其中的内容替换成图标按钮,是不是就是我们常见的样子了?:)那么如何实现呢?请看例子: @{ var data ...
- EasyMvc入门教程-基本控件说明(6)进度条
进度条的发明是很牛逼的,就如12306采用了队列解决了系统崩溃的问题一样..:) 进度条大家都见过,那么我们先来实现一个简单的进度条,请看例子: @Html.Q().Progress().Value( ...
- EasyMvc入门教程-基本控件说明(12)栏目导航
栏目导航一般用来显示当前页面所在的模块层级位置关系,如下图所示: 当然也有前端网站作为小栏目导航,凡是没有绝对,只要不违和就好:),下面上代码: @{ var data = new List<N ...
- EasyMvc入门教程-基本控件说明(2)定时器
我们有时候希望系统能自动刷新后台数据或者做某个动作,那么定时器的作用就体现出来了. EasyMvc默认提供的服务器可以定时调前端方法与定时调后端方法,先看例子: 定时调客户端事件 实现代码: @Htm ...
- EasyMvc入门教程-基本控件说明(3)时间线
我们有时候经常看到如下的页面: 或者快递物流信息图标,那么利用EasyMvc如何实现呢?很简单,看下面的例子: @{ var data=new List<TimeLineItem>() { ...
随机推荐
- python 使用 vscode 调试
vscode安装python扩展,在vscode扩展管理器中搜索pyhon, 排名第一的就是我们需要下载的包—python.点击安装后重载窗体 点击调试–打开launch.json的按钮(那个小齿轮的 ...
- Form 组件动态绑定数据
1.Form 组件的作用: a.对用户提交的数据进行验证(form表单/ajax) b.保留用户上次输入的信息 c.可以生成html标签(input表单类的标签) 2..由于form组件中每个字段都是 ...
- CSS简单的四种引入方式
CSS一共有四种引入方式 (1)最简单的两种方式是直接在html标签里面引入,或者在html文件前面声明,以下是简单的代码示例 <!DOCTYPE html> <html lang= ...
- HDU3977 Evil teacher 求fib数列模p的最小循环节
In the math class, the evil teacher gave you one unprecedented problem! Here f(n) is the n-th fibona ...
- Spring Cloud 目录
Spring Cloud Eureka Spring Cloud Config Spring Cloud Feign Spring Cloud Hystrix Spring Cloud Ribbon ...
- 使用jsp读取TXT格式文件
<%@page import="java.io.BufferedReader"%> <%@page import="java.io.FileReader ...
- hdu 4289 网络流拆点,类似最小割(可做模板)邻接矩阵实现
Control Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Sub ...
- NSByteCountFormatter
可以将字节转化为我们需要的Kb或者m + (NSString *)stringFromByteCount:(long long)byteCount countStyle:(NSByteCountFor ...
- Ionic2 调用自定义插件之研究
cordova机制我在此就不提了,我们使用Typescript调用cordova plugin就如同调用第三方库是一个道理,那么这里就少不了书写declare文件,下面我就把几种封装调用的几种方式介绍 ...
- 勒索病毒 -- “永恒之蓝”NSA 武器免疫工具
“永恒之蓝”NSA 武器免疫工具 针对 445 端口:445端口是一个毁誉参半的端口,他和139端口一起是IPC$入侵的主要通道.有了它我们可以在局域网中轻松访问各种共享文件夹或共享打印机,但也正是因 ...