zoukankan      html  css  js  c++  java

  • popupWin 属性及用法介绍

    一、基本说明：

    此弹出框控件是可像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代码：

    <!--被钩子绑定的元素，点击后即可通过钩子触发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>

     popwin.rar
  • 相关阅读:
    windows 10 查看电池损耗情况
    pycharm 远程显示 matplotlib
    关联矩阵与邻接矩阵 2018-11-27
    Determinats(行列式) 2018-11-23
    Ablation study 2018-11-10
    ODBC，实现图片循环写入Oracle数据库
    c#与java之比较（转自Jack.Wang's home）
    java中移位操作
    如何自学java迅速成为java高手
    一点点学习思考
  • 原文地址：https://www.cnblogs.com/tohen/p/1714216.html
Copyright © 2011-2022 走看看