FineUI小技巧(4)关闭窗体那些事
前言
FineUI中的Window控件常用作选择、新增或编辑内容。而关闭Window控件却有很多技巧,了解这些技巧有助于项目的快速开发。
如何关闭Window控件
第一个问题就是如何关闭Window控件,最明显的方式就是右上角的关闭图标了。总的说来,有三种方式:
- ESC按键(在Window控件所在页面获取焦点的情况下,按下键盘的ESC将会关闭当前激活窗体)
- 窗体右上角的关闭图标
- 用户自定义的关闭按钮
前两种方式自不必说,那么如何自定义关闭按钮呢?有两种做法:
- 按钮禁用回发,在页面初始化时注册关闭脚本
1 <f:ButtonID="btnHideInClient"CssClass="inline"Text="隐藏窗体(客户端代码)"EnablePostBack="false" 2 runat="server"> 3 </f:Button>
1 protected void Page_Load(objectsender, EventArgs e)2 {3 if (!IsPostBack)4 {5 btnHideInClient.OnClientClick =Window2.GetHideReference();6 }7 }8
- 按钮回发,在回发事件中设置窗体Hidden属性,
1 <f:ButtonID="btnHideInServer"Text="隐藏窗体(服务端代码)"runat="server"OnClick="btnHideInServer_Click"> 2 </f:Button>
1 protected void btnHideInServer_Click(objectsender, EventArgs e)2 {3 Window2.Hidden = true;4 }
或者注册关闭脚本:
1 protected void btnHideInServer_Click(objectsender, EventArgs e)2 {3 PageContext.RegisterStartupScript(Window2.GetHideReference());4 }
当然,这里按钮是和Window控件在同样一个页面的。
对于另一种常见情况,也即启用IFrame的Window控件,位于IFrame页面内的按钮如何关闭父页面中的这个Window控件呢?
显然,我们无法在IFrame页面内获取Window控件的实例!
没关系,FineUI提供了ActiveWindow类来处理这个常见问题:
1 protected void btnSaveContinue_Click(objectsender, EventArgs e)2 {3 PageContext.RegisterStartupScript(ActiveWindow.GetHideReference());4 }
关闭窗体的方式
前面提到的关闭窗体,只是简单的关闭,并未做任何其他处理。其实FineUI提供了三种关闭窗体的方式:
- 直接关闭:也就是前面提到的 GetHideReferene 方法返回的脚本
- 关闭窗体,然后回发窗体所在的页面,触发Window控件的Close事件:可以使用内置的 GetHidePostBackReference 方法
- 关闭窗体,然后刷新窗体所在的页面:可以使用内置的 GetHideRefreshReference 方法
再回到前面介绍的"如何关闭窗体",显然前两种关闭方法(ESC,右上角关闭图标)无法使用 GetHide***Reference 方法,怎么办?
FineUI同时为Window控件提供了 CloseAction 属性,可能的值为 Hide,HidePostBack 和 HideRefresh,分别对应上述方法。
来看一个例子:
- 初始显示
- 点击右上角关闭图标,触发了Close事件
这个行为是由Window控件的CloseAction属性控制的,来看下控件标签:1 <f:WindowID="Window2"Width="650px"Height="300px"Icon="TagBlue"Title="窗体"Hidden="true" 2 EnableMaximize="true"EnableCollapse="true"runat="server"EnableResize="true" 3 IsModal="false"CloseAction="HidePostBack"OnClose="Window2_Close"Layout="Fit"> 4 </f:Window>
后台的事件处理代码:
1 protected void Window2_Close(objectsender, WindowCloseEventArgs e)2 {3 Alert.ShowInTop("窗体被关闭了。参数:" + (String.IsNullOrEmpty(e.CloseArgument) ? "无": e.CloseArgument));4 }
CloseAction无法定义返回参数,所以这里显示"无"!
- 点击页面上的"隐藏窗体,带回发参数",触发了Close 事件,此时的页面显示
这个按钮的响应脚本是在页面初始化时注册的,如下所示(注意参数是如何设进去的):1 protected void Page_Load(objectsender, EventArgs e)2 {3 if (!IsPostBack)4 {5 btnHideInClient2.OnClientClick = Window2.GetHidePostBackReference("btnHideInClient2");6 }7 }
同样,对于启用IFrame的Window控件,其IFrame内按钮的关闭窗体处理,对应于ActiveWindow的几个方法:
- ActiveWindow.GetHideReference
- ActiveWindow.GetHidePostBackReference
- ActiveWindow.GetHideRefreshReference
关闭窗体的确认对话框
这个特性可能很多人都不知道,不过存在很强的实用性。
简单描述:启用IFrame的Window控件,如果IFrame页面内任意表单字段发生改变,则在关闭窗体时弹出确认框。
目的是防止用户在输入表单内容后,还没来的及保存,一个误操作把弹出窗体关了。
- 页面初始显示
- 在"数字输入框"内输入任意值,然后点击右上角的关闭图标,弹出确认对话框
- 清空 "数字输入框"内的值(也即是还原到其初始状态),然后点击右上角的关闭图标,则直接关闭窗体
上述操作是由Window控件的 EnableConfirmOnClose 属性控制(默认为false),下面是这个Window实例的标签定义:
1 <f:WindowID="Window1"Hidden="true"EnableIFrame="true"runat="server"EnableConfirmOnClose="true" 2 EnableMaximize="true"EnableResize="true"Height="450px"Width="800px"Title="窗体一"> 3 </f:Window>
对于上述页面中的"关闭"按钮,行为和右上角的关闭图标一致,不过这种一致性也是认为控制的,来看看"关闭"按钮的脚本:
1 protected void Page_Load(objectsender, EventArgs e)2 {3 if (!IsPostBack)4 {5 btnClose.OnClientClick =ActiveWindow.GetConfirmHideReference();6 }7 }
本章小结
本篇文章介绍了三种关闭Window控件的方法(ESC、关闭图标、自定义),以及三种FineUI定义的处理方式(隐藏、隐藏后回发、隐藏后刷新)。对于IFrame内的关闭按钮,FineUI提供了ActiveWindow来生成关闭脚本。同时还介绍了一个FineUI内置的属性 EnableConfirmOnClose ,用来控制是否弹出关闭窗体的确认对话框。
源代码与在线示例
本系列所有文章的源代码均可自行下载:http://fineui.codeplex.com/
在线示例:
- http://fineui.com/demo/#/demo/window/window.aspx
- http://fineui.com/demo/#/demo/iframe/window.aspx
如果本文对你有所启发或者帮助,请猛击“好文要顶”,支持原创,支持三石!
24张专业版高清大图
《FineUI小技巧》系列文章目录
FineUI小技巧(4)关闭窗体那些事相关推荐
- FineUI小技巧(5)向子窗口传值,向父窗口传值
前言 FineUI中经常会用到启用IFrame的Window控件,这样有助于从物理上进行代码解耦和.IFrame的引入就会涉及传值问题,如何在父窗口和子窗口之间相互传值呢? 向子窗口传值 向子窗口传值 ...
- FineUI小技巧(3)表格导出与文件下载
需求描述 实际应用中,我们可能需要导出表格内容,或者在页面回发时根据用户权限下载文件(注意,这里的导出与下载,都是在后台进行的,和普通的一个链接下载文件不同). 点击按钮导出表格 由于FineUI 默 ...
- 电脑桌面归纳小窗口_电脑一分钟小技巧:如何将电脑设置为定时关机?
关注公众号,发现好教程 如何设置电脑设置定时关机呢? 哈哈哈,可能这个教程用处不大,不过每个教程都有它的用处,这个也算是教程哈!有些小伙伴可能需要这个教程!至于什么用处,我就不多说! 定时关机的设置方 ...
- win10去掉快捷方式小箭头_电脑一分钟小技巧:桌面快捷方式小箭头去除与恢复方法...
关注公众号,发现好技巧好教程 各位小伙伴们都知道电脑桌面上的软件都带有小箭头,我个人感觉不美观,那有没有什么办法去掉呢?答案是:有的,作者在这里教大家两种方法操作. 操作步骤如下: 方法一: 1.按住 ...
- html table边框细线,HTML小技巧将table边框改为细线
HTML制作新手在用TABLE表格时,会碰到如何改变边线粗线,因为默认的TABLE边线设置即使是1px 是很粗的.因此会使用其他一些方法来制作出细线边框,这里介绍一种利用CSS来实现细线的方法,很有效 ...
- #窗体整人小程序_Excel VBA和文件夹-1.8通过对话框灵活选定文件的小技巧
Excel VBA和文件夹-1.8通过对话框灵活选定文件的小技巧 前景提要 在之前,我们学习了如何通过对话框的形式来打开文件的方法,这种方法的好处就是两个字:灵活,我们不用在代码中强制指定必须在某个文 ...
- layer 关闭一个弹窗打不开新的的弹窗_电脑小技巧关闭FF弹窗
电脑小技巧--电脑做无线热点 电脑小技巧--U盘坏了如何修复 电脑小技巧--自动维护计划.任务关闭.禁用 电脑小技巧--预防U盘中毒 电脑小技巧--提高U盘读写速度 电脑小技巧--调整引导高级选项加快 ...
- 二级路由dhcp关闭连不上wifi_路由器的使用小技巧!
相信大家有看到男子改WiFi密码被隔壁邻居质疑的这条新闻吧,那么几天我告诉你几个路由器小技巧(基本路由器都可以使用哦) 如何管理路由器?(以我的设备为例) 可以在路由器下方寻找这个代码如图 然后连接上 ...
- java 获取 word 窗体域_办公小技巧:巧用窗体域 控制Word文档修改区
原标题:办公小技巧:巧用窗体域 控制Word文档修改区 有时我们发给别人的Word文档,仅仅需要对方修改其中的一小部分,比如房屋出租合同中的房屋承租人信息,采购清单中的数量信息等.这类文档中的其他信息 ...
最新文章
- vSphere开发指南1——vSphere Automation API
- java源码 1.8_Java源码下载和阅读(JDK1.8/Java 11)
- 防止程序多开的两种方法
- BugKuCTF 杂项 come_game
- [C/C++] C++声明和定义的区别
- c语言case多语句的取值,Switch Case语句中多个值匹配同一个代码块的写法
- linux编译动态库之fPIC
- The file contains a character that cannot be represented in the current code pag
- Weblogic负载均衡/Session复制之集群架构
- 华为拍月亮申请专利;魅族黄章回应李楠离职;GoLand 2019.2 Beta 发布 | 极客头条...
- 已知前序(先序)与中序输出后序
- Tables[0].Rows.count什么意思?
- Aseprite动画技巧
- 【Jmeter-脚本录制】
- 物联网基础:物联网卡介绍及卡号解码
- [CH5202]自然数拆分Lunatic版
- Pycharm补丁包使用教程
- 湖南对口计算机专业综合试题答案,湖南对口高考计算机专业综合试题汇总.doc...
- XSS漏洞的原理与测试解决方案笔记
- 剑指Offer--约瑟夫环问题
热门文章
- python tk下拉列表的state_Python tkinter之ComboBox(下拉框)的使用简介
- java list 最小值_Java 实例 – 查找 List 中的最大最小值
- linux 镜像文件名,linux – 使用wget镜像具有相同名称的路径和子文件夹的网站
- 阿里云Kubernetes实战2–搭建基础服务
- Dump File Bat
- ruby安装插件报错
- 【linux草鞋应用编程系列】_4_ 应用程序多线程
- 说说标准服务器架构(WWW+Image/CSS/JS+File+DB)
- Know about Oracle RAC Heartbeat
- IC设计通过system c 建模和 rtl级的有什么区别