Según lo prometido aquí están algunos ejemplos concretos de JavaScript discreto, versátil y potente herramienta si se utiliza correctamente. En el sitio / blog Ryan Johnson se pueden descargar dos ejemplos muy grande de JavaScript discreto:
- Control.Tabs: Discreto aquí CSS de Prototype
- Control.Modal: Discreto CSS Modal Windows y Mesa de Prototype
Ryan Johnson, en su escritura, la biblioteca utiliza Prototype , al igual que muchos de los demás. También ha escrito algunas extensiones a la relativamente Prototype , presentó a continuación - en una forma diferente - en la última versión de la biblioteca.
El uso de prototipos para ilustrar el funcionamiento de la discreta código JavaScript suele ser más cómodo - como veremos más adelante, pero aquí hay un ejemplo crudo que no requiere de bibliotecas externas. Comenzamos por recordar que el concepto detrás del discreto JavaScript es empezar desde cualquier página HTML (estándar y no necesariamente por escrito por nosotros - punto fuerte más importante) y el uso de Javascript para hacer algunos cambios.
Schematimamente la idea es realizar una función que analiza el código HTML, y luego atraviesa el DOM y, en particular, para añadir o cambiar la funcionalidad. Normalmente dos métodos son explotados para ejecutar código Javascript para cargar una página: la primera es lo que no se incluya el código de la función, y luego dejar que el navegador ejecuta código inmediatamente cargado en el punto donde aparece la llamada:
El mismo resultado se obtiene al incluir el código:
1 |
Sin embargo, cuando se debe operar en el DOM de una página que se supone una carga completa, que todos los TAG de la página está presente y disponible para ser rastreados. Así que la mejor solución se convierte en el uno para asegurarse de que la página está completa. Esto es posible gracias a la participación del cuerpo de la etiqueta proceso de carga, por ejemplo, que se libera cuando la carga de la página se ha completado.
1 2 3 | miafunzione ; ventana onload = myfunction.; / / O, que es lo mismo function ( ) { alert ( "Hello" ) ; } . ventana onload = function () {alert ("Hola");} |
Evitar, por supuesto, la solución jurídica que sería un eufemismo para llamar a la intrusa:
1 | "miafunzione()" > < cuerpo onload = "myFunction ()"> |
Otra técnica, más grueso y molestos por igual (al igual que fuerza al usuario final para colocar el código en un lugar determinado), es poner el guión al final del documento antes de que el cuerpo de la etiqueta de cierre, ahora obsoleto y técnica utilizada en casos raros (ver Google Analytics).
Aún mejor es utilizar el método siguiente:
1 2 3 4 5 6 7 | window. addEventListener ) { if (addEventListener window.) { "load" , miafunzione , false ) ; ventana. addEventListener ("carga", mifuncion, false) ¾ Í ( window. attachEvent ) { } Else if (window. attachEvent) { "onload" , miafunzione ) ; ventana. attachEvent ("onload", mifuncion) ¾ Í { Else {} createSubMenus; ventana. createSubMenusÍ onload = ¾ } |
Incluso esta pieza de código se incluye en una función. Se añade un detector de eventos para el evento de carga de la ventana, llamando a nuestra función miafunzione() . . Los navegadores modernos, como Firefox, por ejemplo, se utiliza la función addEventListener() definida en la especificación DOM Level 2, mientras que Internet Explorer utiliza la función de propiedad attachEvent() . Sin embargo no estamos en la perfección de esta manera, de hecho, sustituir todos - todos - ". No intrusiva" eventos onload creados por otros sistemas de escritura, que no es realmente
Para resolver rápidamente el problema, que por el diferente comportamiento del navegador sería menos complicado de explicar aquí, es cómodo de usar como libreirie prototipo proporciona un'elengantissimo método para superar el problema:
1 | window , 'load' , function ( ) { alert ( "Hello" ) ; } ) ; Evento. Observe (ventana, 'load', function () {alert ("Hola ");}); |
La sintaxis es muy obvia y espectacular! La ventaja para los que no lo había entendido, es que se puede escribir:
1 2 | window , 'load' , function ( ) { alert ( "Hello 1" ) ; } ) ; Evento. Observe (ventana, 'load', function () {alert ("Hola un ");}); window , 'load' , function ( ) { alert ( "Hello 2" ) ; } ) ; Evento. Observe (ventana, 'load', function () {alert ("Hola 2 ");}); |
Sobre la carga de la página se mostrará antes de la alerta "Hola 2" y alerta "Hola 1". Básicamente se carga en un FILO (salida de la primera entrada de apellido) de la pila, al tiempo que garantiza la ejecución de todos los eventos asociados a la carga del documento, exactamente lo que quería. De esta manera, una página puede cargar - prácticamente - JavaScript interminables discreto que se enganchan a cargar el documento.
Pero, ¿qué se puede hacer con esta técnica? Muchas cosas interesantes. Un ejemplo que podemos comentar (véase también el prototipo: El uso del signo doble dólar ($ $) ) viene de Tobie Langel . Con unas pocas líneas de código y descargar librerías Prototype y Scriptaculous se puede dar un buen efecto en el anclaje clásico de nuestras páginas. En primer lugar crear una página HTML con el siguiente código:
1 2 3 4 5 6 7 8 | = "#capitolo1" > Vai al capitolo 1 < / a >< / p > < p > < un href = "# Capítulo 1"> Ir al Capítulo 1 </ un > </ p > < / p > < p > </ p > < / p > < p > </ p > .... < / p > .... una "gran cantidad de < p > </ p > .... sólo como un ejemplo "capitolo1" > Capitolo 1 < / h1 > < h1 id = "Capítulo 1"> Capítulo 1 </ h1 > |
Incluir la página:
1 2 3 4 5 6 7 8 9 10 11 12 | "prototype.js" type = "text/javascript" charset = "utf-8" >< / script > < script de src = "prototype.js" type = "text / javascript" charset = "UTF-8"> </ script de > "scriptaculous-js-1.7.0/src/effects.js" type = "text/javascript" charset = "utf-8" >< / script > < script de src = "scriptaculous-js-1.7.0/src/effects.js" type = "text / javascript" charset = "UTF-8"> </ script de > "text/javascript" language = "javascript1.2" > < script de type = "text / javascript" language = "JavaScript1.2"> Event.observe (ventana, 'load', function () { $ $ ('A [href ^=#]: no ([href =#])'). cada función ((elemento) { element.observe ('click', function (evento) {new Effect.ScrollTo (this.hash.substr (1)); Event.stop (evento); bindAsEventListener (elemento)) }) }) </ script de > |
Gracias al "uso Event.observe() de función y dos dólares ($ $) puede modificar fácilmente el comportamiento de los anclajes clásico. En este caso, una nueva función está conectada para cargar la página HTML. Al tomar el caso de carga se remonta a todos los eslabones de la DOM (Tag <A>) con href que comienza con el signo numeral (#, con exclusión de la que tiene sólo una libra!). A estos elementos es una función de adjunto al evento click, similar a lo que se hizo con la carga del documento. En este punto entra en juego Scriptaculous efecto que produce un desplazamiento para el tema de los enlaces a nuestros punat - cambiado!
undolog  »Blog Archive » Ejemplos de Javascript discreto ...
Según lo prometido aquí están algunos ejemplos concretos de JavaScript discreto, versátil y potente herramienta si se utiliza correctamente. En el sitio web / blog de Ryan Johnson, puede descargar dos ejemplos muy grande de JavaScript discreto:
* Control.Ta ...