Página 11 de 11«1291011
Moderador del foro: ZorG 
Foro uCoz » Ayuda a los webmasters » Soluciones personalizadas » jQuery (qué es, pa' qué es, etc.)
jQuery
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 151 | 12:52 PM
jQuery.ish: Una versión lite de jQuery


jQuery es un framework favorito a la hora de programar algo con JavaScript, también y aunque no tengo mucha experiencia también hice varias pruebas con Mootools, y algo que siempre me gustó de este último es su capacidad para ser modular, es decir, si necesitamos solamente los efectos podemos armar una versión light directamente desde el sitio oficial, evitando de esta forma sobrecargar nuestras aplicaciones con código innecesario. Algo que con jQuery no se puede hacer, al menos no de forma tan simple.



Para solucionar este pequeño inconveniente es que existe jQuery.ish, que no es más ni menos que una versión simplificada del framework original, que solamente cuenta con unos métodos que en general son los más utilizados, de esta forma ahorramos muchísimos bytes de transferencia al tan solo cargar las funciones necesarias.

El peso:
• Peso original: 1.54KB (548 bytes gzipped)
• Peso compilado: 1.15KB (463 bytes gzipped)

Una pequeña aclaración, cuando se habla de peso compilado se refiere al peso que se obtuvo pasando el código por Closure Compiler, la herramienta de Google para compactar código JavaScript.

Métodos soportados:
• hasClass()
• addClass()
• toggleClass()
• removeClass()
• toggle()
• show()
• hide()
• trim()


En lo personal soy bastante adepto a esto de utilizar solo lo necesario, sin embargo y en el caso de jQuery esto puede no ser del todo importante, principalmente por la posibilidad que tenemos todos los desarrolladores de utilizar el framework desde varios CDN gratuitos, de esta forma nos garantizamos el ahorro de la propia transferencia de datos desde el servidor a la vez que ganamos muchísima velocidad por lograr que el framework sea servido desde distintas locaciones más cercanas al visitante.

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 152 | 11:39 AM
jQuery: Convertir cualquier URL en un enlace


La siguiente función permite convertir cualquier URL contenida en un texto en un vínculo.

Code
$.fn.crearLinks = function() {
         var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
         this.each(function() {
             $(this).html(
                 $(this).html().replace(regexp,'<a href="$1">$1</a>')
             );
         });
         return $(this);
     }


Ver ejemplo en funcionamiento » »

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 153 | 11:54 AM
Grilla de imágenes de distintos tamaños animada con jQuery


Flex es un plugin para jQuery para la creación de galerías asimétricas de imágenes, de manera muy simple y con un resultado visualmente impactante.

Todos sabemos que uno de los grandes problemas a la hora de generar una galería de imágenes es el de normalizar el tamaño de las mismas, algo que dependiendo de la cantidad no es siempre sencillo ni tampoco queda bien estéticamente. Para solventar este problema podemos utilizar Flex, que mediante algunos cálculos y animaciones permite generar un set de imágenes con distintos tamaños, obteniendo un resultado muy agradable y funcional.

Visiten la demostración online.



Ejemplo de uso:

Inclusión de las bibliotecas a nuestro proyecto:
Code
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.flex.js"></script>


Estructura HTML:
Code
<div class="flex">
     <a bg="a" style="left:0px;top:0px;width:250px;height:125px;" width="325"  
     height="175">A</a>
     <a bg="b" style="left:260px;height:100px;top:0px;width:125px;" width="250"  
     height="175">B</a>
     <a bg="c" style="left:395px;height:250px;top:0px;width:75px;" width="125"  
     height="350">C</a>
     <a bg="d" style="left:480px;height:75px;top:0px;width:75px;" width="175"  
     height="150">D</a>
     <a bg="e" style="left:565px;height:125px;top:0px;width:200px;" width="200"  
     height="250">E</a>
     <a bg="f" style="left:480px;height:200px;top:85px;width:75px;" width="150"  
     height="225">F</a>
     <a bg="g" style="left:0px;height:100px;top:135px;width:75px;"  
     width="305" height="150">G</a>
     <a bg="h" style="left:260px;height:75px;top:110px;width:125px;"  
     width="200" height="200">H</a>
     <a bg="i" style="left:85px;height:140px;top:135px;width:165px;"  
     width="200" height="140">I</a>
     <a bg="j" style="left:565px;height:150px;top:135px;width:75px;"  
     width="125" height="275">J</a>
     <a bg="k" style="left:650px;height:75px;top:135px;width:75px;"  
     width="75" height="200">K</a>
</div>


CSS:
Code
<style>
     .flex {position:relative;width:850px;min-height:300px;margin:0 auto;
         border:0px solid red;margin-top:10px;}
     .flex a {background-color:white;display:block;width:100px;height:100px;
         border-radius:8px;position:absolute;background-repeat:no-repeat;
         background-position:center;border:3px solid white;cursor:pointer;
         text-align:left;text-shadow:1px 1px 20px #000;color:white;
         font-size:18px;font-weight:bold;text-indent:10px;
         line-height:30px;}
     [bg=a] {background-image:url(1.jpg);}
     [bg=b] {background-image:url(2.jpg);background-size:300px auto;}
     [bg=c] {background-image:url(3.jpg);}
     [bg=d] {background-image:url(4.jpg);}
     [bg=e] {background-image:url(5.jpg);background-size:auto 280px;}
     [bg=f] {background-image:url(6.jpg);background-size:auto 280px;}
     [bg=g] {background-image:url(7.jpg);background-size:auto 200px;}
     [bg=h] {background-image:url(8.jpg);}
     [bg=i] {background-image:url(9.jpg);background-size:auto 200px;}
     [bg=j] {background-image:url(10.jpg);background-size:auto 280px;}
     [bg=k] {background-image:url(11.jpg);background-size:auto 280px;}
</style>


Inicialización del plugin:
Code
<script type="text/javascript">
     $(function() {
         $(".flex").flex();
     });
</script>


Web: Flex

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
zatch_01
Mensajes: 269
Reputación: 2
Mensaje Nº 154 | 10:07 AM
Hasta despues de tu retiro nos seguis ayudando weep
Visita mi sitio si queres ver animes y pelis online www.portal-iw.do.am
jonatankpo19
Mensajes: 35
Reputación: 0
Mensaje Nº 155 | 3:43 AM
Quote (zatch_01)
Hasta despues de tu retiro nos seguis ayudando

Que se retiro GUARAGUAO?

dulcemasc
Mensajes: 1
Reputación: 0
Mensaje Nº 156 | 7:10 PM
Hola! en mi Sitio Web http://comonace.com/ tengo problema de velocidad de carga, no se nada de programación. He pensado seriamente en contratar a un programador para que me solucione el problema o al menos que mejore un poco0.
adjunto captura de pantalla

Hola! me Presento soy Dulce y tengo un sitio Web como nace muchas gracias al equipo de http://foro.ucoz.es/ por la oprtunidad
Foro uCoz » Ayuda a los webmasters » Soluciones personalizadas » jQuery (qué es, pa' qué es, etc.)
Página 11 de 11«1291011
Búscar: