AlwaysVisibleControlExtender控件

功能:
         在页面上显示一个相对固定位置,随着窗口的滚动和大小改变,它会随着移动,可以用来做浮动广告等。 
 属性:
          TargetControlID :  目标控件ID,要浮动的控件。
     HorizontalOffset : 距离浏览器的水平边距,默认值0px。
     HorizontalSide : 水平停靠方向,默认值Left。。
     VerticalOffset : 距离浏览器的垂直边距,默认值0px。
     VerticalSide : 垂直停靠方向,默认值Top。
     ScrollEffectDuration : 滚动效果的延迟时间?单位为秒,默认值0.1。
实例代码:
前台代码如下:
< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  id ="Head1"  runat ="server" >
  
< title > 范例如何使用AlwaysVisibleControl控件 </ title >
  
< link  href ="style.css"  type ="text/css"  rel ="Stylesheet"   />
</ head >
< body  onload ="focus();" >
  
< div  class ="banner" >
    
< href ="http://abcdwxc.cnblogs.com/"  target ="_blank" >  AlwaysVisibleControlExtender控件实例-------王晓成的博客 < br  />< br  />     
    
</ a >
  
</ div >
  
< div  class ="description" >
    
< ul >
 
< li > 请选取 < strong > [显示的位置] </ strong > 下拉框来指定欲显示系统状态的位置,然后请调整浏览器窗口大小或移动浏览器的滚动条来看看这个控件的效果。  </ li >
      
< li > 每隔 1 秒钟系统状态会自动更新。 </ li >
    
</ ul >
  
</ div >
  
< />
  
< form  id ="form1"  runat ="server" >
    
< asp:ScriptManager  ID ="ScriptManager1"  runat ="server" >
    
</ asp:ScriptManager >
    
< div >
      
< asp:UpdatePanel  ID ="UpdatePanel1"  runat ="server"  UpdateMode ="Conditional" >
        
< ContentTemplate >
          
< asp:Panel  ID ="Panel1"  runat ="server"  Height ="50px"  Width ="370px"
            BackColor
="White"  ForeColor ="Blue"  BorderWidth ="2"  BorderStyle ="dashed"
            BorderColor
="DarkBlue"  Style ="opacity:85; filter:alpha(opacity=85);" >
            
< strong > 选择下拉框的值,此处会在不同的位置显示 </ strong >            
          
          
</ asp:Panel >
          
< ajaxToolkit:AlwaysVisibleControlExtender  ID ="avce"
                                                    runat
="server"
                                                    TargetControlID
="Panel1"
                                                    VerticalSide
="Top"
                                                    VerticalOffset
="10"
                                                    HorizontalSide
="Right"
                                                    HorizontalOffset
="10"
                                                    ScrollEffectDuration
="1"   />
        
</ ContentTemplate >
        
< Triggers >
          
< asp:AsyncPostBackTrigger  ControlID ="Timer1"  EventName ="Tick"   />
        
</ Triggers >
      
</ asp:UpdatePanel >
    
</ div >
    
< />
    
< asp:Timer  ID ="Timer1"  runat ="server"  Interval ="1000" >
    
</ asp:Timer >
    显示的位置:
< asp:DropDownList  ID ="ddlPosition"
                                  runat
="server"
                                  OnSelectedIndexChanged
="ChangePosition" >
      
<% -- 「回归原位」是预设的选项,且其 Value 是空的 -- %>
      
< asp:ListItem  Text ="回归原位"  Value =""  Selected ="true"   />
      
< asp:ListItem  Text ="左侧上方"  Value ="TL"   />
      
< asp:ListItem  Text ="中央上方"  Value ="TC"   />
      
< asp:ListItem  Text ="右侧上方"  Value ="TR"   />
      
< asp:ListItem  Text ="左侧中间"  Value ="ML"   />
      
< asp:ListItem  Text ="中央中间"  Value ="MC"   />
      
< asp:ListItem  Text ="右侧中间"  Value ="MR"   />
      
< asp:ListItem  Text ="左侧下方"  Value ="BL"   />
      
< asp:ListItem  Text ="中央下方"  Value ="BC"   />
      
< asp:ListItem  Text ="右侧下方"  Value ="BR"   />
    
</ asp:DropDownList >
  
</ form >
  
< hr  />

</ body >
</ html >

后台代码如下:
  protected   void  Page_Load( object  sender, EventArgs e)
    
{
        
if (!IsPostBack)
        
{

            avce.Enabled 
= false;
        }
      
    
    }

    
protected   void  ChangePosition( object  sender, EventArgs e)
    
{        

        avce.Enabled 
= true;

        
switch (ddlPosition.SelectedValue)
        
{
            
case "TL":
                avce.VerticalSide 
= VerticalSide.Top;
                avce.HorizontalSide 
= HorizontalSide.Left;
                
break;
            
case "TC":
                avce.VerticalSide 
= VerticalSide.Top;
                avce.HorizontalSide 
= HorizontalSide.Center;
                
break;
            
case "TR":
                avce.VerticalSide 
= VerticalSide.Top;
                avce.HorizontalSide 
= HorizontalSide.Right;
                
break;
            
case "ML":
                avce.VerticalSide
=VerticalSide.Middle;
                avce.HorizontalSide
=HorizontalSide.Left;
                
break;
            
case "MC":
                avce.VerticalSide
=VerticalSide.Middle;
                avce.HorizontalSide
=HorizontalSide.Center;
                
break;
            
case "MR":
                avce.VerticalSide
=VerticalSide.Middle;
                avce.HorizontalSide
=HorizontalSide.Right;
                
break;
            
case "BL":
                avce.VerticalSide 
= VerticalSide.Bottom;
                avce.HorizontalSide 
= HorizontalSide.Left;
                
break;
            
case "BC":
                avce.VerticalSide
=VerticalSide.Bottom;
                avce.HorizontalSide
=HorizontalSide.Center;
                
break;
            
case "BR":
                avce.VerticalSide 
= VerticalSide.Bottom;
                avce.HorizontalSide 
= HorizontalSide.Right;
                
break;
            
default:
                avce.Enabled 
= false;
                
break;
        }


    }

}
运行结果如下:
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值