FineUI秘密花园(五) — 按钮控件
曾经最普普通通的按钮,在FineUI中摇身一变,法力无边,下面就来看看你曾经最熟悉的按钮?
按钮的状态与大小
按钮有启用/禁用,按下/正常几种状态,对应的属性分别为Enabled、EnablePress、Pressed三个属性。显示效果如图所示:
按钮有大中小三个尺寸,对应的属性为Size,显示效果如下所示:
按钮上的图标
按钮上的图标可以通过Icon(枚举类型,FineUI内置了很多图标)或者IconUrl两个属性来指定,图标的位置可以位于文本的上下左右四个位置,通过IconAlign属性来指定。
对于不显示文字的按钮,只需要指定Icon或者IconUrl属性,而不用指定Text属性即可。
按钮的点击事件
默认按钮的点击会触发一次AJAX的回发,典型的代码示例如下:
<ext:Button ID="btnServerClick" Text="服务器端事件" OnClick="btnServerClick_Click" runat="server">
</ext:Button>
protected void btnServerClick_Click(object sender, EventArgs e)
{// 事件处理
}
如果希望在客户端通过JavaScript代码来处理按钮的点击事件,需要设置EnablePostBack和OnClientClick两个属性,典型的代码如下所示:
<ext:Button ID="btnClientClick" Text="客户端事件" OnClientClick="alert('这是客户端事件');" EnablePostBack="false" runat="server">
</ext:Button>
有时,我们希望在服务器端通过C#代码注册客户端的事件脚本,典型代码如下所示:
<ext:Button ID="btnClientClick2" Text="服务器端生成的客户端事件" EnablePostBack="false" runat="server">
</ext:Button>
protected void Page_Load(object sender, EventArgs e)
{if (!IsPostBack){btnClientClick2.OnClientClick = Alert.GetShowInTopReference("这是在服务器端生成的客户端事件");}
}
按钮点击事件的一个隐藏特性
在使用ASP.NET的按钮编程时,我们经常需要额外处理一个情况:防止按钮的重复提交!
而这个特性已经内置在FineUI的按钮中,并且公开了一个属性DisableControlBeforePostBack(默认已经启用这个功能),是不是很方便,FineUI的细腻之处很多都体现在这些非常实用的功能上,后面你会在Grid、DropDownList、Window等很多控件上看到类似的手笔。
FineUI是怎么做到这一点的呢?
道理也非常简单,在Web.config中打开DebugMode参数,然后查看页面的HTML源代码,你会发现如下的脚本:
在AJAX的响应正文,会再次启用这个按钮:
客户端验证表单
按钮的一个主要用途是提交表单,以前我们或许要写一堆JavaScript代码了验证每个表单控件,然后在点击按钮回发之前弹出错误提示框。在FineUI的应用场景中,我们只需要为每个控件设置验证规则,然后设置按钮需要验证哪个表单或者哪些表单,这是通过ValidateForms属性来实现的。
如果需要验证多个表单,只需要将这些表单的ID以逗号分隔的形式设置到ValidateForms属性即可。可以查看这个示例页面。
<ext:Button ID="btnSubmitAll" Text="验证两个表单并提交" runat="server" OnClick="btnSubmitAll_Click"ValidateForms="extForm1,extForm2" />
在客户端验证失败时,会显示如下的提示框,并阻止本次表单提交:
如果你采用类似示例站点的IFrame框架结构,一定不要错过另一个属性ValidateTarget,它指定了错误提示框显示的位置,可以是本页面也可以是父页面。
带有菜单的按钮
按钮也可以拥有自己的菜单,这个示例的效果图如下所示:
ASPX页面的标签也非常干净利落:
1:<ext:Button ID="btnMenu" Text="中国科学技术大学" EnablePostBack="false" runat="server">
2: <Menu>
3: <ext:MenuHyperLink runat="server" Icon="TagGreen" Target="_blank" NavigateUrl="http://scms.ustc.edu.cn/"
4: Text="化学与材料科学学院">
5: </ext:MenuHyperLink>
6: <ext:MenuHyperLink runat="server" Icon="TagBlue" Target="_blank" NavigateUrl="http://business.ustc.edu.cn/zh_CN/"
7: Text="管理学院">
8: <Menu>
9: <ext:MenuHyperLink runat="server" Icon="TagPink" Target="_blank" NavigateUrl="http://is.ustc.edu.cn/"
10: Text="工商管理系">
11: </ext:MenuHyperLink>
12: <ext:MenuHyperLink runat="server" Icon="TagPurple" Target="_blank" NavigateUrl="http://stat.ustc.edu.cn/"
13: Text="统计与金融系">
14: </ext:MenuHyperLink>
15: </Menu>
16: </ext:MenuHyperLink>
17: </Menu>
18:</ext:Button>
工具栏中的按钮
按钮不仅可以单独使用,在表单中作为提交按钮,当放在工具栏中时,它摇身一变成了一个工具栏项。这样我们不仅可以设置按钮工具栏项的状态、添加点击事件、验证表单,而且还可以添加菜单,如下所示:
ASPX页面标签如下:
1:<ext:Panel ShowBorder="true" BodyPadding="5px" Height="300px" Width="450px" ShowHeader="false"
2: runat="server">
3: <Toolbars>
4: <ext:Toolbar runat="server">
5: <Items>
6: <ext:ToolbarText runat="server" Text="内联项:">
7: </ext:ToolbarText>
8: <ext:ToolbarSeparator runat="server">
9: </ext:ToolbarSeparator>
10: <ext:Button EnablePostBack="false" Text="中国科学技术大学" runat="server">
11: <Menu>
12: <ext:MenuHyperLink runat="server" Target="_blank" NavigateUrl="http://scms.ustc.edu.cn/"
13: Text="化学与材料科学学院">
14: </ext:MenuHyperLink>
15: <ext:MenuHyperLink runat="server" Target="_blank" NavigateUrl="http://business.ustc.edu.cn/zh_CN/"
16: Text="管理学院">
17: <Menu>
18: <ext:MenuHyperLink runat="server" Target="_blank" NavigateUrl="http://is.ustc.edu.cn/"
19: Text="工商管理系">
20: </ext:MenuHyperLink>
21: <ext:MenuHyperLink runat="server" Target="_blank" NavigateUrl="http://stat.ustc.edu.cn/"
22: Text="统计与金融系">
23: </ext:MenuHyperLink>
24: </Menu>
25: </ext:MenuHyperLink>
26: </Menu>
27: </ext:Button>
28: </Items>
29: </ext:Toolbar>
30: </Toolbars>
31:</ext:Panel>
点击按钮前的确认对话框
如果我们希望在点击按钮的时候首先弹出确认对话框(类似于JavaScript的window.confirm),在征得用户的同意后再触发按钮的默认行为,该怎么办?
FineUI也考虑到了这种需求,特意提供了如下几个属性:ConfirmText/ConfirmTitle/ConfirmIcon/ConfirmTarget
一个典型的应用是在数据展示表格的工具栏中,放置一个写着“删除选中项”的按钮,用来删除表格中选中的项。为了防止用户误操作,我们一般需要首先提醒用户这个操作是不可恢复的操作,是否确认删除。此时按钮的这些属性就派上用场了,请看这个示例。
小结
这一篇文章没有涉及很多应用技巧,不过介绍的知识都很实用,如果你打算或者正在使用FineUI,一定不要错过按钮的这些功能。
下一篇文章我们会对FineUI中基本的表单控件进行简单的学习。
FineUI秘密花园(五) — 按钮控件相关推荐
- 【DND图形库】五、按钮控件与音效
五.按钮控件与音效 (甲)按钮控件 在DND.h里能看到有哪些控件,基本上都以静态工厂模式创建: ///GUI/// #include "DNDGUI.h" //GUI 控件基类 ...
- Python tkinter - 第五章 按钮控件(Button)属性
第5章 按钮控件(Button) 5.1 按钮控件介绍 按钮是一个标准的tkinter控件.按钮上可以显示文字或者图片作为提示信息.文字只能使用一种字体以及颜色.按钮的最主要作用是被点击后,可以调用指 ...
- 【Qt】Qt 开发桌面程序 ( Qt 版本 5.14.2 | 编辑 Qt 桌面按钮控件 | 修改按钮文本 | 为按钮添加点击事件 | 系统调用 | 去掉系统调用命令窗口 )
文章目录 一.添加按钮控件 二.修改按钮文本 三.为按钮添加点击事件 ( 弹出对话框 ) 四.为按钮添加点击事件 ( 打开记事本 ) 五.为按钮添加点击事件 ( 打开计算器 ) 六.去掉系统调用时弹出 ...
- PyQt5 第五章 控件(一)
5.1 按钮控件 5.1.1 复选框 QCheckBox组件有俩状态:开和关,通常跟标签一起使用,用在激活和关闭一些选项的场景 程序展示 本例中,有一个能切换窗口标题的单选框 import sys f ...
- 按钮控件里面的间距问题
一个简单的按钮,里面可能不仅仅是显示文字,让我们去点击,一个按钮控件,子控件可能会有一个图片, 当然,也可能会包含一个图片和文字,里面还嵌套着内部间距等各种问题.(也要值得注意的的是这里的图片不是通过 ...
- 在access窗体中加图片_Access实战:一种不用按钮控件就能控制子窗体联动的方法...
近来宇哥潜心研究Access的设计,多有心得,在此共享一二.Access窗体若要进行控制,是需要通过按钮控件的,我经过自己探索,发现了一种更加简单的方法,也就是不用控件,通过直接点击窗体已有的表格,就 ...
- QT旋转按钮控件的实现
目录 一.实现需求:鼠标hover时旋转 二.实现方式:计时器做动画 三.代码实现 QT旋转按钮控件的实现 一.实现需求:鼠标hover时旋转 需求是:实现类似于WINDOWS下,某些软件窗口关闭按钮 ...
- Winform中实现自定义水晶按钮控件(附代码下载)
场景 效果 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 新建一个用户 ...
- C#窗体控件-按钮控件Button
按钮(Button)控件几乎存在于所有Windows对话框中,是Windows应用程序中最常用的控件之一.按钮控件允许用户通过单击来执行操作.按钮最重要的事件,也是最常用的事件就是Click.当用户单 ...
- VS2010/MFC编程入门之二十三(常用控件:按钮控件的编程实例)
上一节VS2010/MFC编程入门教程中鸡啄米讲了按钮控件Button.Radio Button和Check Box的基本用法,本节就继续讲按钮控件的内容,通过一个实例让大家更清楚按钮控件在实际的软件 ...
最新文章
- k8s aws 部署_如何在短短30分钟内使用CircleCI设置到AWS S3的持续部署
- 4、以太网基础知识——ICMP协议详解
- 1970.1.1这个特殊时间
- 批量删除redis键
- 6-2 多项式求值 (15 分)
- Android之使用AlertDialog类和AlertDialog.Builder类创建带取消,确定,中立的对话框
- redis客户端-服务端协议(RESP协议)
- 政企上云网络适配复杂,看华为云Stack有妙招
- POJ 2488 A Knight's Journey
- 一个火车上遇到的女孩所引发的联想
- 知网下载论文CAJ格式转为PDF格式
- Python 迷宫算法
- 从零开始设计RISC-V处理器——指令系统
- 北京市基本医疗保险定点医院名单
- 《让子弹飞》系列——去浦东的老三
- html 创建一个正方形,css 如何设置带有正方形项目的列表
- 本科计算机知识点,2018年电大本科计算机网考操作题题库重要知识点(6页)-原创力文档...
- CSS基础-05-颜色取值、标签居中(了解即可)、综合案例-新闻内容
- Navicat连接Linux-MySQL
- 关于window11下AE2022没有扩展选项或安装svga插件不现实的问题
热门文章
- 无线网络受限制或无连接
- apache伪静态设置
- Self-supervised Learning for Label Sparsity in Computational Drug Repositioning
- python定义int变量_Python变量以及常用数字类型(上)
- 高级运维需要掌握的技能知识点
- python 简单万年历
- 职场人压力多大?八成人因“事业无成”倍感压力,技术部门成“压力恐怖组织”
- window7安装hadoop2.7.5
- 【知识图谱】【 实践工具 】【Windows】- Protege - graphviz做图形可视化(三)
- 广州市南沙区人社领导来访霖珑云科考察调研,共同探索灵活用工新模式