Wie hier versprochen einige konkrete Beispiel unaufdringlich JavaScript, vielseitige und leistungsstarke Tool, wenn sie ordnungsgemäß verwendet. On Site / Blog Ryan Johnson können Sie zwei wirklich gutes Beispiel für dezente JavaScript:
- Control.Tabs: Unauffällig CSS Tabs für Prototype
- Control.Modal: Unauffällig CSS Modal Windows-und Lightboxen für Prototype
Ryan Johnson, in seinem Skript verwendet die Bibliothek Prototype , wie viele der übrigen. Er hat auch einige Erweiterungen, um die relativ geschrieben Prototype , dann eingeführt - in einer anderen Form - in der neuesten Version der Bibliothek.
Mit Prototype für den Betrieb von dezent JavaScript-Code zeigen, ist in der Regel mehr Komfort - wie wir später sehen werden, aber hier ist ein grobes Beispiel, dass keine externen Bibliotheken benötigt. Wir beginnen mit dem Hinweis, dass das Konzept hinter dem Dezente JavaScript, um von einem beliebigen HTML-Seite (Standard und nicht unbedingt schriftlich von uns - noch wichtiger Pluspunkt) beginnen soll, und verwenden Sie Javascript, um einige Änderungen vornehmen.
Schematimamente das Konzept ist auf eine Funktion, die HTML, durchquert dann den DOM und in bestimmten Punkten hinzuzufügen oder zu ändern-Funktionalität analysiert durchzuführen. Normalerweise werden zwei Methoden genutzt, um Javascript-Code ausführen, um eine Seite zu laden: die erste ist, was du nicht packen den Code in einer Funktion, und lassen Sie den Browser ausführen Code sofort auf den Punkt, wo der Anruf erscheint hochgeladen:
Das gleiche Ergebnis wird durch die Einbeziehung der Code erhalten:
1 |
Allerdings, wenn es muss auf dem DOM einer Seite zu betreiben, dass es ein voll beladen, dass alle TAG auf der Seite vorhanden und verfügbar zu verfolgen ist, voraussetzt. So ist die beste Lösung wird derjenige sicher sein, dass die Seite komplett ist. Dies ist durch die Gewinnung der body-Tag onload-Ereignis zum Beispiel, die freigesetzt werden, wenn das Laden der Seite abgeschlossen ist möglich.
1 2 3 | miafunzione ; Fenster onload = myfunction.; / / Oder, was dasselbe ist function ( ) { alert ( "Hello" ) ; } . window onload = function () {alert ("Hallo");} |
Vermieden, natürlich, die kanonische Lösung, die eine Untertreibung zu nennen es aufdringlich wäre:
1 | "miafunzione()" > < Körpers onload = "myfunction ()"> |
Eine andere Technik, gröber und ebenso aufdringlich (wie zwingen würde, den Endnutzer, den Code an einer bestimmten Stelle Platz), ist unser Skript am Ende des Dokuments setzen vor dem schließenden Body-Tag, mittlerweile veraltet Technik und verwendet in seltenen Fällen (siehe Google Analytics!).
Noch besser ist es, die Methode zu verwenden:
1 2 3 4 5 6 7 | window. addEventListener ) { if (window. addEventListener) { "load" , miafunzione , false ) ; Fenster zu sehen. addEventListener ("load", myfunction, false) ¾ Í ( window. attachEvent ) { } Else if (window. attachEvent) { "onload" , miafunzione ) ; Fenster zu sehen. attachEvent ("onload", myfunction) ¾ Í { Else {} createSubMenus; Fenster zu sehen. createSubMenusÍ onload = ¾ } |
Auch dieses Stück Code wird in einer Funktion eingeschlossen sind. Es wird ein Ereignis-Listener für das Load-Ereignis des Fensters hinzuzufügen, ruft unsere Funktion miafunzione() . . Moderne Browser wie Firefox zum Beispiel, wird die Funktion addEventListener() in DOM Level 2-Spezifikation definiert, während Internet Explorer seine proprietäre Funktion nutzen wird attachEvent() . Allerdings sind wir nicht auf Perfektion in dieser Weise, in der Tat, ersetzen Sie alle - alle - ". Non-intrusive" onload Ereignisse durch andere Skripte erstellt, die nicht wirklich
Schnell zu lösen, um das Problem, dass aufgrund der unterschiedlichen Verhalten der Browser am wenigsten komplizierte wäre, hier zu erklären, ist es zweckmäßig, als libreirie verwenden Prototype bietet un'elengantissimo Methode, um das Problem zu überwinden:
1 | window , 'load' , function ( ) { alert ( "Hello" ) ; } ) ; Event. Beobachten (window, 'load', function () {alert ("Hallo ");}); |
Die Syntax ist sehr auffällig und spektakulär! Der Vorteil für diejenigen, die nicht verstanden hatte, ist, dass Sie schreiben:
1 2 | window , 'load' , function ( ) { alert ( "Hello 1" ) ; } ) ; Event. Beobachten (window, 'load', function () {alert ("Hallo 1 ");}); window , 'load' , function ( ) { alert ( "Hello 2" ) ; } ) ; Event. Beobachten (window, 'load', function () {alert ("Hallo 2 ");}); |
Beim Laden der Seite wird angezeigt, bevor die Warnung "Hallo 2" und dann alert "Hallo 1" sein. Grundsätzlich in einem FILO (First Last Input Output) einen Stapel zu laden, während gleichzeitig die Ausführung aller Veranstaltungen an der Last des Dokuments, genau das, was man wollte. Auf diese Weise eine Seite laden kann - praktisch - endlose unaufdringlich JavaScript, um das Dokument Lasthaken.
Aber was kann mit dieser Technik zu tun? Viele interessante Dinge. Ein Beispiel, das wir schreiben (siehe auch Vorbild: Die Verwendung des doppelten Dollarzeichen ($ $) ) stammt aus Tobie Langel . Mit ein paar Zeilen Code und Download-Bibliotheken Prototype und Scriptaculous kann man einen schönen Effekt auf die klassische Anker unserer Seiten geben. Erstellen Sie zunächst eine HTML-Seite mit dem folgenden Code:
1 2 3 4 5 6 7 8 |
Fügen Sie die Seite:
1 2 3 4 5 6 7 8 9 10 11 12 | "prototype.js" type = "text/javascript" charset = "utf-8" >< / script > < script src = "prototype.js" type = "text / javascript" charset = "UTF-8"> </ script > "scriptaculous-js-1.7.0/src/effects.js" type = "text/javascript" charset = "utf-8" >< / script > < script src = "scriptaculous-js-1.7.0/src/effects.js" type = "text / javascript" charset = "UTF-8"> </ script > "text/javascript" language = "javascript1.2" > < script type = "text / javascript" language = "JavaScript1.2"> Event.observe (window, 'load', function () { $ $ ('A [href ^=#]: nicht ([href =#])'). each (function (element) { element.observe ('click', function (event) {new Effect.ScrollTo (this.hash.substr (1)); Event.stop (event); bindAsEventListener (element)) }) }) </ script > |
Dank "use Event.observe() -Funktion und Zwei-Dollar ($ $) Sie leicht ändern lässt sich das Verhalten des Klassikers zu verankern. In diesem Fall ist eine neue Funktion ist angespannt, um die HTML-Seite hochladen. Bei der Aufnahme der Last Veranstaltung ist alle Links in die DOM (Tag <A>) mit href, die mit der Raute (#, ohne die man mit nur einem Pfund!) Beginnt zurückzuführen. Um diese Elemente ist eine Funktion, die an das Click-Ereignis, ähnlich dem, was war mit der Last des Dokuments gemacht. An dieser Stelle ins Spiel kommt Scriptaculous Effekt, dass eine Schriftrolle, um das Element aus unserem punat Links produziert - geändert!
undolog  »Blog Archive » Beispiele für unaufdringliche Javascript ...
Wie hier versprochen einige konkrete Beispiel unaufdringlich JavaScript, vielseitige und leistungsstarke Tool, wenn sie ordnungsgemäß verwendet. Auf der Website / Blog von Ryan Johnson, können Sie zwei wirklich gutes Beispiel für dezente JavaScript:
* Control.Ta ...