popupWin 属性及用法介绍 ASP.NET控件,仿QQ,msn右下角弹出窗口

最新推荐文章于 2015-10-20 08:29:50 发布

蒙F-IT行者

最新推荐文章于 2015-10-20 08:29:50 发布

阅读量762

点赞数

分类专栏： .net

.net 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、基本说明：

此弹出框控件是可像MSN一样的那种消息弹出提示框效果，此控件支持多种弹出效果，同时也可以设置钩子等，以下将为大家介绍相关的用法

二、属性说明：

基本控件属性：

ActionType:动作类型(点击连接后)，返回PopupAction枚举。(注意：如果要使用相关的点击事件，如 OnLinkClicked 和 OnPopupClosed，此处必须设为 RaiseEvents )
Text:设置或获取新窗口里要显示的文本
Link:设置或获取点击连接时打开的地址或者js脚本
LinkTarget:设置或获取连接打开的目标方式
ColorStyle:设置或获取颜色样式，返回PopupColorStyle枚举
Message:设置或获取弹出窗口显示的信息
Title:设置或获取弹出窗口和新窗口的标题
GradientLight:设置或获取亮度的颜色
GradientDark:设置或获取暗度的颜色(在Mozilla里即背景色)
TextColor:设置或获取文本颜色
LightShadow:设置或获取亮度阴影的颜色
DarkShadow:设置或获取暗度阴影的颜色
Shadow:设置或获取阴影颜色
DockMode:设置或获取弹出窗口的收缩状态，返回PopupDocking枚举
OffsetX:设置或获取X轴的偏移坐标（从左或右）
OffsetY:设置或获取Y轴的偏移坐标（从底部）
HideAfter:设置或获取窗口显示的时间，默认为500毫秒（-1为无限时间）
PopupSpeed:设置或获取弹出的速度，默认为20
ShowAfter:设置或获取显示弹出窗口之前的延迟时间，默认为1000毫秒
AutoShow:页面加载时自动显示弹出窗口（在设置的ShowAfter属性之后）
DragDrop:设置或获取是否允许拖动弹出窗口
WindowSize:设置或获取打开窗口大小
WindowScroll:设置或获取新窗口是否允许滚动条
ShowLink:是否在弹出窗口中显示连接和启用动作

钩子控件属性：

ChangeTexts:是否把弹出窗口里的文本替换为新的文本，默认为false
NewMessage:新的信息文本
NewTitle:新的弹出窗口标题
NewText:在新窗口里显示的新文本
HandledEvent:JavaScript事件句柄，默认为 onclick
PopupToShow:事件发生时显示弹出窗口控件，即要关联的PopupWin的ID
LinkedControl:触发弹出窗口显示事件的元素，输入元素ID即可
PopupToShowIsMP:PopupToShow的元素是否要使用母板页处理，如使用了母板页，同时所关联的控件是服务器端运行的，则必须要设置此项，默认为False
LinkedControlIsMP:LinkedControl的元素是否要使用母板页处理，如使用了母板页，同时所关联的控件是服务器端运行的，则必须要设置此项，默认为False
ContentPlaceHolderID:当前所在母板的ContentPlaceHolderID，如果没使用母板页，则不用设置

三、使用说明：

1.基本运用：

基本控件使用 PopupWin:popupwin 标记调用，以下是相关的代码：
前台HTML代码：

<!--在页面顶部添加控件的引用-->
<%@ Register Assembly="Winson.Framework" Namespace="Winson.Framework.Controls" TagPrefix="PopupWin" %>
 
<!--在页面任意位置添加控件代码-->
<PopupWin:popupwin id="popupWin" 
        style="z-index: 105;left: 296px; position: absolute;top: 528px" runat="server" 
        width="230px" height="100px" 
        windowsize="300, 200" windowscroll="False" 
        dockmode="BottomLeft" colorstyle="Blue" 
        gradientdark="210, 200, 220"
        textcolor="0, 0, 3" shadow="125, 90, 160" 
        lightshadow="185, 170, 200" darkshadow="128, 0, 102"
        visible="False" showlink="True" offsetx="150" 
        ActionType="RaiseEvents" 
        OnLinkClicked="popupWin_LinkClick">
</PopupWin:popupwin>
 
<!--放置一个按钮来触发-->
<asp:Button ID="btnPopup" runat="server" Text="显示弹出窗" OnClick="btnPopup_Click"></asp:Button>

后台服务器代码：

//按钮事件
protected void btnPopup_Click(object sender, EventArgs e)
{
    //设置自动隐藏时间
    popupWin.HideAfter = (sender == null) ? -1 : 5000;
    popupWin.Visible = true;
    popupWin.Title = textTitle.Text;
    popupWin.Message = textMsg.Text;
    popupWin.Text = textFull.Text;
    popupWin.DragDrop = true;
    //设置显示的位置,在屏幕底部左边
    popupWin.DockMode = PopupDocking.BottomLeft;
    //设置弹出框的颜色
    popupWin.ColorStyle = PopupColorStyle.Blue;
}
 
