Archivo de la etiqueta: jQuery

JavaScript,Programación

Jquery datepicker versus html5 date

Deja un comentario

Una de las novedades que incorpora el Html5 son los input de tipo date. Como esta ocurriendo con muchas de las novedades de Html5 algunos navegadores lo soportan y otros no. Dentro del grupo que lo soportan están Chrome y Opera, los que no lo soportan de momento son Firefox, Safari e Internet Explorer, esto en lo que son navegadores de escritorio, en el campo de los dispositivos móviles el único que lo soporta es Safari. http://caniuse.com/#feat=input-datetime

Esto nos puede suponer un problema a la hora de desarrollar nuestras web implementando este tipo de novedades, y al final podemos optar por hacer lo que estamos acostumbrados ha hacer y que nos funciona, que suele ser la inclusión de un datepicker en javascript, como por el ejemplo el Datepicker de Jquery, y olvidarnos de estas novedades hasta que los desarrolladores, o quiza los fabricantes, de navegadores se pongan de acuerdo.

Una solución en este tiempo intermedio entre quien lo tiene y quien no, es usar la libreria Modernizr. Con esta libreria vamos a poder comprobar de una manera sencilla si el navegador del cliente soporta o no soporta esta caracteristica, y muchas otras cosas mas.

La instalación es sencilla, nos descargamos la version de desarrollo (development) o produccion (production) y integramos el script descargado dentro de las etiquetas de nuestra pagina web. Por ejemplo imaginemos que el fichero descargado lo renombro como modernizr.js y lo situo dentro de la carpeta scripts que esta en la raiz de nuestra pagina web. Tambien incluiremos la libreria css del jQuery UI para la cual al igual que hare despues con las librerias javascript de jquery los incluire desde la pagina http://code.jquery.com/
Tambien incluire en esta pagina el formulario con el campo input y al final los scripts de jQuery y la función que
detectara si esta soportada o no esta caracteristica en nuestro navegador.

<html>
<head>
<title>Ejemplo de input date</title>
<link href="http://code.jquery.com/ui/1.10.2/themes/flick/jquery-ui.min.css" rel="stylesheet" />
<!-- Nuestras etiquetas meta o archivos css -->
<script src='scripts/modernizr.js'></script><!--Archivo Moderniz descargado -->
</head>
<body>
<!-- El cuerpo de la web -->
<form name='frmFecha' id='frmFecha' method='post' action='#'>
<label for='fecha'>Seleccione Fecha</label>
<input type='date' name='fecha' id='fecha' placeholder='dd/mm/aaaa' />
</form>
<script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script src='http://code.jquery.com/ui/1.10.2/jquery-ui.min.js'></script>
<script>
$('document').ready(function(){
    if (!Modernizr.inputtypes.date) {
       $('#fecha').datepicker();
    }
});
</script>
</body>
</html>

Enlaces de interes http://jqueryui.com/datepicker/ http://diveintohtml5.info/detect.html#input-types

Anuncio publicitario
JavaScript,Programación

Busqueda rapida de datos en una tabla con jQuery

Deja un comentario

jqueryUn script sencillo para buscar datos en una tabla generada en HTML con jQuery. Tal como escribimos en el campo de texto el dato que estamos buscando la tabla se reduce quedando solo las lineas en la que encuentra coincidencia.

Quick Table Search using jQuery filter.

JavaScript,Programación

Datepicker Jquery en castellano

13 comentarios

Dejo el codigo del datepicker de Jquery para que salga en formato castellano


