Buscando artículos sobre "JQuery"
6-diciembre-2013
admin

Generador de partes de trabajo

Aplicación web que te genera los partes de horas mensuales en formato *.xls

DEMO: http://genparte.disastercode.com.es

GitHub: https://github.com/roberto-pf/GenParte

Tecnologías empleadas:
– Plugin Fullcalendar de Jquery para implementar el calendario.http://arshaw.com/fullcalendar/

– Nusoap, como servidor web para los días festivos.http://sourceforge.net/projects/nusoap/

– PHPExcel, como librería para generar la hoja de excel.http://phpexcel.codeplex.com/

– Diseño formularios:
Formly -> http://thrivingkings.com/read/Formly-The-form-glamorizer-for-jQuery
NiceForms -> http://www.emblematiq.com/lab/niceforms/

Pantalla Principal

Hoja de excel generada

13-agosto-2013
admin

Librerías javascript para crear presentaciones

Ahora, además de Microsoft Powerpoint, Keynote u otras aplicaciones conocidas también podemos crear presentaciones con html. Para ello podemos encontrar numerosas librerías javascript pensadas para crear presentaciones por medio de HTML y Javascript.

Te permiten realizar transiciones, pantalla completa o accesos con el teclado entre muchas otras cosas. La principal ventaja que tiene es que al estar realizadas vía web simplemente tendremos que acceder a la URL donde subamos la presentación y no tenemos que asegurarnos de que el ordenador en cuestión tenga instalado el software necesario.
También son ideales para presentar y explicar un servicio a nuevos visitantes de una forma original.

Algunos de ellos son:

Deck.js: se trata de una bonita biblioteca JavaScript para crear presentaciones HTML.
Mientras que los usuarios avanzados pueden crear presentaciones totalmente personalizadas, hay plantillas y temas para los usuarios novatos que permiten crear una presentación de diapositivas estándar sin ningún esfuerzo.

Fathom.js: Este es un plugin de jQuery que nos permite crear las diapositivas en HTML, con estilos CSS y controlar la lógica de presentación con JavaScript. La navegación se puede manejar con el teclado, el ratón o el desplazamiento. Permite la definición de un video para sincronizar con la presentación de diapositivas.

Html5slides: está desarrollada por Google. Cuenta con 2 temas incorporados y soporta 3 diseños diferentes (normal, faux-widescreen, pantalla ancha).

Dzslides: consiste en un solo archivo HTML5 CSS3 que hace de plantilla para construir las presentaciones. Además, dispone de 2 funcionalidades: incrustar el resultado en otras páginas y mostrar diapositivas con un panel de control.

Slippy: es una librería de presentaciones HTML realizada con jQuery. Además de navegar por las diapositivas con las siguientes teclas prev-que permite a los usuarios ir directamente a la diapositiva que desee con las teclas numéricas.

S5: Un popular motor de presentación basada en estándares que tiene todas las características que podemos pedir, incluyendo: auto-escalado de texto, representación incremental, URL única para cada diapositiva, indicador de progreso y mucho más…

25-abril-2013
admin

JSBin, JSBeautifier y JSFiddle

JSBin es un servicio online que nos permite introducir código HTML, CSS y JavaScript y verificar su funcionamiento. Está pensado para que los desarrolladores puedan trabajar de manera colaborativa.

En http://jsbin.com podemos editar sin dificultades, incluir alguna de las librerías más comunes e incluso, guardar la URL del proyecto y hacerla pública. (Más info.)

JSBeautifier, te organiza y modifica estéticamente tu código Javascript, de modo que este sea más placentero a la vista y siga estándares de formatos de programación.

jsbeautifier.org

JSFiddle, potente herramienta para Javascript y frameworks como JQuery y Prototype.js
Al igual que as anteriores se trata de una herramienta 100% web. Lo que JSFiddle te ofrece es un ambiente de varias ventanas dentro de tu navegador web, en donde en una de ellas puedes escribir HTML, y en otra sentencias de Javascript (como por ejemplo, selectores de JQuery), y después en otra ventana ves el resultado.

Con JSFiddle eliges la versión de la librería que deseas, copias un pedazo de HTML (o utilizas el que te ofrecen por defecto), lo modificas, y escribes tu Javascript para ver si hace lo que esperas que hagas, y listo. Varios minutos se reducen a segundos.

JSFiddle

14-noviembre-2012
admin

Plugin para el eclipse que genera aplicación automaticamente

Sotilizator

En GitHub he creado un repositorio donde comparto un plugin para el eclipse que he implementado y que facilita el desarrollo aplicaciones J2EE https://github.com/roberto-pf/Sotilizator. El plugin consigue implementar toda la lógica de negocio de una aplicación que utiliza: Struts + Spring + hibernate + JQuery.

