ASP.Net User Controls as Static or Movable PopUps
2007-03-30 21:06
507 查看
原文:http://www.codeproject.com/aspnet/ASPNet_User_Control_Pops.asp
翻译:叶晓丰 2007年3月30日 21:03:32
源代码下载:/Files/wzyexf/PopExample.zip
这个演示工程例子用了两种控件做为弹出式窗口.第一种类型是一个简单信息窗口,它能做为一个有效帮助显示来应用.这弹出式例子的帮助文本是从XML文档里导入,所以所有对帮助文本的修改可以在一个地方被修改,并可轻易进行程序化修改.第二种类型例子是关于从一个列表内,折叠元素到一个组内的控件.这个源元素列表初显示在主页面.按go按钮可以显示折叠弹出式窗口,这个窗口是可以移动的.
handled in the main page.
When the parent page of the popup control is loaded, the control must be created and hooked up to various events. The control is then added to the page in a defined area.
With the control created and loaded on the page, only the button click event needs to be assigned to make this control a popup.
The client-side javascript function showPop will take care of displaying and hiding the popup, and has various parameter settings to make the popup static or movable. These function parameters are defined as follows:
这些例子都是最简单的控件,用它来说明创建一个弹出窗口在web页中是非常容易的. 任意控件可以有效用于弹出,其困难且有效性是没有限制的.希望它对你有些用处.
翻译:叶晓丰 2007年3月30日 21:03:32
源代码下载:/Files/wzyexf/PopExample.zip
Introduction
This is a very simple example of how to make .ascx user controls into popup windows on a web app. Almost any user control can be modified to work as a popup, and there is very little code needed to create the effect. Most of the work is done in the javascript functions included in the source.介绍
这是一个非常简单的例子,在web应用中,该例子能使.ascx用户控制变成弹出式窗口.几乎任意的用户控件可以修改成弹出式窗口,并只需很少代码去实现该效果.大多数工作都被包括在源文件的javascript函数所完成.Pop Example Controls
The demo project uses two types of controls as popups. The first type is simply an informational window that can be used as a very effective help display. The text on these static popup examples is loaded from XML, so all modifications to the text can be done in one place, and can be very easily modified programmatically. The second type of example is a control developed to collapse items from a list into groups. The original item list is shown on the main page, and the Go button will display the collapse popup, which is movable.这个演示工程例子用了两种控件做为弹出式窗口.第一种类型是一个简单信息窗口,它能做为一个有效帮助显示来应用.这弹出式例子的帮助文本是从XML文档里导入,所以所有对帮助文本的修改可以在一个地方被修改,并可轻易进行程序化修改.第二种类型例子是关于从一个列表内,折叠元素到一个组内的控件.这个源元素列表初显示在主页面.按go按钮可以显示折叠弹出式窗口,这个窗口是可以移动的.
Coding Necessary for Creating PopUps
创建弹出式窗口必要编码
There is very little coding necessary to make a control into a popup. The only change to the control is simply defining the control as hidden with absolute positioning. The click event for the collapse control should also not bubble, as it will behandled in the main page.
只有很小代码去实现控件变成弹出窗口. 对控制的改变只是简单定义控件为隐藏并于绝对位置.折叠控件不应该是泡沫, 它应该在main主页里被处理
<div class="collapsePop" id="CollapseContainer" style="VISIBILITY: hidden; POSITION: absolute" onclick="event.cancelBubble = true;" runat="server"></div>
When the parent page of the popup control is loaded, the control must be created and hooked up to various events. The control is then added to the page in a defined area.
当弹出控件的父页面被载入时,控件必须被创立,且链接上对应的事件,然后控制被加到页面的预定义的地方.
cc = (CollapseControl)LoadControl("CollapseControl.ascx"); cc.ID = this.ID + "_cc_1"; cc.ColDoneClick += new EventHandler(cc_ColDoneClick); Control PopArea = Page.FindControl("PopArea"); Control cc1 = PopArea.FindControl(cc.ClientID); if (cc1 != null) PopArea.Controls.Remove(cc1); PopArea.Controls.Add(cc);
With the control created and loaded on the page, only the button click event needs to be assigned to make this control a popup.
当控件被创立并被导入页面时,只需对按钮赋于单击事件去实现这个控件的弹出功能
btnPop01.Attributes.Add("onclick", "return !showPop('" + cc.ClientID + "_CollapseContainer', '',event,false,-10,-30,true," + sbCtrlIDs+ ",false);");
The client-side javascript function showPop will take care of displaying and hiding the popup, and has various parameter settings to make the popup static or movable. These function parameters are defined as follows:
客户端的javascrip函数showPop将对弹出窗口的显示与隐藏作出实现,并有多种参数设置来实现静态或可移动弹出窗口.这个函数参数定义如下: pID: The ID of the Popup Control.(弹出控件的ID)
selID: A Selection control ID that obscures the popup (Only necessary for IE 6 bug fix).
eventObj: The event that fires the function.
bTimer: TRUEif popup is hidden on mouseout, otherwise
FALSE.
OffX: X Offset of popup display from event target.
OffY: Y Offset of popup display from event target.
bVAlign:
TRUEif popup should be aligned vertically, otherwise
FALSE.
ctrlIDs: Array of selection controls on page that may obscure the popup. (IE bug fix only).
bAnimate:
TRUEif popup should be displayed with rollout,
FALSEto display normal.
Final Notes
最后
These examples are very basic controls to show how easy it is to create a popup effect on a webpage. As any control can effectively be used as a popup, there is no limit to the possibilities for creating different and efficient effects. Hopefully you will find these useful.这些例子都是最简单的控件,用它来说明创建一个弹出窗口在web页中是非常容易的. 任意控件可以有效用于弹出,其困难且有效性是没有限制的.希望它对你有些用处.
相关文章推荐
- How to Add ASP.NET User Controls To Master Pages or Page Layouts
- Pass data from a ASP.NET page to ASCX user controls loaded dynamically
- Supporting Templates with ASP.NET User Controls
- How to: Create Instances of ASP.NET User Controls Programmatically
- ASP.NET User Controls and Custom Server Controls
- Creating a generic Web Parts for hosting ASP.NET User Controls
- Supporting Templates with ASP.NET User Controls
- Packaging ASP.NET User Controls into an Assembly and Reuse it Multiple Projects
- Building ASP.NET Server Controls
- Inside ASP.NET 2.0 – Controls Model
- ASP.NET Data Presentation Controls Essentials
- [导入]如何使用ASP.NET Mobile Controls开发Mobile Web应用
- asp.net当修改header时提示:The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)
- ASP.Net Mvc实现自定义User Identity用户身份识别系统(1)
- ASP.Net Mvc实现自定义User Identity用户身份识别系统(2)
- Asp.Net 可定制分页用户控件【转:http://www.tracefact.net/Asp-Net/Extensible-Paging-User-Control.aspx】
- ASP.Net User Control Best Practice
- 使用ModelBinder绑定IPrincipal (User)简化ASP.NET MVC单元测试
- [转]Implementing User Authentication in ASP.NET MVC 6
- Microsoft.AspNet.Identity.EntityFramework/IdentityUser.cs源码