$('.datepicker').datepicker({
dateFormat: "dd-mm-yy",
firstDay: 1,
dayNamesMin: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"],
dayNamesShort: ["Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab"],
monthNames:
["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio",
"Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
monthNamesShort:
["Ene", "Feb", "Mar", "Abr", "May", "Jun",
"Jul", "Ago", "Sep", "Oct", "Nov", "Dic"]
});

view raw

datepickerEs.js

hosted with ❤ by GitHub

He creado otro Gist con una demo de como crearlo sin necesidad de hacer clic en el input
https://gist.github.com/sbarrat/5691044

La documentación de jQuery UI http://jqueryui.com/demos/datepicker/

Programación

jqGrid jQuery plugin – La navaja suiza para jQuery

Deja un comentario

Saber sabemos que existen multitud de plugins para jQuery los cuales hasta que no nos ponemos a buscar por que lo necesitamos para algo ni nos planteamos usarlo, sencillamente continuamos con nuestro flujo de trabajo. JqGrid es un plugin al cual, yo por lo menos llegue a el buscando algún complemento de jQuery que me generara tablas. Cual fue mi sorpresa al descubrir que no solo generaba las tablas con paginación sino que ademas permitía el filtrado por campos, la búsqueda por campos, y si no fuera poco la creación, modificación, y borrado de registros, ahí un todo en uno, y mas aun coge el estilo de nuestro tema de jQuery.

Pero no todo iba ha ser bueno, la parte mas dura de este plugin es lo farragoso que puede ser en un principio configurarlo todo, la cantidad de parametros que se amontonan para poder generarlo todo, eso si una vez puesto todo, la parte de php se reduce a una funcion que se encarge de la busqueda sql y que acepte los parametros, se envia por $_GET el parametro _search que es true o false, y otra funcion que se encarge de recibir el $_POST[‘oper’] que es edit, add o del, según el que sea se hace una operación u otra y una vez realizada se refresca la pantalla y aparecen los resultados.

Ademas acepta la posibilidad de integrar el autocomplete tanto en la busqueda como en la edicion, asi como el datepicker, y la función que nosotros queramos.

En conclusion, una autentica maravilla, que al principio puede costar manejarla y controlar todas las opciones que tiene, pero que una vez configurada nos facilitara mucho el trabajo.

+ Info:

Documentacion: http://www.trirand.com/jqgridwiki/doku.php

Ejemplos: http://www.trirand.com/blog/jqgrid/jqgrid.html

Programación

Fullcalendar jQuery Plugin – Tu calendario estilo Google

Deja un comentario

Buscando por internet una manera rápida de generar un calendario de tareas de una manera sencilla, encontré este plugin el cual me ha sorprendido lo sencillo que es implementarlo
+ Info fullcalendar

Programación

TipTip jQuery Plugin – Plugin jQuery para crear nuestros ToolTips

2 comentarios

Buscando por internet a ver si encontraba con algun plugin sencillo para hacer tooltips di con este el cual me gusto tanto en el resultado como en la facilidad de usarlo.

Primero necesitamos la ultima version de jQuery, la cual la bajamos de la pagina http://jquery.com/ , recomiendo la minified para produccion. Yo en este ejemplo he usado la verison 1.7.1, que era la estable en el momento de escribir esta entrada

Segundo nos lo descargamos de la pagina web de su creador http://code.drewwilson.com/entry/tiptip-jquery-plugin

El archivo comprimido contiene tres ficheros, el jquery.tipTip.js, el jquery.tipTip.minified.js, y tipTip.css. Realmente para nuestra web solo necesitamos el minified y el css el otro es el mismo que el minfied pero sin comprimir.

Agregando los ficheros a nuestra pagina.

Voy a suponer que lo vamos a colgar todo en el mismo directorio, si no seria cambiando la ruta.

Fichero index.html


<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset=utf-8 />
<link href="tipTip.css" rel="stylesheet" />
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.tipTip.minified.js"></script>
<title>Probando el TipTip</title>
</head>

Una vez ya tenemos enlazados los ficheros en nuestra cabezera html pasaremos a probar el plugin a ver que tal funciona
Parte del body en el fichero index.html

<body>
<div class='tipTip' title='Hola Mundo!!!!'>Si pasas el raton por encima saludare</div>
<script>
</script>
</body>
</html>

El mensaje que nos mostrara como tooltip es que que esta en la propiedad title.
Ahora insertaremos el script entre las etiquetas script.

$(function(){
 $(".tipTip").tipTip();
});

Y voila ya tenemos habilitado el tooltip

Si quisieramos ubicar el tooltip en algun lugar en particular del texto añadiriamos una de estas clases al tooltip que quisieramos modificar

  • tip_top – El tooltip aparece arriba del elemento.
  • tip_bottom – El tooltip aparece abajo del elemento .
  • tip_left – El tooltip aparece a la izquierda del elemento.
  • tip_right – El tooltip aparece a la derecha del elemento.
  • tip_left_top –  El tooltip aparece a arriba a la izquierda del elemento.
  • tip_left_bottom –  El tooltip aparece abajo a la izquierda del elemento.
  • tip_right_top –  El tooltip aparece arriba a la derecha del elemento.
  • tip_right_bottom –  El tooltip aparece abajo a la derecha del elemento.

TipTip ha sido testeado y funciona con  IE7 & IE8, Firefox, Safari, Opera y Chrome.

+ Info http://code.drewwilson.com/entry/tiptip-jquery-plugin