Qué es el Sotilizator?
Se trata de un plugin para el eclipse (probado en su versión Helios). La finalidad de este plugin es la creación de una aplicación web de forma automática y con unas determinadas características a partir de un esquema de una Base de Datos.
Estas características son:
1 – La aplicación resultante estará realizada empleando un MVC en J2EE con Struts 1.3, inyección de dependencias con Spring 3.0, hibernate 3.2.6 para el acceso a datos para la parte de la lógica de negocio. Mientras que para la parte de la vista se empleará jquery junto a las tag-libraries de struts. Además, de DWR para interactuar con el servidor desde el cliente.
2 – Se generará un fichero pom.xml para que a través de MAVEN se puedan obtener las dependencias.
3 – Se generará un fichero build.xml donde estarán las tareas Ant necesarias para el despliegue de la aplicación en Tomcat, JBoss y OAS.
4 – La aplicación resultante será capaz de construir las tareas CRUD de las tablas automáticamente. A partir del esquema de la BD obtendrá los campos y su tipo.
5 – Las capas que contendrá la aplicación son las siguientes:

        VO: Objetos que hace referencias a las tablas.
	DAO: Capa que realiza el acceso a la BD. 
	Manager: Capa sobre la que se aplican las transacciones.
	Delegate: Capa que se encarga de relacionar la parte de la vista 
                  con la lógica de negocio.
	Action: Aquí deberán ir las diferentes acciones que luego el 
                controlador mapea para interactuar con la vista.

Esquema de la lógica de negocio

Nota: Para más información consultar manuales del usuario y del programador: https://github.com/roberto-pf/Sotilizator/tree/master/Readme

8-agosto-2012
admin

Crear un select multiple con checkbox . Utilizando JQuery.

.multiselect {
    width:20em;
    height:15em;
    border:solid 1px #c0c0c0;
    overflow:auto;
}
 
.multiselect label {
    display:block;
}
 
.multiselect-on {
    color:#ffffff;
    background-color:#000099;
}

jQuery.fn.multiselect = function() {
    $(this).each(function() {
        var checkboxes = $(this).find("input:checkbox");
        checkboxes.each(function() {
            var checkbox = $(this);
            // Highlight pre-selected checkboxes
            if (checkbox.attr("checked"))
                checkbox.parent().addClass("multiselect-on");
 
            // Highlight checkboxes that the user selects
            checkbox.click(function() {
                if (checkbox.attr("checked"))
                    checkbox.parent().addClass("multiselect-on");
                else
                    checkbox.parent().removeClass("multiselect-on");
            });
        });
    });
};

$(".multiselect").multiselect();

Fuente

12-julio-2012
admin

Juego de diamantes online

Este juego ha sido realizado bajo las tecnologías DHTML, JQUERY y PHP.

Para su realización se ha optado por reutilizar un proyecto ya existente y que estaba basado en un motor de juego realizado en javascript de tipo Open Source.
Para obtener más información consultar, Open Source Diggy:

http://www.mobilegameengines.com/html5/engines/128-diggy

https://github.com/richtaur/diggy

La dirección es http://diamantebomba.disastercode.com.es.

10-julio-2012
admin

Juego de memorizar parejas Online

Se ha realizado otro juego en HTML 5, JQuery y PHP. El juego es muy similar al anterior del rompecabezas. Consiste en una aplicación web que a partir de una serie de imagenes te genera un panel con 16 casillas que se deben ir abriendo de dos en dos acertando los pares iguales.
Cada pantalla tiene su propio ranking con los mejores tiempos de realización. Además, si quieres, puedes personalizar la pantalla que generan tus fotos y de esta forma p.e. añadir cualquier mensaje de publicidad de forma totalmente gratuito.

La dirección es http://hazparejas.disastercode.com.es.

24-junio-2012
admin

RompeCabezas Online

Se ha realizado un juego en HTML 5, JQuery y PHP. El juego consiste en una aplicación web que a partir de una imagen te genera un rompecabezas que luego puedes intentar resolver.
Cada imagen tiene su propio ranking con los mejores tiempos de realización. Además, si quieres, puedes personalizar el rompecabezas que genera tu foto y de esta forma p.e. añadir cualquier mensaje de publicidad de forma totalmente gratuito.

La dirección es http://rompecabezas.disastercode.com.es.

12-mayo-2012
admin

Propiedades nth-child y first-child de jquery.

JQuery tiene varias propiedades que se pueden utilizar para acceder a nodos concretos que están dentro de un nodo padre. Entre estas propiedades voy a comentar el funcionamiento de: first-child y nth-child

Para ello voy a utilizar un ejemplo. Supongamos que tenemos un Select cuyo id es «selectPrueba».

first-child – Se puede utilizar para seleccionar el primer elemento.
p.e. esto seleccionaria en el combo el primer elemento.

$('select#selectPrueba option:first-child').attr("selected", "selected");

nth-child – Permite seleccionar un elemento concreto.
p.e. esto seleccionaria en el combo el elemento 4.

$('select#selectPrueba option:nth-child(4)').attr('selected', 'selected');

Más información con ejemplos: first-child y nth-child.

17-marzo-2012
admin

Comprobar que existe un elemento en JQuery

Una forma de comprobar si existe un elemento con jquery es utilizar la función length(). Esta función cuenta el número total de elementos.

if( $('#identificadorElemento').length == 0 ){
     //Devuelve 0 si no encuentra ningún elemento con ese id

}else{
     //En otro caso es que ha encontrado como mínimo 1

}
Páginas:«12

Categorias

Linkedin