Blog de diseño web y diseño grafico » JQuery http://www.mydesign.com.es/blog herramientas, recursos y codigo para la web Mon, 15 Feb 2010 14:54:26 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Formularios para carga de archivos usando JQuery http://www.mydesign.com.es/blog/formularios-para-carga-de-archivos-usando-jquery/ http://www.mydesign.com.es/blog/formularios-para-carga-de-archivos-usando-jquery/#comments Mon, 15 Feb 2010 14:54:26 +0000 admin http://www.mydesign.com.es/blog/?p=188 A continuacion un listado de 7 plugins JQuery para el uso de formularios para la carga de archivos

AJAX Upload Visit Source

.

AJAX file Upload Visit Source

.

AJAX file Upload Visit Source

.

AJAX file Upload Visit Source

.

AJAX file Upload Visit Source

.

AJAX file Upload Visit Source

]]> http://www.mydesign.com.es/blog/formularios-para-carga-de-archivos-usando-jquery/feed/ 0 FormToWizard: Formularios largos paso a paso con Jquery http://www.mydesign.com.es/blog/formtowizard-formularios-largos-paso-a-paso-con-jquery/ http://www.mydesign.com.es/blog/formtowizard-formularios-largos-paso-a-paso-con-jquery/#comments Wed, 02 Dec 2009 18:48:53 +0000 admin http://www.mydesign.com.es/blog/?p=170 A traves del blog de Diego Mattei encontramos este excelente plugin:

formpasopaso

FormToWizard es un plugin Jquery que me ha llamado la atención ya que sale de lo común ofreciendo dividir formularios largos en tantos pasos como deseamos.

Supongamos que tenemos un formulario en donde el visitante tiene que completar su CV. En vez de hacer un formulario en donde le saquemos humo a la ruedita del mouse de tanto bajar, podemos dividir el mismo en Datos Personales, Formación Académica, Experiencia Laboral, etc. Su licencia de uso es gratuita.

Demo: FormToWizard
Implementación y Descarga: Plugin Jquery

]]> http://www.mydesign.com.es/blog/formtowizard-formularios-largos-paso-a-paso-con-jquery/feed/ 0 Análisis de XML con javascript: jParse http://www.mydesign.com.es/blog/analisis-de-xml-con-javascript-jparse/ http://www.mydesign.com.es/blog/analisis-de-xml-con-javascript-jparse/#comments Thu, 19 Nov 2009 19:22:14 +0000 admin http://www.mydesign.com.es/blog/?p=153 jquery-xml-parse

jParse es un plugin jQuery para analizar XML que trae el método .ajax de jQuery.

Se puede seleccionar el valor de cualquier nodo XML o parámetro de un nodo y puede devolver un HTML totalmente personalizado.

El plugin es muy flexible y ofrece características como:

* Las funciones de devolución de llamada en ejecución antes de que comience y después de que termine
* Limitando el número de items para ser procesados
* Con exclusión de los nodos XML con ciertas palabras, números o símbolos
* Devolviendo el número de items en un feed en cualquier lugar de su documento

Como jQuery el metodo .ajax no permite las peticiones Ajax entre dominios diferentes, el XML debe estar en el mismo dominio.

Para ver lo fácil que es para analizar un archivo XML con jParse, compruebe la demostración.

Fuente: www.webresourcesdepot.com

]]> http://www.mydesign.com.es/blog/analisis-de-xml-con-javascript-jparse/feed/ 0 5 Trucos en JQuery para Estilos y CSS http://www.mydesign.com.es/blog/10-trucos-sencillos-de-jquery-para-desarrolladores/ http://www.mydesign.com.es/blog/10-trucos-sencillos-de-jquery-para-desarrolladores/#comments Wed, 30 Sep 2009 14:17:21 +0000 admin http://www.mydesign.com.es/blog/?p=15 jquery_logoHay un montón de trucos y técnicas de JQuery por ahí, y la poderosa librería jQuery puede satisfacer la mayoria de las necesidades de JavaScript. JQuery hizo mas sencillo javascript para los diseñadores que desean añadir la interacción visual y técnicas sencillas en su diseño sin tener amplios conocimientos de programación, vale la pena dedicarle unos minutos para explorar esta excelente biblioteca.

1. Columnas de igual altura

Columnas con la misma altura siempre han sido un problema para los diseñadores que utilizan divs, aunque ahora, hay algunas soluciones.

Para resolver este problema con jQuery, sólo tiene que añadir esta función a sus páginas si desea tener la misma altura para distintas columnas (o incluirlo como un archivo JavaScript – que es mejor para el mantenimiento).

function equalHeight(group) {
  tallest = 0;
  group.each(function() {
    thisHeight = $(this).height();
    if(thisHeight > tallest) {
      tallest = thisHeight;
    }
  });
  group.height(tallest);
}

Para conseguir la igualdad en la altura de las columnas, enlace al script que contiene la función, y ponga el siguiente bloque de código en las etiquetas <head> de sus páginas.