//设置点击弹出框里连接后的事件
protected void popupWin_LinkClick(object sender, System.EventArgs e)
{
    dialog = new Dialog(this);
    dialog.ShowMsgBox("Hey ! 你点击第一个弹出窗口!!");
}

2.高级运用：(钩子的使用)

利用钩子,可以实现AJAX的无刷新效果。要使用钩子，需使用 PopupWin:popupwinanchor 标记调用，然后指定此钩子所关联的 PopupWin 控件的ID，同时还要指定触发此 PopupWin 控件的页面元素，输入元素ID即可，元素触发事件可以通过设置 HandledEvent 属性来完成，如以下代码没设置HandledEvent属性，则默认为 onclick 事件，因此当点击了button后，弹出窗口即被触发了。以下是相关的代码：
前台HTML代码：

</pre><pre name="code" class="csharp"><!--被钩子绑定的元素，点击后即可通过钩子触发PopupWin控件了-->
<Button ID="btnShow" >  显  示  </Button>
 
<!--放置PopupWin控件-->
<PopupWin:popupwin id="popupTest" title="第一个标题" runat="server" 
    text="在新窗口的第一个文本"  message="第一个信息" dockmode="BottomLeft" 
    colorstyle="Violet" Height="107px" Width="235px" autoshow="False">
</PopupWin:popupwin>
 
<!--为以上PopupWin控件放置一个钩子，因为要在母板里使用,所以关联的元素ID也要加上母板ID-->
 <PopupWin:popupwinanchor id="showTest" runat="server" 
    linkedcontrol="btnShow" 
    popuptoshow="ctl00_ContentPlaceHolder1_popupTest" 
    newmessage="新的信息"
    newtext='可以在新窗口里显示一段很长文本信息。点击“显示弹出窗”按钮以显示弹出窗口效果，２'
    newtitle='新标题' changetexts="True">
</PopupWin:popupwinanchor>

使用钩子后，只需设置好HTML代码即可，不需服务器端代码了。

四、效果演示：

1.基本运用:
以下只放出核心代码,其余的请大家自行查看此页面的源码吧:
前台HTML代码:

<%--放置控件等待调用--%>
 
<PopupWin:popupwin id="popupWin" 
        runat="server" 
        width="230px" height="100px" 
        windowsize="300, 200" windowscroll="False" 
        dockmode="BottomLeft" colorstyle="Blue" 
        gradientdark="210, 200, 220"
        textcolor="0, 0, 3" shadow="125, 90, 160" 
        lightshadow="185, 170, 200" darkshadow="128, 0, 102"
        visible="False" showlink="True" offsetx="150" 
        ActionType="RaiseEvents" 
        OnLinkClicked="popupWin_LinkClick">
</PopupWin:popupwin>
 
 <PopupWin:popupwin id="popupWin2" 
        title="Second window"  runat="server" 
        text="新窗口中显示的文本. <br><b>此文本来自第二个窗口</b>"
        width="230px" dockmode="BottomRight" 
        gradientdark="225, 225, 208" textcolor="0, 50, 0"
        shadow="160, 180, 140" lightshadow="208, 221, 195" 
        darkshadow="50, 100, 50" visible="False"
        actiontype="RaiseEvents" gradientlight="255, 255, 255" 
        message="你可以开多个弹出窗口! <br/><br/><b>可以自定义颜色和结构</b>"
        hideafter="8000" offsety="130" 
        OnLinkClicked="popupWin2_LinkClick" 
        OnPopupClosed="popupWin2_PopupClose"> 
</PopupWin:popupwin>        
        
<PopupWin:popupwin  id="popupBob" 
        title="Visit bbs.szblogs.com" runat="server"
        Width="450px" Visible="False"
        linktarget="_blank" 
        Link="http://bbs.szblogs.com" 
        ActionType="OpenLink" DockMode="BottomLeft"
        Message="<img src="images/logo.gif" border="0" align="right"><p><b>Winson.Framework <span style="color:#00a000;">PROJECT</span></b><br><br>tohen博客</p>"
        LightShadow="255, 192, 128" Shadow="128, 64, 0" 
        TextColor="0, 0, 0" DarkShadow="0, 0, 0"
        GradientLight="251, 238, 187" 
        GradientDark="255, 153, 0">
</PopupWin:popupwin>

后台服务器端代码:

