Fue lanzado en este momento (gracias a la alerta del autor Michael Jackson JI ) versión 3.0 beta Shadowbox.js . Además de los nuevo diseño del sitio aquí es el cambio más importante que antes de esta versión:
Artículos con la etiqueta 'mootools'
Shadowbox 3.0 beta
Camelize, CamelCase
Como se ve en el puesto de variedades de la codificación y la codificación de los enfoques que un desarrollador puede tener que resolver un problema son múltiples y diversas para el mismo lenguaje de programación utilizado. Así es como algunos de los frameworks de JavaScript más populares han resuelto una simple función de CamelCase :
Prototype.js
Prototype.js , versión 1.6.0.3, explícitamente se propone un método camelize() para hacer el CamelCase en una cadena. El enfoque del autor es muy sencilla y el código se explica por sí mismo. En este caso no se hizo uso de expresiones regulares!
1 2 3 4 5 6 7 8 9 10 11 12 13 | ( ) { camelize: function () { this . split ( '-' ) , len = parts. length ; partes var = esta división ('-'), len = longitud de las piezas..; len == 1 ) return parts [ 0 ] ; if (len == 1) piezas de retorno [0]; this . charAt ( 0 ) == '-' camelized var = esta charAt (0) == '. -' 0 ] . charAt ( 0 ) . toUpperCase ( ) + parts [ 0 ] . substring ( 1 ) ? Las partes [0]. Charat (0). ToUpperCase () + partes [0]. Substring (1) 0 ] ; : Partes [0]; var i = 1 ; i < len ; i ++ ) for (var i = 1, i <len; i + +) i ] . charAt ( 0 ) . toUpperCase ( ) + parts [ i ] . substring ( 1 ) ; camelized + = partes [i] charAt (0) toUpperCase () + partes [i] substring (1)...; volver camelized; } |
jQuery contra todos: un punto de referencia con 5 navegador
Un buen desarrollador no tiene ningún problema para pasar de un lenguaje de programación a otro. La decisión de centrarse en un entorno particular idioma, marco o desarrollo, y obedece más a la disponibilidad de tiempo y el tipo de trabajo que se lleva a cabo. Sin embargo, un factor importante que puede influir en la elección de los "marcos" como es la simpatía y el afecto que pueden madurar con el tiempo.
En concreto, quería analizar algunos - ciertamente no todos - los marcos de JavaScript disponibles en la actualidad, ya que incluso le "aconsejó" a echar un vistazo sobre todo en jQuery .
Los creadores de mootools (uno de los frameworks de JavaScript más populares) han puesto a disposición una herramienta para ejecutar una prueba de velocidad y la validez de los cinco conocidos frameworks de JavaScript: Slickspeed . Esta prueba, el resultado no es descontado a todos, es importante para funcionar como marcos de Javascript del lado del cliente, que son ejecutados por el navegador. Es precisamente por esta razón que algunos encuentran Safari más rápido que Internet Explorer o Google Chrome más rápido que Firefox . Sin embargo, esto a menudo depende del tipo de página que está viendo. En efecto, bien puede ocurrir que un sitio en particular es realmente más "rápido" cuando se ve en Safari, pero esto no quiere decir que "todos los sitios" será más rápida con Safari! Obviamente esto es cierto para cualquier otro navegador.
El índice de referencia
En la prueba que hice con Slickspeed he comparado los navegadores disponibles en mi equipo (Windows Vista de 64 bits Utilmate - Intel Core 2 Quad 2,4 GHz con 8 GB de RAM).
Desafortunadamente, las pruebas no son capaces de correr con Internet Explorer 7, ya que el coche se estrelló, incluso yendo fuera de escala con los resultados! Una vez más, felicitaciones Microsoft.
Yo crercato para mantener el mismo estatus de la PC durante la prueba, abrir el navegador y no de forma individual mediante el envío de ningún otro proceso en marcha.
Nota: Si usted siente que también se ejecutan uno o más de estas pruebas, se puede comentar este post en el caso de los resultados de "curioso" y varios.
Google Chrome es muy rápido los resultados, con un valor de 68 (promedio) en el ensayo con jQuery . El más lento, sin embargo, fue Flock , a pesar de venir de la misma "madre" de Mozilla. Este pobre desempeño de Flock es realmente curioso como las redes sociales de corte, ya que es precisamente la web 2.0 redes sociales para tomar ventaja de los marcos de JavaScript disponibles, a fin de proporcionar una experiencia de navegación verdaderamente innovador y la interacción.
Sorprendentemente latidos Firefox y Opera también tiene un "pequeño y agradable, logrando incluso un 74 en el desempeño de Dojo ! FireFox y Safari, en general, son similares, con Safari más rápido en las pruebas con Mootools y jQuery.
¿Qué marco de elegir?
Si no te importa que prueba la velocidad de ejecución y no se preocupe por el tamaño normal en Kbytes del mismo marco, la respuesta podría ser "lo que te gusta" o, si se quiere, "lo que usted sabe mejor o es más armoniosa con su estilo de programación. "
En última instancia, estos marcos se verá un poco 'todos (véase por ejemplo el uso de $), a pesar de algunas diferencias importantes y sustanciales que pueden saltar a los ojos de un experto o realmente empujó el uso de una biblioteca en particular. En principio, de hecho, todo lo que se puede hacer con jQuery, por ejemplo, que usted puede hacer muy bien con mootools o prototipo! Si jQuery tiene una sintaxis muy compacto, ya que todos los métodos siempre devuelven el objeto jQuery base, creando así interminables filas de oggetto.metodo().metodo().metodo()... se dice que todo esto es los costos de una fortaleza, especialmente para aquellos que se han de depurar!
Las bibliotecas como prototype.js pecado, quizá en la ausencia de efectos, incluso simple, obligando a los desarrolladores a implementar como un spin-off scriptaculous.js , pesado y muy lejos de la elección de la primera biblioteca.
Un ejemplo
Esta última razón, por ejemplo, me llevó a sustituir el prototipo unido / Scriptaculous con jQuery para crear paneles interactivos / undolog.com animados aquí en la barra lateral. De hecho, incluso utilizando la API de Google para importar bibliotecas, que es un desperdicio para cargar todas las bibliotecas y scriptaculous un slideUp slideDown. Para más información y un ejemplo, aquí está el código Javascript, ya que fue junto con el prototipo / Scriptaculous:
1 2 3 4 5 6 7 8 9 10 11 12 13 | / / Prototipo / scriptaculous ) . each ( $ $ ('H2.dropdown "). Cada uno ( element ) { función (elemento) { = "pointer" ; .. elemento de estilo cursor = "puntero"; 'click' , elemento. observe ('click', event ) { función (evento) { this . next ( ) . style . display == "" ) new Effect. BlindUp ( this . next ( ) , { duration : .5 } ) ; si (.. this. next () el estilo de visualización == "") Efecto nuevo BlindUp (this. next (), {duration: 0.5});. Effect. BlindDown ( this . next ( ) , { duration : .3 } ) ; . Efectos más nuevo BlindDown (this. next (), {duration: 0.3}); event ) ; Detener Evento (evento).; } ) } ); |
y ahora con jQuery:
1 2 3 4 5 6 7 8 9 10 | / / JQuery ) . each ( $ ('H2.dropdown "). Cada uno ( i ) { función (s) { ) . css ( 'cursor' , 'pointer' ) . click ( $ (This). Css ('cursor', 'puntero'). Haga clic en ( function () { $ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; si (.. $ (this) siguiente () es (:) "ocultos") slideDown $ (this) al lado de () (); más $ (this) siguiente () slideUp ();.... } ); } ); |
En definitiva, una mirada más cercana, no creo que hay una gran diferencia! Pero como he dicho antes ... la pregunta es "también" de gusto personal.
jQuery cambio de imagen
En estos días (con el asesoramiento ...) Estaba echando un vistazo a jQuery , una gran biblioteca en el estilo de prototype.js , scriptaculous.js , MooTools , por así decirlo ... y ahora aquí está el sitio ha sido rediseñado por completo:
Gran comienzo para ampliar mis horizontes en este tipo de bibliotecas! Poco publicar algún artículo interesante, sobre todo sobre las diferencias entre jQuery y otras bibliotecas "similar".
Google AJAX API Biblioteca: un punto de inflexión para los desarrolladores
Google , en el último período, ha lanzado una gran cantidad de herramientas para desarrolladores, la actualización constante de sus emisiones. Ahora tiene un acuerdo con el popular marco de AJAX, y no sólo para centralizar la distribución de la librería jQuery , Prototype , script.aculo.us , MooTools y Dojo !
En la práctica, es posible acceder a estas bibliotecas aprovechando la infraestructura y la red de Google, con ventajas significativas en términos de velocidad y seguridad.
La velocidad, la carga, está garantizada por la misma red que Google, además de proporcionar por sí mismo una estructura de servidores distribuidos, permite (por defecto) para cargar comprimido (gzip / minify) bibliotecas. El Google hosting más cercano a la solicitud será utilizada para enviar el código y, si no para lograr un temporal o hacia abajo, sin embargo, la red se asegurará el suministro de Google de código Javascript!
Todos los clones de la mesa de luz en una matriz dinámica
Planetozh ha creado un hermoso paisaje de una herramienta dinámica que hacer una lista de todas las bibliotecas de Javascript como la mesa de luz.
El uso de un panel (ver foto a la izquierda) con una serie de "tics" (casilla), que indican las distintas funciones de las bibliotecas, puede ejecutar un filtro, para obtener la lista de una o más bibliotecas que hacen el trabajo. Esperamos que el autor mantiene actualizada esta gran página, muy útil para sacar a una de las bibliotecas de numerosos y poderosos de este tipo.
Luz galería: 2.0.0_rc1 Lightview
. Esta es otra biblioteca recién liberados discreto JavaScript para galerías de imágenes y más Lightview en 2.0.0_rc1 liberación , también se agrega las funciones de "abrir" la ventana con el contenido que va más allá de la simple imagen: películas Flash, QuickTime , Forma y IFRAME! En comparación con la versión anterior (1.1.0 - que sólo se ocupa de las imágenes), entonces, esta versión candidata es características mejoradas también están presentes en otras bibliotecas . . Los instrumentos necesarios Lighview que funciona muy bien conocidos son el prototipo 1.6.0.2 y Scriptaculous 1.8.1 . Gliattributi biblioteca se utilizan para administrar la class y rel .
Un aspecto interesante de esta biblioteca es el extremo cuidado con que el gráfico aparece.
Puntuación: 9 - Inicio Lightview
Biblioteca de la luz: Slimbox por un Shadowbox, galerías en Javascript
Algunos podrían decir - y con razón - lo suficiente! Bibliotecas de JavaScript (discreto - no intrusiva o en parte) para gestionar imágenes y galerías que hay tantos. De todos modos aquí está la lista, con los pros y los contras, lo mejor que he probado.
Slimbox 01:41
Extremadamente mínimo, 7K (versión 1.41), requiere mootools para trabajar. Como se indica en la página principal es un clon gráfico real mesa de luz , veremos más adelante. Sinceramente, aparte de la compacidad extrema de la biblioteca hace peculiares características no posee. En el mismo sitio, sin embargo, también se puede encontrar un script para generar reflexiones en tiempo de ejecución ... es posible que desee limitar este 
Nota: -6 - Slimbox Inicio, Reflection.js caseros para MooTools
Lightbox2
Uno de los más conocidos y sencillos. Administra las imágenes de esta versión son (por lo que no funciona con QuickTime, Flash, o de otro tipo). Para operar, requiere de Prototype y Scriptaculous . Utilice el atributo rel para identificar los vínculos de las imágenes a procesar:
1 |
Al igual que las otras bibliotecas que vamos a ver, compatible con el modo de diapositivas, introducir cualquier identificador entre corchetes en una serie de enlace / imagen:
1 2 3 | "images/image-1.jpg" rel = "lightbox[roadtrip]" > image #1 < / a > < un href = "images/image-1.jpg" rel = "lightbox [roadtrip]"> de la imagen # 1 </ un > "images/image-2.jpg" rel = "lightbox[roadtrip]" > image #2 < / a > < un href = "images/image-2.jpg" rel = "lightbox [roadtrip]"> de la imagen # 2 </ un > "images/image-3.jpg" rel = "lightbox[roadtrip]" > image #3 < / a > < un href = "images/image-3.jpg" rel = "lightbox [roadtrip]"> de la imagen # 3 </ un > |
Puntuación: 6 - Lightbox2 Arriba
LIGHTWINDOW 2.0
Esto también es muy común! Después de todo ¿cómo puede saber que uno está acostumbrado? . Sin embargo, es muy completo y versátil. En el sitio se encuentra la solicitud de donaciones para la compra de un Mac ... y presionar un poco invasivo ... Sin embargo, como el anterior, pero para su funcionamiento, requiere la presencia de Prototype y Scriptaculous . A diferencia de su predecesor, sin embargo, esto le permite ver los tipos de archivos moltisiimi: a partir de las imágenes, películas QuickTime, películas Flash, páginas externas HTML y PDF. ) altri obbligatori ( class e params - per impostare il comportamento della libreria). Por el contrario, utiliza varios atributos, algunos opcionales ( author, caption y title ) que no obligatoria ( class y params - para establecer el comportamiento de la biblioteca). Por ejemplo, para ver una galería o presentación de diapositivas con el atributo rel :
1 2 3 | "gallery/0-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Left Behind" caption = "Look's super tasty!" author = "Unknown" > image #1 < / a > < un href = "gallery/0-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Left Behind" caption = "Mira es súper sabroso!" title = "Desconocido"> de la imagen # 1 </ uno > "gallery/1-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Beware of warewolves..." caption = "I shouldn't be doing this when I am hungry" author = "Unknown" > image #2 < / a > < un href = "gallery/1-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Cuidado con warewolves ..." caption = "Yo no debería estar haciendo esto cuando tengo hambre" imagen author = "Desconocido"> # 2 </ un > "gallery/2-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "That was good!" caption = "Take that sushi!" author = "Unknown" > image #3 < / a > < un href = "gallery/2-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Eso estuvo bien!" caption = "Tome ese sushi!" title = "Desconocido"> de la imagen # 3 </ un > |
Puntuación: 8 - Inicio LightWindow 2.0
Shadowbox 1.0b
Aunque la versión 1.0 beta, esta es quizás la biblioteca más completa, tanto desde el punto de vista funcional, con el apoyo de las bibliotecas. Para su funcionamiento, de hecho, se puede elegir entre una variedad de marcos, con el archivo de "adaptador" especialmente fabricados y suministrados por el autor:
- Yahoo! User Interface Biblioteca (Yahoo, Dom, eventos, anim)
- Ext. (independiente core.js-ext)
- Prototype + Scriptaculous
- jQuery
- MooTools (requiere Fx.Styles y sus dependencias)
- Dojo Toolkit (gracias Peter Higgins)
El efecto visual (configurable a través de la piel / css), entonces, a diferencia de los otros, es definitivamente más atractivo. Los atributos que se utilizan son sólo rel donde, en su espacio interior son todos los demás parámetros de configuración. Por ejemplo, para crear una galería, sólo tiene que utilizar:
1 2 |
Si desea configurar algunas opciones ( ver página web para la lista completa ) sólo tiene que utilizar la siguiente sintaxis:
1 |
En Internet se pueden encontrar, tales como JS Highslide . De hecho, si usted desea reportar alguna otra biblioteca ... En fin, personalmente, prefiero Shadowbox por simplicidad, escalabilidad y la cruz-marco.
Puntuación: 9 - Arriba 1.0b Shadowbox
Acordeón 2.0
Él ya había hablado de esta discreta biblioteca Javascript construido por el mismo autor LightWindow 2.0 . Ahora se lanza la versión 2.0, que siempre hace uso de scriptaculous .
Entre los más interesantes es su capacidad para "comprometer" el acordeón dentro de la otra, tanto horizontal como verticalmente en el MODL.
A continuación, lejos de la operación original de los clásicos se ha añadido Accrodion el comportamiento de apertura / cierre. En el sitio se puede descargar el script (marcados con las palabras todavía 1,0?) y ejemplos de código de acceso.
Acordeón para Scriptaculous
Finalmente, un guión muy bien en JavaScript (descarga de Acordeón 1.0 ), simple y ligero, que le permite añadir el componente Accordion de Flash y mootools biblioteca con scriptaculous . De hecho, este objeto había desaparecido, lo cual es útil en muchas ocasiones. Esta versión es muy simple y le permite crear orizzonali acordeón que es vertical. El guión es libre , pero usted puede hacer una pequeña donación para ayudar al autor a comprar un buen MacPro
Para utilizar sólo tiene que insertar estas líneas de código simple:
1 2 3 | "text/javascript" src = "javascript/prototype.js" >< / script > < script de type = "text / javascript" src = "javascript / prototype.js"> </ script de > "text/javascript" src = "javascript/effects.js" >< / script > < script de type = "text / javascript" src = "javascript / effects.js"> </ script de > "text/javascript" src = "javascript/accordion.js" >< / script > < script de type = "text / javascript" src = "javascript / accordion.js"> </ script de > |
El código HTML es inmediata:
1 2 3 4 5 6 7 8 9 10 11 | "accordion_toggle" > Title Bar < / h3 > < h3 class = "accordion_toggle"> Barra de título </ h3 > "accordion_content" > < div class = "accordion_content"> ... </ div > ... ... ... "accordion_toggle" > Title Bar < / h3 > < h3 class = "accordion_toggle"> Barra de título </ h3 > "accordion_content" > < div class = "accordion_content"> ... </ div > |
Un ejemplo práctico:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | / / Sintaxis general 'container-selector' , options ) ; acordeón nuevo ('contenedor-selector', opciones); / / Ejemplo Horizontal new accordion ( '#top_container' , { horizontalAccordion acordeón var = new ('# top_container', { classNames: { , cambiar: "horizontal_accordion_toggle, , toggleActive: "horizontal_accordion_toggle_active, contenido: "horizontal_accordion_content ' }, DefaultSize: { ancho: 525 }, dirección: 'horizontal' }); / / Vertical de acordeón new accordion ( '#bottom_container' ) ; verticalAccordion acordeón var = new ('# bottom_container'); |
Últimos Comentarios
Simon : Se molesta perturbado de nuevo y utilizar ese espacio para estas cosas ... sin embargo, no funciona ...
Giovambattista Fazioli : @ Simon: ¿qué puede ser debido a la sintaxis que utiliza, específicamente para PHP 5 +,...
Simon : He probado la noche anterior poner todo en functions.php, formas bien, jQuery, y las fichas que jQueryUI ...
Giovambattista Fazioli : @ Simon: Yo recomiendo la limpieza de ingresar un código como el de ...
Simon : @ Giovambattista Fazioli: Gracias por su paciencia, todo está claro ... ahora me siento ahora, ...