ToolTips Personalizados y Ventanas Pop up estilo Modal
Caso 7 - Integrando DOM al .Net
Preparando la claseAgregar una clase al proyecto (
class1.vb), y agregar el siguiente codigo en la misma:
Imports Microsoft.VisualBasic
Imports System.Data.SqlClient
Public Class Class1
Dim con As New SqlConnection("integrated security=sspi;data source=(local);initial catalog=ejemplo")
Dim da As SqlDataAdapter
Dim dtb As Data.DataTable
Public Function subcateroria(ByVal id_categoria As Integer) As Data.DataTable
da = New SqlDataAdapter("select * from sub_categoria where id_categoria=" & id_categoria & "", con)
dtb = New Data.DataTable
da.Fill(dtb)
Return dtb
End Function
End Class
Agregando las referencias a la paginaAgregar un archivo *.css con el nombre de popup.css y agregarle las siguientes lineas, el usuario podra modificar el estilo de las ventanas modificando los valores de este documento:
div.popup {
max-width: 600px;
background-color: white;
position: absolute;
}
#popup_overlay {
background-color:aliceblue;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 500px;
}
span.popup_link, a.popup_link {
cursor: pointer;
}
.popup_draghandle {
cursor: move;
}
.ventana
{
background-color:#F4F6EB;
border-collapse:collapse;
font-size:smaller ;
font-family:Verdana;
}
.titulo
{
height:17px;
background-image:url(bar.jpg);
background-repeat:repeat-x
}
Agregar la
siguiente imagen al proyecto.
Agregar los siguientes archivos al proyecto:
Agregarlos al head de la pagina:
<script src="prototype.js" type="text/javascript"></script>
<script src="effects.js" type="text/javascript"></script>
<script src="dragdrop.js" type="text/javascript"></script>
<script src="popup.js" type="text/javascript"></script>
<link rel="stylesheet" href="popup.css" type="text/css" />
Preparando el GridviewSmartTag = STAcontinuacion se dara un ejemplo de como podemos generar ventanas pop up al estilo modal asi como tambien tooltips personalizados. Seguir los pasos del primer post para realizar la conexion del gridview a la tabla Categoria de la BD Ejemplo, ocultar el
id_categoria, el gridview debera quedar como en la imagen A.
Imagen A
A continuacion seleccionamos el ST del gridview y seleccionaremos la opcion
editar columnas una vez que estemos en la nueva ventana, agregaremos 1 TemplateField (El template field debe de estar entre los campos id_categoria y Categoria) terminado de agregar el templatefield click en Aceptar.
Nuevamente seleccionamos el ST del Gridview y seleccionamos la opcion
Editar Plantillas, el diseño del gridview cambiara por la de un cuadro, del panel de herramientas arrastramos un control
HyperLink y sin cambiar el Text del hyperlink damos click en el ST del gridview y seleccionamos
Terminar edicion de la plantilla(Imagen B), en el caso que el control HyperLink no este dentro del gridview, ir a Codigo (Source) ubicar el control Hyperlink y eliminar todo el
Style (
Ver Post Anteriores).
Gridview despues de agregar el templatefield && Hyperlink
Imagen B
Una vez que el gridview este como se muestra en la imagen B, debemos escoger una imagen para mostrar como icono y agregarla al proyecto (Imagen C), en mi caso he seleccionado
esta (
la guardare en el proyecto con el nombre de eye), acontinuacion nos dirigiremos a Codigo (Source) de la pagina y buscaremos el bloque de codigo que corresponde al TemplateField del Gridview (
<asp:TemplateField> -
</asp:TemplateField>).
Imagen C
Una vez hallamos encontrado las etiquetas de apertura y cierre del TemplateField, buscaremos en su interior la etiqueda HyperLink, eliminaremos el texto e insertaremos la imagen que elegimos anteriormente (
en mi caso eye.gif, recordar ponerle un width=15px en el caso que la imagen sea demasiado grande), la linea completa debera quedar como se indica y el diseño del gridview como se indica en la imagen D:
<asp:HyperLink ID="HyperLink1" runat="server"><img src="eye.gif" width="15px"/></asp:HyperLink>
Diseño del Gridview con el control HyperLink y la Imagen
Imagen D
Añadiendo div para el tooltipNos iremos al Codigo (Source) de la pagina y nos situaremos antes de la etiqueta de cierre del form (
</form>) y colocaremos los siguiente.
<div id="tooltip" class="popup" style="width:150px">
<table border="1" cellspacing='0' cellpadding='0' class='ventana'>
<tr><td align="center">Aqui ira el mensaje para el tooltip, poner una imagen o lo que ud desee.</td></tr>
</table>
</div>
<script type="text/javascript">
//<![CDATA[
new Popup('tooltip','',{modal:true})
//]]>
</script>
Recordar que tanto el id del div debe ser igual al primer parametro de la funcion new popup
Añadiendo codigo para las ventanas modal y lanzadores.Agregar el siguiente bloque de codigo entre el codigo anterior y la etiqueta de cierre del form (
</form>):
VB
<%
Dim cls As Class1
Dim a, b As Integer
Dim row As GridViewRow
cls = New Class1
Dim cod As String
If GridView1.Rows.Count > 0 Then
For a = 0 To GridView1.Rows.Count - 1
cod = GridView1.DataKeys(a).Value.ToString
Response.Write("<div id='panel" & a + 2 & "' class='popup' style='width:200px'>" & Chr(13))
Response.Write("<table border='1' cellspacing='0' cellpadding='0' width='100%' class='ventana'><tr><td class='titulo'><table border='0' width='100%' style='border-collapse:collapse'><tr class='popup_draghandle'><td align='left'><font color='white'><b>Detalles de Categoria</b></font></td><td align='right' style='width: 15px'><table border='0' width='100%'><tr><td align='right'><a class='popup_closebox' href='#'><font style='font-size:smaller' color='white'>X</font></a></td></tr></table></td></tr></table></td></tr>" & Chr(13))
Response.Write("<tr>" & Chr(13))
Response.Write("<td align='center'>" & Chr(13))
Response.Write("<table border ='0' width='95%' style='border-collapse:collapse'>" & Chr(13))
Response.Write("<tr><td> </td></tr>")
Response.Write("<tr><td align='center' style='width:110px'><b>Sub Categorias</b></td></tr>" & Chr(13))
If (cls.subcateroria(cod).Rows.Count = 0) Then
Response.Write("<tr><td align='center' style='width:110px'>No se encontraron Sub Categorias</td></tr>" & Chr(13))
Else
For b = 0 To cls.subcateroria(cod).Rows.Count - 1
Response.Write("<tr><td align='center' style='width:110px'>" & cls.subcateroria(cod).Rows(b)("sub_categoria").ToString & "</td></tr>" & Chr(13))
Next
End If
Response.Write("<tr><td> </td></tr>")
Response.Write("</table>" & Chr(13))
Response.Write("</td>" & Chr(13))
Response.Write("</tr>" & Chr(13))
Response.Write("</table>" & Chr(13))
Response.Write("</div>" & Chr(13))
Next
Response.Write("<script type='text/javascript'>" & Chr(13))
Response.Write("//<![CDATA[" & Chr(13))
Dim button1 As HyperLink
For a = 0 To GridView1.Rows.Count - 1
row = GridView1.Rows(a)
button1 = row.FindControl("HyperLink1")
Response.Write("new Popup('panel" & a + 2 & "','" & button1.ClientID & "',{modal:true})" & Chr(13))
Response.Write("new Popup('tooltip','" & button1.ClientID & "')" & Chr(13))
Next
Response.Write("//]]>" & Chr(13))
Response.Write("</script>" & Chr(13))
End If
%>
Ejemplo finalizado
ToolTip al pasar el puntero por la imagen.
Ventana modal. Bloqueando el contenido detras de ella.
Para activarla, dar click en la imagen
Ventana modal en movimiento.
Para mover, click en la barra y arrastrar
Ejecutar y aplicar para lo que se necesite.