¿hasta donde podre llegar?

hector2c, mi bitacora

Archive for the ‘jquery’ Category

jQuery – crear plugin simple para acordeón

with 5 comments

buen día, el siguiente plugin es muy sencillo, muy poco código, pero cumple su finalidad, es un acordeón, desarrollado con jquery…

ver demo | descargar fuente

Leer el resto de esta entrada »

Written by hector2c

febrero 11, 2010 at 11:29 am

jQuery – gestionar una tabla con ajax

with 81 comments

el post original y la idea original, se encuentra en este post que no anda del todo muy bien:

jQuery – agregar y eliminar filas en una tabla

pido mil disculpas, a aquellas personas que comentaron y nunca di una respuesta, este post va por ellos…

la aplicacion a primera vista

este es el segundo post, que genero con un tema relacionado con la gestión de tablas en una sola página mediante ajax. usando jQuery como framework de javascript, jquery.validate para la validación de formularios y jquery.blockUI para el efectos de bloqueo total…

descripción de la aplicación

  • busqueda y orden del listado por ajax
  • agregado, modificación y eliminación de registros por ajax
  • paginación mediante ajax, usando la clase PHPPaging.lib.php, mayor información en http://www.phperu.net, autor MyOkram
  • validación de formulario con jquery.validate, evitamos la duplicación de usuarios
  • tambien se uso jquery.blockUI, para bloquear la pantalla y mostrar una ventana emergente generada con ajax
  • se usaron estilos css, php y mysql

puedes ver el ejemplo corriendo mediante el siguiente enlace.

ver demo | descargar fuente | script sql

tengan en cuenta que la bd que estoy usando se llama pruebas, pueden modificar esas cosillas en el archivo extras/php/conexion.php

por razones de seguridad, e desabilitado la opción eliminar y editar, las activare cuando tenga 5000 registros para tener una mejor paginación, pero pueden descargar el fuente con las opciones habilitadas.

Leer el resto de esta entrada »

Written by hector2c

febrero 11, 2010 at 9:54 am

jQuery – agregar y eliminar filas en una tabla

with 44 comments

HAY UNA NUEVA VERSIÓN REFERENTE A ESTE POST, POR FAVOR VISITA:

https://hector2c.wordpress.com/2010/02/11/jquery-gestionar-una-tabla-con-ajax/

pues pues pues, se me dio por hacer este tutorial gracias a este post:

¿que contiene la aplicación?

  • agregación de nueva fila por medio de un formulario a la tabla
  • eliminación de una fila obteniendo su id para modificar la base de datos por ajax
  • validación de campos de texto enteros, texto y formato e-mail con jquery.validate
  • actualización de bases de datos con ajax
  • formato de aplicacion usando css

¿que olvide añadir?

  • la opción de editar fila, por ejemplo un enlace en la fila y al hacerle click obtener sus datos y modificarlos. no tengan problema en un futuro tutorial hare un ejemplo similar a este.

imagen de la aplicación

1

descarga

puedes descargar la aplicacion desde el siguiente enlace.

box-netcualquier duda bienvenida sea.

HAY UNA NUEVA VERSIÓN REFERENTE A ESTE POST, POR FAVOR VISITA

https://hector2c.wordpress.com/2010/02/11/jquery-gestionar-una-tabla-con-ajax/

Written by hector2c

julio 13, 2009 at 5:19 pm

Publicado en jquery, tutorial

jQuery – crear plugin simple para tabs

with 6 comments

tabs o pestañas en nuestro buen español, antiguamente solia usar un muy excelente plugin pata tabs llamado idTab, pero al momento de actualizar jQuery a la versión 1.3.2 dejo de funcionar en ie6, paro completamente el desarrollo de mis labores.

asi que ya habiendo leido algo sobre la creación de plugins en jQuery decidi intentar crear uno, pues a ver como me va:

Descargar: DEMO

tab

estructura html

pues, la estructura html es muy sencilla, y usual, debe tener la siguiente forma:

<div id="tab" class="tab">
<ul>
	<li><a href="#tab1">Internet</a></li>
	<li><a href="#tab2">Wap</a></li>
	<li><a href="#tab3">jQuery</a></li>
</ul>
<div id="tab1">

Contenido para internet</div>
<div id="tab2">

Contenido para tecnologías WAP</div>
<div id="tab3">

Contenido para plugins jQuery</div>
<div class="pie">Este div es opcional</div>
</div>

pueden observar que existe una lista, y un conjunto de divs, creo que la idea ya esta definida, por cada click que haga en un enlace de la lista, hara ocultar todos los divs y mostrara al div que tenga como referencia.

