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

一、基本说明：

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

转载于:https://www.cnblogs.com/hfzsjz/archive/2010/12/04/1896455.html