Artículos con la etiqueta 'scriptaculous'


Shadowbox 3.0 beta

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:

Continuación ...

Acordeón simple con la clase USimpleTabStrip

La clase USimpleTabStrip , presentó TabStrip simple discreto , también se puede utilizar para crear un sencillo menú de acordeón .
offerti da Scriptaculous : Uso de los efectos de BlindUp() y BlindDown() ofrecidos por Scriptaculous :

1
2
3
4
5
6
7
8
9
10
la función init () {
USimpleTabStrip ( ) ; UTS USimpleTabStrip = new ();
; UTS Init ().;
function ( e ) { UTS. OnShow = function (e) {
( e ) ; . Efecto BlindDown nuevo (s);
}
function ( e ) { UTS. OnHide = function (e) {
( e ) ; . Efecto BlindUp nuevo (s);
}
}

Y la reubicación de los elementos HTML ( código HTML ):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
"accordion" > < div class = "acordeón">
"#acc1" > Accordion 1 < / a > < un href = "# ACC1"> Accordion 1 </ un >
"acc1" >< / a > < un name = "ACC1"> </ un >
< div >
h1 > < h1 > # 1 de contenido </ h1 >
p > < p > Bla bla bla .... </ p >
</ div >

"#acc2" > Accordion 2 < / a > < un href = "# ACC2"> Acordeón 2 </ un >
"acc2" >< / a > < un name = "ACC2"> </ un >
< div >
h1 > < h1 > # 2 Contenido </ h1 >
p > < p > Bla bla bla .... </ p >
</ div >

"#acc3" > Accordion 3 < / a > < un href = "# ACC3"> Acordeón 3 </ un >
"acc3" >< / a > < un name = "ACC3"> </ un >
< div >
h1 > < h1 > # 3 Contenido </ h1 >
p > < p > Bla bla bla .... </ p >
</ div >

</ div >

Usted recibe un acordeón menú simple que se puede utilizar muy rápidamente.

Continuación ...

TabStrip simple discreto

USimpleTabStrip discreto JavaScript es mejorar los vínculos de anclaje clásico (todavía) en una página HTML. Esta fuente es una mejora de la función presentada en el de Tabstrip discreto . En esta versión, así como alinear el código de la Versión 1.6 de prototype.js ha creado una clase real para gestionar el TabStrip. La liberación se presenta aquí es muy simple y directo. Su trabajo principal consiste en la adición de un evento de clic al enlace normal de anclaje. Estilos CSS tampoco se presentó, sólo para dejar la máxima libertad de acción, pero usted puede conseguir un TabStrip eficaz con unas pocas líneas adicionales de código CSS, consulte Adición de estilos CSS a continuación.

HTML

La clase USimpleTabStrip trabajando en un HTML simple, la sftuttando de anclaje ( &lt;a name&gt;&lt;/a&gt; ):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<-! Simple lista de enlaces de la página ->
< ul >
= "#tbs1" > Link 1 < / a >< / li > < a > < un href = "# tbs1"> Link 1 </ un > </ a >
= "#tbs2" > Link 2 < / a >< / li > < a > < un href = "# tbs2"> Link 2 </ un > </ a >
= "#tbs3" > Link 3 < / a >< / li > < a > < un href = "# tbs3"> Link 3 </ un > </ a >
</ ul >

<-! Bloques / pestañas ->

"tbs1" >< / a > < un name = "tbs1"> </ un >
< div >
h1 > < h1 > Listado # 1 </ h1 >
p > < p > Bla bla bla .... </ p >
</ div >

"tbs2" >< / a > < un name = "tbs2"> </ un >
< div >
h1 > < h1 > Lista # 2 </ h1 >
p > < p > Bla bla bla .... </ p >
</ div >

"tbs3" >< / a > < un name = "tbs3"> </ un >
< div >
h1 > < h1 > Data # 3 </ h1 >
p > < p > Bla bla bla .... </ p >
</ div >

funziona da contenitore. La etiqueta div justo por debajo del ancla a el trabajo como un contenedor.

Continuación ...

Google AJAX API Biblioteca: un punto de inflexión para los desarrolladores

Bibliotecas AJAX API 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!

Continuación ...

Shadowbox assetURL: establecer la ruta de la imagen

Cuando Shadowbox abre su ventana para mostrar el contenido (imágenes, iframes, películas, etc ...), muestra, a la espera, un gif animado que viene en el paquete. Si la página está utilizando Shadowbox se encuentra en el mismo nivel de la carpeta de imágenes, todo funciona bien. Por defecto, de hecho, busque el siguiente gif animado Shadowbox images / loading.gif - o las imágenes / carga light.gif-si elige estilos de luz (shadowbox-light.css). De lo contrario, se corre el riesgo, ya menudo no accorgesene incluso, si estamos en un árbol diferente, se genera un código de buena 404 - página no la viga, no en nuestro expediente encontrado!

Para resolver este problema basta con iniciar Shadowbox con un parámetro adecuado que indica la ruta completa de la carpeta de imágenes: undolog.com de, por ejemplo, puse el gif animado de carga directamente en la carpeta de imágenes en la raíz (como millones de otros sitios :) . Para que la carpeta accesible a Shadowbox, independientemente de la ruta, pongo semplicemenete:

1
2
/ / Inicializa shadowbox assetURL con el parámetro
assetURL : 'http://www.undolog.com/' } ) ; Shadowbox Init ({assetURL: "http://www.undolog.com/ '}).;

Continuación ...

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.

imagen

imagen 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.

Continuación ...

Añadir nuevas transiciones de Scriptaculous

No todo el mundo sabe, tal vez, pero puede sobrescribir o añadir efectos de transición scriptaculous.js muy fácil y rápidamente. Transiciones Scriptaculous, efectos utilizados en la determinación del tipo de animación, como los que no están implementadas en Flash (recomiendo un vistazo a este PDF de la gran Robert Penner ), pero es el efecto neto - de hecho - el mismo . Además, el paquete de Scriptaculous, algunas transiciones no son invence actual, basado en ActionScript. Si queremos añadir una nueva transición a Scriptaculous sólo tiene que insertar este código antes de usar cualquier efecto:

1
2
3
= function ( pos ) { Efecto. Transitions. = Función exponencial (pos) {
- Math. pow ( 1 - pos , 2 ) ; return 1 - Math pow (1 - pos, 2).;
}

A partir de ahora podemos usar la nueva transición exponencial en todos los efectos de Scriptaculous. Por una serie útil de las transiciones - casi una portabilidad a Actionscript Scriptaculous - ver Agregue un poco de picante a Scriptaculous .

Continuación ...

Scriptaculous Effect.Tween: cómo funciona

De todas las bibliotecas "Web 2.0" disponibles, scriptaculous es sin duda el más pobremente documentada! En la página web oficial, suele ser lenta, la documentación es incompleta, mal hecho y difícil de usar. Con las últimas versiones, entonces, algunas nuevas características están completamente ausentes, así como el nuevo núcleo de efecto Tween (Effect.Tween). Este último, al igual que Tween en Flash, permite manipular transiciones personalizadas. SINOPSIS Su base es la siguiente:

Continuación ...

Luz galería: 2.0.0_rc1 Lightview

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

Continuación ...

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

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
"images/image-1.jpg" rel = "lightbox" title = "my caption" > image #1 < / a > < un href = "images/image-1.jpg" rel = "lightbox" title = "my caption"> de la imagen # 1 </ un >

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

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

Entrenarse con un adversario imaginario 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:

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
"beach.jpg" rel = "shadowbox[Vacation]" > The Beach < / a > < un href = "beach.jpg" rel = "shadowbox [de vacaciones]"> La Playa </ un >
"pier.jpg" rel = "shadowbox[Vacation]" > The Pier < / a > < un href = "pier.jpg" rel = "shadowbox [de vacaciones]"> The Pier </ un >

Si desea configurar algunas opciones ( ver página web para la lista completa ) sólo tiene que utilizar la siguiente sintaxis:

1
"myimage.jpg" rel = "shadowbox;options={overlayOpacity: 0.5, resize: false}" > My Image < / a > < un href = "myimage.jpg" rel = "shadowbox; opciones = {overlayOpacity: 0.5, tamaño: false}"> Mi imagen </ un >

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

Continuación ...