Moderador del foro: ZorG |
Foro uCoz Ayuda a los webmasters Soluciones personalizadas jQuery (qué es, pa' qué es, etc.) |
jQuery |
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.
|
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.
|
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.
|
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
|
ya gracias
|
| |||