Ajax Toolkit: Always Visible Control

Ajax Toolkit

Este control es una extensión que como su nombre nos dice, nos permite anclar o sujetar algún control a la página, el cual se mostrara siempre por encima del contenido de la misma aun cuando la pagina cambie de tamaño o se haga un scroll sobre el contenido.

Para evitar que el control al que le vamos a implementar nuestra extensión (Always Visible Control) se mueva o parpadee, se recomienda asignarle una posición absoluta (con código css) en el lugar que queramos mostrarlo.

 

Las siguientes son las propiedades que posee el control:

  • HorizontalOffset: Esta sería la distancia de los bordes horizontales del navegador a los bordes del mismo lado del control, la distancia se mide en pixeles y el valor por default es 0.
  • HorizontalSide: Borde horizontal del browser (left, center, right) que se usara para anclar el control, el valor por default es “left”.
  • ScrollEffectDuration: Duración en segundos del efecto de scroll que hará el control cuando sea reposicionado, por defecto el tiempo asignad es 1 segundo.
  • TargetControlID: ID del control al que se le aplicara la extensión para hacerlo siempre visible.
  • UseAnimation: Asignarle o no una animación al control (en su posición), el valor por defecto es falso.
  • VerticalOffset: distancia de los bordes verticales del navegador a los bordes del mismo lado del control, la distancia se mide en pixeles y el valor por default es 0.
  • VerticalSide: Borde vertical del browser (top, middle, bottom) que se usara para anclar el control, el valor por default es “top”.
 

Y ahora viene lo interesante, hagamos un ejemplo.

En el siguiente ejemplo le aplicaremos la extensión del control AlwaysVisible a un ASP Panel, asi el contenido del panel siempre estará visible.

Primero antes que nada tenemos que agregar un ToolkitScriptManager:

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>

Ahora añadimos un ASP Panel.

<asp:Panel ID="Panel1" CssClass="staticPanel" runat="server">  
     <h2>Hello World!</h2>  
</asp:Panel>

Y es momento de agregar nuestra extensión, la cual estará relacionada a nuestro panel previamente añadido.

<asp:AlwaysVisibleControlExtender 
    ID="AlwaysVisibleControlExtender1" 
    TargetControlID="Panel1" 
    VerticalSide="Top" 
    VerticalOffset="10" 
    HorizontalSide="Right" 
    HorizontalOffset="10" 
    runat="server" /> 

Añadimos unos párrafos con texto:

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
</p>
<p>
    Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
</p>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
</p>
<p>
    Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
</p>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
</p>

Agregamos un poco de css.

<style type="text/css">  
     html {
            background-color: #cccccc;
          } 
     .staticPanel {  
                     width: 150px;  
                     background-color: White; 
                     border: solid 1px black;  
                     padding: 10px;
                  }  
</style>  
 

Y el resultado se pude ver a continuación:

always visible control

Aun cuando hagamos scroll, nuestro panel permanecerá en la posición que tiene.

 

Y aquí el código completo del ejemplo:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Simple.aspx.cs" Inherits="AlwaysVisible_Simple" %>  
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>  
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title>Simple AlwaysVisible</title>  
    <style type="text/css">  
        html {  
            background-color: #cccccc;     
        }  
          
        .staticPanel {  
             width: 150px;  
             background-color: White;    
             border: solid 1px black;  
             padding: 10px;   
        }  
      
    </style>  
</head>  
<body>  
    <form id="form1" runat="server">  
    <div>  
      
              
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">  
    </asp:ToolkitScriptManager>  
  
    <asp:Panel ID="Panel1" CssClass="staticPanel" runat="server">  
        <h2>Hello World!</h2>  
    </asp:Panel>  
  
    <asp:AlwaysVisibleControlExtender   
        ID="AlwaysVisibleControlExtender1"   
        TargetControlID="Panel1"  
        VerticalSide="Top"  
        VerticalOffset="10"  
        HorizontalSide="Right"  
        HorizontalOffset="10"  
        runat="server" />  
      
    <p>  
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.  
    </p>  
    <p>  
    Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.  
    </p>  
    <p>  
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.  
    </p>  
  <p>  
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.  
    </p>  
    <p>  
    Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.  
    </p>  
    <p>  
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.  
    </p>  
    </div>  
    </form>  
</body>  
</html>

ajaxEspero estar pronto de vuelta con ustedes.

Dudas, sugerencias o preguntas son bienvenidas.
Saludos.

Fuentes      |      asp.net/ajaxcontroltoolkit      asp.net/ajaxlibrary

Gracias por compartir tu opinión en esta nota

Para que tu avatar aparezca en los comentarios de este y otros blogs debes ser usuario registrado en Gravatar, puedes registrarte en el siguiente enlace: http://en.gravatar.com/site/signup
Stay Geek!

Deja un comentario

Sitios Amigos
Únete en Facebook
Síguenos en Twitter
Publicaciones Favoritas