protected void btnPopup_Click(object sender, EventArgs e)
{
    popupWin.HideAfter = (sender == null) ? -1 : 5000;
    popupWin.Visible = true;
    popupWin.Title = textTitle.Text;
    popupWin.Message = textMsg.Text;
    popupWin.Text = textFull.Text;
    popupWin.DragDrop = (dropDrag.SelectedIndex == 0);
    switch (popDocking.SelectedIndex)
    {
        case 0: popupWin.DockMode = PopupDocking.BottomLeft; break;
        case 1: popupWin.DockMode = PopupDocking.BottomRight; break;
    }
    switch (clrStyle.SelectedIndex)
    {
        case 0: popupWin.ColorStyle = PopupColorStyle.Red; break;
        case 1: popupWin.ColorStyle = PopupColorStyle.Green; break;
        case 2: popupWin.ColorStyle = PopupColorStyle.Blue; break;
        case 3: popupWin.ColorStyle = PopupColorStyle.Violet; break;
    }
    popupWin2.Visible = false;
}
 
protected void btn4Ever_Click(object sender, System.EventArgs e)
{
    btnPopup_Click(null, null);
}
 
protected void btnTwo_Click(object sender, System.EventArgs e)
{
    btnPopup_Click(sender, e);
    popupWin2.DockMode = popupWin.DockMode;
    popupWin2.DragDrop = (dropDrag.SelectedIndex == 0);
    popupWin2.Visible = true;
}
 
protected void btnBob_Click(object sender, System.EventArgs e)
{
    popupBob.Visible = true;
    popupBob.DragDrop = (dropDrag.SelectedIndex == 0);
}

2.高级运用: (以钩子实现AJAX效果)
以下只放出核心代码,其余的请大家自行查看此页面的源码吧:
无刷新显示弹出窗口:

<!--被钩子绑定的元素，点击后即可通过钩子触发PopupWin控件了-->
<Button ID="btnShow" >  显  示  </Button>
 
<!--放置PopupWin控件-->
<PopupWin:popupwin id="popupTest" title="第一个标题" runat="server" 
    text="在新窗口的第一个文本"  message="第一个信息" dockmode="BottomLeft" 
    colorstyle="Violet" Height="107px" Width="235px" autoshow="False">
</PopupWin:popupwin>
 
<!--为以上PopupWin控件放置一个钩子，因为要在母板里使用,所以必须设置ContentPlaceHolderID属性
      但由于　linkedcontrol　关联的元素　btnShow　不是服务器端的，因此不需设置其　LinkedcontrolIsMp　属性
-->
 <PopupWin:popupwinanchor id="showTest" runat="server" 
    linkedcontrol="btnShow" 
    popuptoshow="popupTest" 
    newmessage="新的信息"
    newtext='可以在新窗口里显示一段很长文本信息。点击“显示弹出窗”按钮以显示弹出窗口效果'
    newtitle='新标题' changetexts="True">
    PopupToShowIsMP="True" 
    ContentPlaceHolderID="ContentPlaceHolder1"
</PopupWin:popupwinanchor>

从控件添加互动帮助:

第一个项: <asp:TextBox ID="textFirst" Class="input" runat="server" Width="330px"></asp:TextBox>
 
第二个项: <asp:TextBox ID="textSecond" Class="input" runat="server" Width="330px"></asp:TextBox>
 
<!--放置弹出框控件-->
 <PopupWin:popupwin id="popupHelp" title="互动帮助"         
        runat="server" gradientdark="143, 188, 139" gradientlight="200, 220, 200"
        textcolor="0, 0, 0" darkshadow="85, 107, 47" shadow="34, 139, 34" lightshadow="50, 155, 50"
        autoshow="False" hideafter="2000">
</PopupWin:popupwin>
 
 <!--放置弹出框控件的钩子,因为要在母板里使用,所以必须设置ContentPlaceHolderID属性-->         
 <PopupWin:popupwinanchor id="helpFirst" runat="server" popuptoshow="popupHelp" 
            linkedcontrol="ctl00_ContentPlaceHolder1_textFirst" handledevent="onfocus"
            newtitle="互动帮助" newtext="输入第一项<br/><br/>看看效果如何"
            newmessage="在这里输入第一项" changetexts="True"
            ContentPlaceHolderID="ContentPlaceHolder1"
            PopupToShowIsMP="True" LinkedControlIsMP="True">
</PopupWin:popupwinanchor>
 
 <PopupWin:popupwinanchor id="helpSecond" runat="server" popuptoshow="popupHelp" 
        linkedcontrol="ctl00_ContentPlaceHolder1_textSecond" handledevent="onfocus" 
        newtitle="互动帮助" newtext="输入第二项<br/><br/>看看效果如何."
        newmessage="这里输入第二项" changetexts="True"
        PopupToShowIsMP="True" LinkedControlIsMP="True"
        ContentPlaceHolderID="ContentPlaceHolder1">
</PopupWin:popupwinanchor>