[Tutorial] ASP.NET Simular el comportamiento de borrado del IPhone en un Gridview con JQuery
Hola, que tal?. en este post quiero mostrar un efecto/funcionalidad que podemos lograr con jQuery que tiene por finalidad simular el comportamiento del eliminar de un IPhone, en donde al hacer tap sobre el icono 
este se gire 
con un efecto de animación y muestre el botón eliminar, obviamente todos los demás deben quedar en su posición original y sin el botón de eliminar al lado izquiedo:
Un video de como funciona:
Ahora que ya sabemos cual es el funcionamiento, paso a explicar como lo hice
La Base de Datos
Esta es la parte sencilla, simplemente una tabla que tenga la siguiente estructura, obviamente puedes crear la que tu quieras de acuerdo a tus necesidades:
La Grilla
Es un GridView común y corriente con el siguiente, con 3 ItemTemplates, el primero para el la imagen de borrar, otra para el nombre y la última para el botón:
Las propiedades gráficas más relevantes son GridLines=”None”, ShowHeader=”False”, para lograr el efecto de listado más “limpio”.
<asp:GridView ID="GridView1"
runat="server"
AutoGenerateColumns="False"
DataKeyNames="id"
DataSourceID="SqlDataSource1"
EmptyDataText="No hay registros de datos para mostrar."
BorderWidth="0px"
GridLines="None"
ShowHeader="False"
Width="255px">
La imagen 
es no es un webcontrol image , si no un htmlcontrol ya que utilizamos runat=”server”, pero esto lo hago solamente para que en el render se le vaya creando automáticamente el Id, de esta manera el índice asignado en la generación es el mismo que se le asignará al botón.
<ItemTemplate>
<img alt="Eliminar"
src="img/iphone_delete_icon.png"
runat="server"
id="imagen"
class="imgborrar" />
</ItemTemplate>
El Botón es solo un WebControl Button con su CommandName=”Delete” y con la asignación de la clase que le da la gráfica:
<ItemTemplate>
<asp:Button ID="btEliminar"
CommandName="Delete"
runat="server"
class="botonEliminar"
Text="Eliminar" />
</ItemTemplate>
En donde el class botonEliminar es:
<style type="text/css">
.botonEliminar
{
border: 2px solid #808080;
color: #FFFFFF;
background-color: #CC0000;
}
</style>
Los Scripts y plugins
Primero que nada, debemos incluir los script que vamos a utilizar en nuestra página, los cuales son la librería jQuery y el plugin jQueryRotate.
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jQueryRotate.1.7.js" type="text/javascript"></script>
Usa la versión 1.7 de JQueryRotate, ya que las anteriores tienen algunos problemas con FireFox e IE.
El Script es el siguiente:
<script type="text/javascript">
$(document).ready(function () {
//Oculto los Botones de Eliminar
$(".botonEliminar").hide();
//Agrego el curso de la mano a las imagenes (-)
$(".imgborrar").css("cursor", "pointer").css("cursor", "hand");
$(".imgborrar").click(function () {
//todas las imagenes a su posición original
$(".imgborrar").rotateAnimation(0);
//Obtengo el indice de la imagen que se seleccionó
var indice = $(this).attr("id").substr(17, 1);
//Se consulta si es que la imagen ya esta rotada,
//el plugins a veces gira en 89.9 o 90 grados,
//el plugin no devuelve el angulo actual, por lo que lo
//veo a partir del style, si es que contiene el angulo.
if ((String($(this).attr('style')).indexOf("89") > 0) ||
(String($(this).attr('style')).indexOf("90") > 0)) {
//Si ya estaba rotado, se vuelve a pos original
$(this).rotateAnimation(0);
//Se oculta el boton que corresponde a la imagen
$("#GridView1_btEliminar_" + indice).hide("fast");
} else {
//ahora si no está rotado, se rota a 90 grados
$(this).rotateAnimation(-90);
//Se oculta cualquier botón eliminar desplegado
$(".botonEliminar").hide();
//Se muestra solo el botón que corresponde la imagen
$("#GridView1_btEliminar_" + indice).show("fast");
}
});
});
</script>
Aunque el código está con comentarios, quiero explicar el por que el indexOf(89) o indexOf(90), y es porque el plugin aleatoriamente puede llegar a girar en 89.9 grados la imagen o a 90 grados (Generalmente a 89.9, pero he probado varias veces en un pequeño porcentaje devuelve realmente los 90), pero esta información no es retornada en un atributo numérico, si no que en el estilo, por ejemplo
En IE:
en Chrome:
En Safari (noten el 89.6)
En FireFox, NO FUNCIONA!,más que nada es el plugIn jQueryRotate el que no es compatible 100% con firefox (aunque en la documentación dice otra cosa). Entonces no nos queda más remedio que modificar el código para evitar la utilización del plugin en FireFox. Esto es, tener dos imágenes, una rotada y otra en posición original, e ir modificando estos factores.
Para determinar que es Firefox, vamos a tener que preguntar si NO es Firefox, ya que dos navegadores retornan Nescape como información.
<script type="text/javascript">
$(document).ready(function () {
//Oculto los Botones de Eliminar
$(".botonEliminar").hide();
//Agrego el curso de la mano a las imagenes (-)
$(".imgborrar").css("cursor", "pointer").css("cursor", "hand");
$(".imgborrar").click(function () {
//Obtengo el indice de la imagen que se seleccionó
var indice = $(this).attr("id").substr(17, 1);
//Si es FireFox, Cambiar la Imagen en vez de rotarla
//preguntamos por los demás browsers, ya que en javascript
//Chrome y Firefox contienen la palabra Netscape
var navegador = navigator.appName + " " + navigator.appVersion;
if ((navegador.indexOf("Chrome") == -1) &&
(navegador.indexOf("Safari") == -1) &&
(navegador.indexOf("Microsoft") == -1)) {
if (String($(this).attr("src")) == "img/iphone_delete_icon_on.png") {
//todas las imagenes a su posición original
$(".imgborrar").attr("src", "img/iphone_delete_icon.png");
//volvemos a la imagen original
$(this).attr("src", "img/iphone_delete_icon.png");
$("#GridView1_btEliminar_" + indice).hide("fast");
} else {
//todas las imagenes a su posición original
$(".imgborrar").attr("src", "img/iphone_delete_icon.png");
//ahora si no está rotado, cambiamos la imagen
$(this).attr("src", "img/iphone_delete_icon_on.png");
$(".botonEliminar").hide();
//Se muestra solo el botón que corresponde la imagen
$("#GridView1_btEliminar_" + indice).show("fast");
}
} else {
//AHORA con el Plugin de Rotate
$(this).rotateAnimation(-90);
//todas las imagenes a su posición original
$(".imgborrar").rotateAnimation(0);
//Se consulta si es que la imagen ya esta rotada,
//el plugins a veces gira en 89.99~ o 90 grados,
//el plugin no devuelve el angulo actual, por lo que lo
//veo a partir del style, si es que contiene el angulo.
if ((String($(this).attr('style')).indexOf("89") > 0) ||
(String($(this).attr('style')).indexOf("90") > 0)) {
//Si ya estaba rotado, se vuelve a pos original
$(this).rotateAnimation(0);
//Se oculta el boton que corresponde a la imagen
$("#GridView1_btEliminar_" + indice).hide("fast");
} else {
//ahora si no está rotado, se rota a 90 grados
$(this).rotateAnimation(-90);
//Se oculta cualquier botón eliminar desplegado
$(".botonEliminar").hide();
//Se muestra solo el botón que corresponde la imagen
$("#GridView1_btEliminar_" + indice).show("fast");
}
}
});
});
</script>
Ahora veamos un pequeño video en los distintos Browser
Como vez, un poco más de código pero funciona en todos los browser, obviamente se puede seguir depurando, pero es para que te des una idea de como hacerlo e implementarlo en tus desarrollos.
Descarga el ejemplo!:
Espero que haya sido de tu interés, nos vemos!!
Chauu!