Artículos con la etiqueta 'discreta'


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

jQuery: cómo construir una extensión de Plugins

Al igual que todas las bibliotecas de este tipo también jQuery le permite extender su funcionalidad básica el uso de plugins real. Respetando las reglas de su funcionamiento, es decir, el retorno es siempre un puntero al elemento seleccionado o jQuery sí mismo, usted puede escribir un plugin con unas pocas líneas de código. Tomemos por ejemplo el proyecto de código en jQuery contra todos: un punto de referencia con 5 explorador , que era (después de la corrección reportados por Luca ):

1
2
3
4
5
) . css ( 'cursor' , 'pointer' ) . click ( $ ('H2.dropdown'). 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 ();....
}
);

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

Flash Técnicas de texto de reemplazo

La técnica de reemplazo de texto que hoy presento es en algunos aspectos, muy interesante. A diferencia de la clásica imagen usando CSS para reemplazar a la operación , esta técnica utiliza una película de Flash para sobrescribir los títulos de nuestro sitio. A pesar de ser un poco más complejo, que requiere la creación de una película Flash y el uso de JavaScript, produce una serie de ventajas considerables:

  • Mantiene el acceso a la página mediante un Verdadero discreto Javascript para que los rastreadores, arañas seguir viendo la página como HTML simple y correcta
  • No requiere la creación de n por n títulos de imagen. Sólo una película para reemplazar todos los títulos de nuestro sitio, con un ahorro considerable en términos de la descarga
  • También le permite crear títulos simples pero no las fuentes normalmente se utilizan en la Web
  • Texto se puede representar en HTML, gracias a las características de Flash
  • El texto se puede seleccionar
  • Como se puede insertar una película Flash y animaciones interactivas de cualquier tipo

Se le nota, además, que en este procedimiento son prácticamente CSS en cuenta!

Continuación ...

Javascript discreto: un poco de "ojo por la claridad y para impostores

Algunas secuencias de comandos, y un poco de marketing web que utilizar algunas funciones Javascript para no intrusiva (discreto), incluso cuando no están en absoluto. ¿Qué hace que una secuencia de comandos (normalmente JavaScript) no es intrusiva? En principio, una secuencia de comandos JavaScript no es intrusivo, cuando que usted puede hacer sin ella! En pocas palabras! En el desarrollo de una facilidad de uso del sitio Web de la misma no debe depender de ningún tipo de guión. Sólo en este caso tenemos un guión discreto genuino.

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

Discreto 2,0 SWFObject

SWFObject SWFObject es un script de JavaScript se utiliza para insertar contenido Flash en las páginas Web Su función principal es eliminar la solicitud para activar el control por parte de Microsoft Internet Explorer (que, dicho sea de paso, está siendo descontinuado - ver aquí ) y, lo más interesante es la capacidad de comprobar automáticamente e instalar Flash Player, si es necesario. SWFObject puede ser considerado una buena alternativa para el kit para instalar / detectar suministrados por el mismo Flash de Adobe se genera dentro de la IDE (en todos los sus versiones). Con la versión 2.0 , SWFObject mejora su rendimiento y su uso. Como se indica en la documentación oficial , se trasladó a Google Code, nuevo en esta versión son tantos como para que sea NO es compatible con versiones anteriores. Esto se traduce prácticamente en una revisión completa del código para los que decide actualizar una versión anterior de SWFObject 2.0.

El guión está ahora alineado con los últimos estándares, tanto desde el punto de vista sintáctico que "no intrusiva". Es compatible con todas las características anteriores, tales como una rápida instalación del reproductor de Flash, con un código más claro y fácil de usar. El cambio de parámetros, por ejemplo, JavaScript a Flash Player (y por lo tanto a nuestra película) es ahora mucho más ligero y versátil. También se introdujeron dos modos principales: estático y dinámico, dependiendo del proceso de diseño de tipo y la página que estamos haciendo.

Bon y realmente me gustó porque es la herramienta en línea que genera un código de SWFObject nosotros.

LINK:

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