el estilo

bueno, no se si sea necesario agregar el código del estilo, pero para los curiosos ahi les va

@charset "utf-8";
/* CSS Document */

body{
	font-family: "Lucida Sans Unicode";
	font-size: 11px;
}

.tab{
	margin: auto;
}
.tab ul{
	list-style: none;
	margin: 0px;
	padding: 0px;
}
.tab ul li{
	float: left;
	padding: 7px 0px;
	border-right: 1px solid #fff;
}
.tab ul li a{
	padding: 7px 14px;
	background-color: #CCC;
	text-decoration: none;
	color: #369;
}
.tab ul li a:hover{
	background-color: #ddd;
}

.tab .selected{
	background-color: #eee;
}

.tab div{
	clear: both;
	padding: 20px;
	*padding-top:10px;
	border: 1px solid #CCC;
}
p{
	margin: 0px 0px 20px 0px;
}
.ultimo{
	margin: 0px 0px 0px 0px;
}
.tab div.pie{
	text-align: right;
	border: 0px;
	padding: 0px;
	margin: 0px;
}

el plugin jQuery: tab

a continuación explico el code del plugin

jQuery.fn.tab = function() {
	var div = jQuery(this);
	$(div).find("div:not(.pie)").hide().eq(0).show();
	$(div).find("ul li a").eq(0).addClass('selected');
	$(div).find("ul li a").click(function(){
		$(div).find("ul li a").removeClass('selected');
		$(this).addClass('selected');
		$(div).find("div:not(.pie)").hide();
		$( $(this).attr('href') ).show();
	});
}

la descripción

linea 01: creo la función con el nombre tab
linea 02: almaceno en una variable llamada div todo el contenedor div
linea 03: ocultamos todos los divs de contenido situados dentro del contenedor, a eXepción del div que tiene la clase .pie, seleccionamos el primer div con eq(0) y luego lo mostramos
linea 04: ubicamos el primer item de la lista y le agregamos la clase de estilo .selected, dara un efecto de enfoque

linea 05: aqui viene un evento de tipo click al momento de hacer click en uno de los items de la lista.
linea 06: una vez hecho click removemos a todos los enlaces de la lista la clase .selected
linea 07: ahora al enlace de la lista que hicimos click añadimos la clase de estilo .selected, para dar el efecto de enfocado
linea 08: ocultamos nuevamente a toodos los div a eXepción del div de clase .pie (este div es opcional agregarlo, en mi caso lo agrego para agregar botones como agregar, modificar, cancelar, etc)…
linea 09: ubicamos el nombre del div a mostrar tomando el atributo del enlace ‘href’ con ‘attr’: $(this).attr(‘href’), y mostramos al div enlaZado.

añadiendo las dependencias

añadimos jQuery, nuestro plugin, y una hoja de estilos.



	

ejecutando el plugin

pues, sencillamente…


	$(document).ready(function(){
		$("#tab").tab();
	});

Written by hector2c

mayo 7, 2009 at 11:45 am

Publicado en jquery, tutorial

Tagged with , , , ,

jQuery

leave a comment »

luego de destruir un poco el blog buscando e indagando, por fin pude agregar código a mi blog en wordrpress.com, crei que siempre seria con algun plugin, pero bueno, era muy sencillo…

segun nuestro amigo wikipedia jQuery es:

jQuery es una biblioteca o framework de Javascript que permite simplificar la manera de interactuar con los documentos HTML, permitiendo manejar eventos, desarrollar animaciones y agregar interacción con la tecnología AJAX a páginas web. jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en Javascript que de otra manera requerirían de mucho más código. Es decir, con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio.

jQuery, se puede descargar desde el siguiente enlace, actualmente se encuentra en la versión 1.3.2, tube algunos problemas, ya que solia usar su versión 1.2.6 y algunos plugins no andaban bien en la 1.3.2 como idTabs (muy bueno), jClock, etc.

primeramente se enlaza la libreria

<script language="javascript" type="text/javascript" src="su_carpeta/jquery-1.3.2.min.js"></script>
seguidamente se inicializa…
<script language="javascript" type="text/javascript">
  $(document).ready(function(){
    alert('hola mundo');
  )};
</script>

el alert ‘hola mundo’ se enviara una vez cargada totalmente la estructura de la web, eso nos da la facilidad de ejecutar código javascript ‘solo’ cuando se a cargado totalmente la estructura web, asi nos evitaremos muchos problemas…

en los proximos días estare actualizando este espacio, agregando los plugins que han pasado por mis manuus.

Written by hector2c

abril 28, 2009 at 8:31 pm

Publicado en jquery

Tagged with