Te encuentras en: Inicio » jquery
Artículos tageados con:
jquery
Ejemplos de código y trucos.
Pongamos que tenemos un formulario con n campos y su correspondiente botón submit para enviarlo. Para hacer el formulario mas usable e intuitivo siempre está bien desactivar el botón submit de enviar, siempre y cuando el formulario no este completado. Importante también mostrando mensajes de ayuda, o tooltips que es fundamental. Vamos a poner que tenemos un formulario con una caja de texto y un botón submit. Lo que haremos será desactivar o deshabilitar el botón submit hasta que no haya algo escrito en la caja de texto. <input type="text" name="textField" /> <input type="submit" value="send" /> Para deshabilitar o desactivar el boton submit. Usaremos Jquery para llevar a cabo esta tarea y no usar Javascript a pelo. Seleccionamos todos los inputs que sean del tipo submit y le agregamos el atributo disabled=”disabled” $(‘input[type="submit"]‘).attr(‘disabled’,'disabled’); Para habilitar o activar el botón submit y poder enviar el formulario. Ejecutamos el siguiente código. Que lo que hace es eliminar el atributo disabled que hemos agregado anteriormente. $(‘input[type="submit"]‘).removeAttr(‘disabled’); Ejemplo completo. Cuando la caja de texto esta vacía el botón submit de desactiva. Cuando algo se escribe en la caja del formulario se muestra el boton submit activo. Si la caja de texto volviese a estar [...]
Desde el siguiente vídeo consejo, podremos aprender como hacer para mostrar los elementos de un listado que aparezcan secuencialmente mediante Jquery. Hay muchas formas de llevar a cabo esta tarea pero la que comenta el video tutorial es una de ellas y no esta del todo mal porque es bastante sencillo y no incluye mucho código. Se trata de una técnica para utilizar funciones recursivas. (function() { // Inicialmente ocultamos todos los elementos del listado var lis = $(‘li’).hide(); // El desencadenante es en este caso un anchor, un enalce. Esto es muy generico pero se puede customizar, claro. $(‘a’).click(function() { var i = 0; // Hacemos un FadeIn a cada elemento del listado cuando llega a los 200 ms, despues, // cuando ha terminado, recursivamente se llama a displayImages. // Cuando eq(i) hace referencia a un elemento que no existe, // jQuery devolverá un objeto vacio y no continuará haciendo fadeIn (function displayImages() { lis.eq(i++).fadeIn(200, displayImages); })(); }); })(); Lo que hace este uso efectivo es el hecho de que, cuando lis.eq (i) se refiere a un elemento que no existe en el conjunto, se devuelve un objeto vacio jQuery. Cuando esto sucede, los métodos posteriores de la cadena [...]
A continuación indico algunas funciones de Jquery muy útiles para trabajar con elementos de formularios. En este caso para trabajar con checkbox. Seleccionar/deseleccionar un checkbox: // Seleccionar un checkbox $(‘input[name=acheckbox]‘).attr(‘checked’, true); // Deseleccionar un checkbox $(‘input[name=acheckbox]‘).attr(‘checked’, false); Seleccionar/deseleccionar todos los checkbox: // Seleccionar todos los checkboxes $("input:checkbox").attr(‘checked’, true); // Deseleccionar todos los checkboxes $("input:checkbox").attr(‘checked’, false); A continuación una función para obtener la lista de checkboxes seleccionados. Se crea una función que extiende las propiedades de Jquery. Para todos los checkbox seleccionados se va guardando su valor en un array. Con este array se puede pasar a un ajax, a otra funcion jquery, o se puede hacer lo que cada uno desee en su lógica. También se puede hacer un alert() con el array para testear y comprobar los datos del mismo antes de continuar. jQuery.fn.getCheckboxValues = function(){ var values = []; var i = 0; this.each(function(){ values[i++] = $(this).val(); }); return values; } var arr = $("input:checked").getCheckboxValues(); Tags de búsquedas: checkbox marcar desmarcar todos, ajax comprobar checkbox, obtener datos vector checkbox nombre, obtener el valor de un checkbox jquery, pasar chekbox a array en php, pasar parametros con ajax jquery, pasar valores de checkboxes a arreglo con javascript, recoger valores [...]
Hace mucho tiempo que he implementado en un site en cakephp, un sistema de votaciones con estrellas que funciona con ajax. Fue bastante complejo y me llevó un tiempo, ahora lo retomo para publicarlo y compartirlo. Inicialmente seguí las indicaciones de un articulo publicado en bakery.cakephp.org que al final se puede ver la fuente original. El sistema de votos por estrellas es ya muy conocido y lo tienen integrados muchos sites, pero meterlo en cakephp es un poco mas “laberíntico” porque hay muchos archivos que interfieren y en muchas capas de la lógica. A continuación indico los pasos que he seguido 1 ) Lo primero descargar el plugin. Tener en cuenta la versión de Cakephp que uséis. Aquí indico las dos versiones disponibles hasta el momento. 2) Extraer el plugin, incluir la carpeta rating en la carpeta de plugins en app/plugins 3) Copiar el archivo rating/config/plugin_rating.php a tu carpeta app en app/config/plugin_rating.php En este archivo se pueden especificar muchos detalles de configuración Si se quiere habilitar para que usuarios anónimos no logeaos puedan usar el sistema para votar habrá que tener la siguiente activa a true $config['Rating.guest'] = true; Otro punto interesante de la configuración del plugins es poder guardar [...]
Para centrar un div horizontalmente y verticalmente normalmente se usa css para ello. Pero a veces es imposible hacerlo mediante css, porque cada usuario tiene una resolucion en su pantalla diferente, al mismo tiempo que empleamos menos tiempo en centrarlo mediante jquery y javascript, ya que no tenemos que estar calculando anchos y altos. He encontrado una función muy sencilla a la que le pasamos la clase o el id del div y lo centrará automáticamente en la pantalla. Con la función $(window).width() y $(window).height() obtenemos el ancho y altura de la ventana abierta. Con la función outerWidth() y outerHeight() obtenemos el ancho y altura del div. $(document).ready(function(){ $(window).resize(function(){ $(‘#contenedor_caja’).css({ position:’absolute’, left: ($(window).width() – $(‘#contenedor_caja’).outerWidth())/2, top: ($(window).height() – $(‘#contenedor_caja’).outerHeight())/2 }); }); // Ejecutamos la función $(window).resize(); }); <div id="contenedor_caja"> <p>Contenido del div</p> </div> Tags de búsquedas: centrar div horizontalmente jquery, centrar una pantalla javascript, centrar con javascript, funcion java para centrar div, jquery centrar, jquery centrar capa, modificar posicion de un elemento jquery, modificer un div con query, posicionar un div con jquery, situar un div a un % de la pantalla
1 Comentario Categoria : Javascript 
RSS Feed 
Suscríbete al RSS por email
Últimos Comentarios
6-02-2012 02:54
3-02-2012 21:40
3-02-2012 17:08
3-02-2012 05:38
1-02-2012 15:48
1-02-2012 10:12
1-02-2012 04:27
1-02-2012 00:57