<script type="text/javascript">
$(document).ready(function(){
  equalHeight($(".col1"));
  equalHeight($(".col2"));
  equalHeight($(".col3"));
});
</script>
El código se ejecutará tan pronto como el DOM está listo para ser utilizado, ($ (document). Ready (function ()) y luego se utiliza la función equalHeight calcular con precisión la altura de todas las columnas. Como se puede ver, todo lo que el diseñador tiene que hacer es utilizar divs, con clases de col1, col2, y col3 para que este ejemplo funcione correctamente.

2. Esquinas redondeadas sin HTML

Afortunadamente, CSS3 ha salido con una forma de crear esquinas redondeadas de forma automática sin necesidad de utilizar las imágenes, pero por otra parte, muchos navegadores populares (como Internet Explorer, generalmente funciona para versiones de IE7 o superior) pueden tomar un tiempo antes de soportar total o parcialmente las recomendaciones del W3C para CSS3.

Muchos diseñadores saben cómo crear esquinas redondeadas usando CSS, HTML, y un montón de imágenes, pero estas técnicas causan mucho desorden de HTML / CSS.
Usaremos una biblioteca JavaScript libre para crear hermosas esquinas redondeadas para los elementos HTML por ejemplo DIVs. Soporta anti-aliasing, bordes e imágenes de fondo.
Ejemplo

Supongamos que tiene un DIV en su página con la clase rounded. Desea que todas las cuatro esquinas esten redondeadas, con un radio de 1.5 ems. Los siguientes CSS logrará esto:

.rounded {
-moz-border-radius:3ex;
-webkit-border-radius:3ex;
}
Si desea (por ejemplo) que sólo quedan las esquinas superior izquierda e inferior derecha esten redondeadas, entonces usted puede hacerlo de esta manera:
.rounded {
-moz-border-radius-topleft:3ex;
-moz-border-radius-bottomright:3ex;
-webkit-border-top-left-radius:3ex;
-webkit-border-bottom-right-radius:3ex;
}
(Tenga en cuenta que la sintaxis CSS3 propuesta es similar a la versión de Webkit, pero por supuesto sin el prefijo “-webkit-”. Internamente, CurvyCorners busca la sintaxis Webkit y hace caso omiso de la versión de Mozilla.)
Este codigo es super sencillo y muy efectivo, pueden ver ejemplos y descargarselo desde la web www.curvycorners.net

3. Resaltando texto con javascript

Esta herramienta se usa mucho en paginas web cuando se necesita hacer una busqueda y mostrar los resultados, ya que siempre es importante remarcar de alguna manera que las palabras buscadas entan dentro del taxto de los resultados
Su uso es muy sencillo. Cree una entrada en su hoja de estilo para la clase highlight.
.highlight { background-color: yellow }
Resaltar los términos

Llame a la función highlight con el texto para resaltar. Para poner de highlight a todas las ocurrencias de “Bla” (case sensitive, tiene en cuenta mayúsculas y minúsculas) en todos los elementos li, utilice el siguiente código:

$ ( ‘li’). destacar ( ‘bla’);

El codigo es libre y gratuito y pueden descargarlo y ver ejemplos desde la web de johannburkard.de/blog/

4. Cambio de estilos CSS

Intercambiar estilos es una gran manera de variar el tema y el aspecto de una página web. El cambio de hojas de estilo puede ser necesario para dar cabida a diferentes resoluciones de pantalla, o tal vez que los usuarios puedan elegir una alternativa de fondo claro, con un diseño oscuro.

styleswitcher

Es muy facil de hacer, solo hay que incluir el siguiente script JQuery en el <head> del HTML:

<script type="text/javascript">
  $(".styleswitch").click(function() {
    $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
  });

</script>

Para dar opciones al usuario para cambiar de estilos, simplemente asigne a la clase styleswitch a un elemento HTML, con el atributo rel para hacer referencia a la ubicación de sus hojas de estilo.

<a href="#" class="styleswitch" rel="dark.css">Dark</a>
<a href="#" class=" styleswitch " rel="light.css">Light</a>

Por ejemplo al hacer clic en el segundo enlace de arriba, modificaria el DOM de tal manera que el atributo href tomará el valor de light.css.

5. Redimensionando el texto dinamicamente

Este truco se usa comunmente para facilitar a los usuarios controlar que tan grande o pequeño veran el texto de una pagina web sin tener que modificar la configuracion de su navegador

El uso de enlaces para aumentar, disminuir, o restablecer el tamaño del texto de una página web se puede implementar fácilmente usando jQuery.

<script type="text/javascript">
$(document).ready(function(){
  var section = new Array('span','.section2');
  section = section.join(',');

  // Reset Font Size
  var originalFontSize = $(section).css('font-size');
  $(".resetFont").click(function(){
    $(section).css('font-size', originalFontSize);
  });

  // Increase Font Size
  $(".increaseFont").click(function(){
    var currentFontSize = $(section).css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
    $(section).css('font-size', newFontSize);
    return false;
  });

  // Decrease Font Size
  $(".decreaseFont").click(function(){
    var currentFontSize = $(section).css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*0.8;
    $(section).css('font-size', newFontSize);
    return false;
  });
});
</script>

En el código anterior, notará una matriz llamada sección. Esto define los elementos HTML que pueden cambiar de tamaño.

A partir de ahí, se puede usar HTML básico para crear un texto, cambiar el tamaño de los enlaces.

<a class="increaseFont">+</a> | <a class="decreaseFont">-</a>
| <a class="resetFont">=</a>

<span>Font size can be changed in this section</span>
<div class="section1">This won't be affected</div>
<div class="section2">This one is adjustable too!</div>
Ejemplo

Supongamos que tenemos un DIV en su página con la clase redondeadas. Desea que todas las cuatro esquinas redondeadas, con un radio de un año y medio de EMS. Los siguientes CSS logrará esto:

]]> http://www.mydesign.com.es/blog/10-trucos-sencillos-de-jquery-para-desarrolladores/feed/ 0