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>() { ...
随机推荐
- Mac OS使用brew安装memcached
1.查看安装信息 brew info memcached 显示如下: memcached: stable 1.5.9 (bottled) High performance, distributed m ...
- 3.创建应用服务(Application Services)
在Application项目中定义应用服务.首先定义Task的应用服务层的接口:
- 修改Linux内核参数 减少TIME-WAIT
编辑/etc/sysctl.conf文件 增加 net.ipv4.tcp_syncookies = 1net.ipv4.tcp_tw_reuse = 1net.ipv4.tcp_tw_recycle ...
- Codeforces 1158C Permutation recovery
https://codeforces.com/contest/1158/problem/C 题目 已知 $p_1, p_2, \dots, p_n$ 是 $1$ 到 $n$ 的一个排列. 给出关于这个 ...
- 个人环境搭建——版本控制SVN
版本控制SVN SVN服务器配置: 第一部分:svn服务器搭建(主要是四步走) 参考:http://www.son1c.cn/show/920.html 一,安装Subversion sudo apt ...
- 版本控制——hg教程
hg教程 引用来自官方网站的思维导图,来说明hg的使用规则:
- Codeforces Round #323 (Div. 2) A 水
A. Asphalting Roads time limit per test 1 second memory limit per test 256 megabytes input standard ...
- Brain Powerd计划
Brain Powerd这片子没有高清的版本,只有DVD..(我手上只有个DVDRip,X2字幕组的)同时字幕质量也不行. 开个坑用waifu2x压个好看一点(用DVDRip)的,码率大概是3.3M ...
- 1.docker学习
Docker —— 从入门到实践 http://udn.yyuap.com/doc/docker_practice/introduction/index.html 非常详细的Docker学习教程 ht ...
- Bzoj1195 [HNOI2006]最短母串 [AC自动机]
Time Limit: 10 Sec Memory Limit: 32 MBSubmit: 1304 Solved: 439 Description 给定n个字符串(S1,S2,„,Sn),要求找 ...