Artikel Tagged 'mootools'

Shadowbox 3.0 beta

Es war richtig, jetzt (Dank an den Autor aufmerksam freigegeben Michael JI Jackson ) Version 3.0 beta Shadowbox.js . Neben der neuen Website-Design ist hier die wichtigsten Änderungen vor dieser Version:

Fortsetzung ...

Camelize, CamelCase

Wie in der Post gesehen Vielzahl von Codierungs-und Codierung Ansätze, die ein Entwickler haben ein Problem zu lösen können, sind vielfältig und vielfältig für die gleiche Programmiersprache verwendet. Hier ist, wie einige der bekanntesten JavaScript-Frameworks haben eine einfache Funktion gelöst CamelCase :

Prototype.js

Prototype.js , Version 1.6.0.3, explizit ein Verfahren vorgeschlagen, camelize() , um die camelcase an einer Schnur zu machen. Der Autor Der Ansatz ist denkbar einfach und der Code ist selbsterklärend. In diesem Fall war es nicht jegliche Verwendung von Regular Expression gemacht!

1
2
3
4
5
6
7
8
9
10
11
12
13
( ) { camelize: function () {
this . split ( '-' ) , len = parts. length ; var Teile = diese Spaltung ('-'), len = Teile Länge..;
len == 1 ) return parts [ 0 ] ; if (len == 1) return parts [0];

this . charAt ( 0 ) == '-' camelized var = dieser charAt (0) ==. '-'
0 ] . charAt ( 0 ) . toUpperCase ( ) + parts [ 0 ] . substring ( 1 ) ? Parts [0]. CharAt (0). ToUpperCase () + parts [0]. Substring (1)
0 ] ; : Parts [0];

var i = 1 ; i < len ; i ++ ) for (var i = 1, i <len; i + +)
i ] . charAt ( 0 ) . toUpperCase ( ) + parts [ i ] . substring ( 1 ) ; camelized + = parts [i] charAt (0) toUpperCase () + parts [i] substring (1)...;

camelized return;
}

Fortsetzung ...

jQuery gegen alle: ein Benchmark mit 5 Browser

Bild Ein guter Entwickler hat kein Problem damit, von einer Programmiersprache zur anderen wechseln. Die Entscheidung, auf eine bestimmte Sprache, Rahmen-oder Entwicklungsumgebung zu konzentrieren, ist durch die Verfügbarkeit von Zeit und der Art der Arbeit, die stattfindet diktiert. Doch ein wichtiger Faktor, dass die Wahl der "Rahmen" beeinflussen können, wie sich die Sympathie und Zuneigung, die im Laufe der Zeit reifen können.
Genauer gesagt, wollte ich etwas zu analysieren - sicherlich nicht alle - JavaScript-Frameworks heute verfügbar ist, weil auch "beraten", um einen Blick vor allem auf zu nehmen jQuery .
Die Macher von mootools (einer der bekanntesten JavaScript-Frameworks) zugänglich gemacht wurde ein Werkzeug, um einen Geschwindigkeitstest und ihrer Gültigkeit davon fünf bekannten JavaScript-Frameworks laufen: Slickspeed . Dieser Test, der Ausgang überhaupt nicht abgezinst, ist es wichtig, als Client-Side Javascript-Frameworks, die von Ihrem Browser ausgeführt werden, zu betreiben. Es ist genau aus diesem Grund, dass einige finden, Safari schneller als Internet Explorer oder Google Chrome schneller als Firefox . Doch dies hängt oft von der Art der angezeigten Seite. In der Tat kann es durchaus passieren, dass eine bestimmte Website ist wirklich mehr "schnell", wenn in Safari angezeigt, aber das bedeutet nicht, dass "alle Seiten" wird schneller mit Safari! Offensichtlich ist dies für alle anderen Browser gilt.

Die Benchmark-

Im Test habe ich mit gemacht Slickspeed Ich verglich die verfügbaren Browser auf meinem Rechner (Windows Vista 64bit Utilmate - Intel Core 2 Quad 2,4 GHz mit 8 GB RAM).
Leider sind die Tests nicht in der Lage, mit Internet Explorer 7 ausgeführt wird, als das Auto stürzte, ging sogar außerhalb der Skala mit den Ergebnissen! Noch einmal herzlichen Glückwunsch Microsoft.
Ich crercato auf den gleichen Stand der PC während des Testlaufs erhalten, öffnen Sie den Browser und nicht einzeln, indem Sie keine anderen Prozesse laufen.

Hinweis: Wenn Sie wie Sie auch eine oder mehrere dieser Tests fühlen, können Sie diesen Beitrag im Falle von "neugierig" und mehrere Ergebnisse zu kommentieren.

Bild

Google Chrome ist wirklich schnell Ergebnisse, mit einem Wert von 68 (Durchschnitt) in den Test mit jQuery . Je langsamer, jedoch war Flock , obwohl aus dem gleichen "Mutter" Mozilla. Das schlechte Abschneiden der Flock ist wirklich neugierig, wie seine schneiden soziale Netzwerke, weil es gerade die Social Network Web 2.0 zu nutzen, viele JavaScript-Frameworks zur Verfügung zu nehmen, um so eine Erfahrung von wirklich innovativen Navigation und Interaktion bieten.
Überraschenderweise schlägt FireFox und Opera hat auch eine nette kleine ", erreichen sogar eine 74 in die Leistung des Dojo ! Firefox und Safari unter dem Strich sind ähnlich, mit Safari schneller in Tests mit Mootools und jQuery.

Welche Rahmenbedingungen zu wählen?

Wenn Sie nichts dagegen haben Sie mit dem Testen der Geschwindigkeit der Ausführung und nicht über die normale Größe in KByte gleichen Rahmen sorgen, könnte die Antwort sein ", was Ihnen gefällt" oder, wenn Sie so wollen, "was Sie besser kennen zu lernen oder sich in Harmonie mit Ihrer Art der Programmierung. "
Letzten Endes werden diese Rahmenbedingungen sehen ein bisschen 'all (siehe zum Beispiel die Verwendung von $), obwohl einige wichtige und wesentliche Unterschiede, die in den Augen eines Experten springen kann oder wirklich schob die Verwendung einer bestimmten Bibliothek. Im Prinzip in der Tat alles, was mit jQuery getan werden kann, zum Beispiel, kann man sehr gut mit mootools oder Prototyp! Wenn jQuery hat eine sehr kompakte Syntax, wie alle Methoden immer wieder das jQuery-Objekt Grundlage, wodurch endlose Reihen von oggetto.metodo().metodo().metodo()... wird gesagt, dass dies alles Kosten einer Stärke, vor allem für diejenigen, die zu debuggen wird!
Bibliotheken wie prototype.js sin, vielleicht in der Abwesenheit von Effekten, auch einfach, die Entwickler zu zwingen als Spin-off umzusetzen scriptaculous.js , schwere und weit von der Bibliothek die erste Wahl.

Ein Beispiel

Dieser letzte Grund, zum Beispiel, führte mich zu dem gekoppelten Prototype / Scriptaculous mit jQuery zu ersetzen, um interaktive Tafeln / Animated undolog.com hier erstellen in der Seitenleiste. In der Tat, auch mit Google API, um Bibliotheken zu importieren, ist es eine Verschwendung, all die Bibliothek laden und scriptaculous für eine slidedown slideup. Für weitere Informationen und ein Beispiel, hier ist die Javascript-Code, wie es mit der Prototype / Scriptaculous gekoppelt war:

1
2
3
4
5
6
7
8
9
10
11
12
13
/ / Prototype / Scriptaculous
) . each ( $ $ ('H2.dropdown'). Stück (
element ) { Funktion (element) {
= "pointer" ; .. Element style cursor = "Zeiger";
'click' , Element. beobachten ('click',
event ) { Funktion (event) {
this . next ( ) . style . display == "" ) new Effect. BlindUp ( this . next ( ) , { duration : .5 } ) ; if (.. this. next () Stil Anzeige == "") neue Effect BlindUp (this. next (), {duration: .5});.
Effect. BlindDown ( this . next ( ) , { duration : .3 } ) ; . Effect sonst neue BlindDown (this. next (), {duration: .3});
event ) ; Event-Stop (event).;
}
)
}
);

und es ist jetzt mit jQuery:

1
2
3
4
5
6
7
8
9
10
/ / JQuery
) . each ( $ ('H2.dropdown'). Stück (
i ) { Funktion (en) {
) . css ( 'cursor' , 'pointer' ) . click ( $ (This). Css ('Cursor', 'Zeiger'). Klicken Sie auf (
function () {
$ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if (.. $ (this) next () is (': hidden')) $ (this) next () slidedown (); else $ (this) next () slideup ();....
}
);
}
);

Alles in allem, einen genaueren Blick, glaube ich nicht, es gibt einen großen Unterschied! Aber wie ich schon sagte ... die Frage ist "auch" der persönliche Geschmack.

Fortsetzung ...

jQuery makeover

In diesen Tagen (auf Anraten ...) Ich war auf Durchsuchen jQuery , eine große Bibliothek im Stil der prototype.js , scriptaculous.js , MooTools , sozusagen ... und jetzt ist hier die gesamte Website wurde komplett neu gestaltet:

Bild

Toller Start, meinen Horizont zu dieser Art von Bibliotheken zu erweitern! Kurz veröffentlichen einige interessante Artikel, insbesondere über die Unterschiede zwischen jQuery und andere Bibliotheken "ähnlich".

Fortsetzung ...

Google AJAX Library API: ein Wendepunkt für Entwickler

AJAX Libraries API Google , in der letzten Periode hat eine Vielzahl an Werkzeugen für Entwickler veröffentlicht, aktualisieren ständig ihre Veröffentlichungen. Jetzt hält eine Vereinbarung mit beliebten AJAX-Framework, und nicht nur auf die Verteilung der Bibliothek zentralisieren jQuery , Prototype , script.aculo.us , MooTools und dojo !

In der Praxis ist es möglich, Zugriff auf diese Bibliotheken nutzen die Infrastruktur und die Google-Netzwerk, mit deutlichen Vorteilen in Bezug auf Geschwindigkeit und Sicherheit.

Die Geschwindigkeit, Beladung, wird durch das gleiche Netzwerk, Google, neben sich eine Struktur von verteilten Servern ermöglicht (Standard) komprimiert (gzip / minify) Bibliotheken zu laden garantiert. Das Hosting Google am nächsten an der Anfrage wird verwendet, um den Code zu senden, wenn es nicht zu einer vorübergehenden oder unten, aber das Netzwerk wird die Lieferung von Google Javascript-Code zu gewährleisten erreichen!

Fortsetzung ...

Alle Lightbox Klone in einem dynamischen Array

Planetozh hat ein erstellt schöne Landschaft der dynamischen Werkzeug , das alle Javascript-Bibliotheken wie Lightbox Liste kann.

Bild

Bild Mit einem Panel (siehe Bild links) mit einer Reihe von "Ticks" (Checkbox), die die verschiedenen Funktionen der Bibliotheken angeben, können Sie einen Filter, den Erhalt der Liste von einer oder mehreren Bibliotheken, den Job zu erledigen. Wir hoffen, dass der Autor dieses großartige Seite unterhält aktualisierte, sehr nützlich in befreien eines der zahlreichen und mächtigen Bibliotheken dieses Typs.

Fortsetzung ...

Light Gallery: 2.0.0_rc1 LightView

LightView . Hier ist noch ein weiteres neu veröffentlichten Dezente JavaScript-Bibliothek für Bildergalerien und mehr LightView in 2.0.0_rc1 Release , fügte auch die Funktionen "Öffnen"-Fenster mit dem Inhalt, die über einfache Bild geht: Flash-Filme, QuickTime , Form und IFRAME! Im Vergleich zu der vorherigen Version (1.1.0 -, die nur Bilder Griffe), dann ist dieses Release Candidate erweiterten Funktionen sind auch in anderen Bibliotheken . . Die Werkzeuge von erforderlichen Lighview sehr gut bekanntes Werk sind die Prototype 1.6.0.2 und Scriptaculous 1.8.1 . Gliattributi Bibliothek verwendet, um die Verwaltung von class und rel .

Interessante einen Aspekt dieser Bibliothek ist die extreme Sorgfalt, mit der die Grafik angezeigt wird.

Ergebnis: 9 - Startseite LightView

Fortsetzung ...

Licht-Bibliothek: Slimbox von einem Shadowbox, Galerien in Javascript

Man könnte sagen - und das zu Recht - genug! JavaScript-Bibliotheken (Unauffällig - nicht aufdringlich oder teilweise), um Bilder und Galerien verwalten sind so viele. Jedenfalls ist hier die Liste mit Vor-und Nachteile, die beste die ich bisher ausprobiert habe.

Slimbox 1.41

Extrem minimal, 7K (Version 1.41), benötigt mootools zu arbeiten. Wie auf der Homepage angegeben ist ein echter Klon graph Lightbox , werden wir weiter unten. Ehrlich gesagt, abgesehen von der extremen Kompaktheit der Bibliothek nicht besitzt besondere Eigenschaften. Am selben Ort, aber Sie können auch ein Skript zur Laufzeit Reflexionen erzeugen ... möchten Sie vielleicht diese Grenze ;)

Bewertung: -6 - Slimbox Home, Startseite Reflection.js für MooTools

Lightbox2

Lightbox2 Einer der bekanntesten und einfach. Verwaltet Bilder in dieser Pressemitteilung sind (so sie nicht mit QuickTime, Flash oder andere Arbeiten). Zum Betrieb benötigt Prototype und Scriptaculous . Verwenden Sie das Attribut rel auf die Links zu verarbeitenden Bilder zu identifizieren:

1
"images/image-1.jpg" rel = "lightbox" title = "my caption" > image #1 < / a > < ein href = "images/image-1.jpg" rel = "lightbox" title = "my caption"> Bild # 1 </ eins >

Wie die anderen Bibliotheken, die wir sehen werden, unterstützt die Diashow-Modus, geben Sie einen beliebigen Bezeichner in eckigen Klammern in einer Reihe von Link / Bild:

1
2
3
"images/image-1.jpg" rel = "lightbox[roadtrip]" > image #1 < / a > < ein href = "images/image-1.jpg" rel = "lightbox [Roadtrip]"> Bild # 1 </ eins >
"images/image-2.jpg" rel = "lightbox[roadtrip]" > image #2 < / a > < ein href = "images/image-2.jpg" rel = "lightbox [Roadtrip]"> Bild Nr. 2 </ eins >
"images/image-3.jpg" rel = "lightbox[roadtrip]" > image #3 < / a > < ein href = "images/image-3.jpg" rel = "lightbox [Roadtrip]"> image # 3 </ eins >

Ergebnis: 6 - Top Lightbox2

LightWindow 2,0

LightWindow 2,0 Dies ist auch durchaus üblich! Nach allem, wie können Sie sagen, welche verwendet wird? ;) . Es ist jedoch sehr umfangreich und vielseitig. Auf der Seite steht die Forderung nach Spenden für die Anschaffung eines Mac ... und drücken ein wenig invasive ... aber wie oben, aber für den Betrieb, erfordert die Anwesenheit von Prototype und Scriptaculous . Anders als seine Vorgänger, aber damit können Sie moltisiimi Arten von Dateien zu betrachten: von den Bildern, QuickTime-Filme, Flash-Filme, externe HTML-Seiten und PDF. ) altri obbligatori ( class e params - per impostare il comportamento della libreria). Im Gegensatz dazu nutzt verschiedene Attribute, einige optional ( author, caption und title ) anderen gesetzlich zu ( class und params - um das Verhalten der Bibliothek eingestellt). Zum Beispiel zum Anzeigen einer Galerie oder Diashow mit dem Attribut 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 > < ein href = "gallery/0-sushi.jpg" class = "LightWindow" rel = "[Sushi]" title = caption = "Look ist super lecker!" author = "Unknown", "Left Behind"> Bild # 1 </ ein >
"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 > < ein href = "gallery/1-sushi.jpg" class = "LightWindow" rel = "[Sushi]" title = "Beware of warewolves ..." caption = "Ich sollte das nicht tun, wenn ich hungrig bin" author = "Unbekannt"> Bild Nr. 2 </ eins >
"gallery/2-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "That was good!" caption = "Take that sushi!" author = "Unknown" > image #3 < / a > < ein href = "gallery/2-sushi.jpg" class = "LightWindow" rel = "[Sushi]" title = "Das war gut!" caption = "Nehmen Sie das Sushi!" author = "Unbekannt"> Bild Nr. 3 </ ein >

Ergebnis: 8 - Startseite LightWindow 2,0

Shadowbox 1.0B

Shadowbox Obwohl die Version 1.0 beta ist dies vielleicht die komplette Bibliothek, die beide aus der funktionalen Sicht von den Bibliotheken unterstützt wird. Für den Betrieb in der Tat, können Sie aus einer Vielzahl von Rahmenbedingungen zu wählen, mit der Datei "Adapter", besonders hergestellt und durch den Autor geliefert:

Der visuelle Effekt (konfigurierbar über die Haut / css), dann, anders als die anderen, ist auf jeden Fall attraktiver. Die verwendeten Attribute sind nur rel wo, in dessen Innenraum sind alle anderen Konfigurationsparameter. Zum Beispiel, um eine Galerie, verwenden Sie einfach:

1
2
"beach.jpg" rel = "shadowbox[Vacation]" > The Beach < / a > < ein href = "beach.jpg" rel = "shadowbox [Vacation]"> The Beach </ eins >
"pier.jpg" rel = "shadowbox[Vacation]" > The Pier < / a > < ein href = "pier.jpg" rel = "shadowbox [Vacation]"> The Pier </ eins >

Wenn Sie einige Optionen einstellen (wollen siehe Website für eine vollständige Liste ) verwenden Sie einfach die folgende Syntax:

1
"myimage.jpg" rel = "shadowbox;options={overlayOpacity: 0.5, resize: false}" > My Image < / a > < ein href = "myImage.jpg" rel = "shadowbox; options = {overlayOpacity: 0,5, Größe: false}"> My Image </ eins >

Auf dem Internet können sie finden andere, wie zum Beispiel JS Highslide . In der Tat, wenn Sie eine andere Bibliothek berichten wollen ... Wie auch immer, persönlich bevorzuge ich Shadowbox für Einfachheit, Skalierbarkeit und Cross-Rahmen.

Ergebnis: 9 - Top Shadowbox 1.0B

Fortsetzung ...

Accordion 2,0

Bild Er hatte bereits gesprochen dieses Unauffällige Javascript-Bibliothek vom selben Autor gebaut LightWindow 2,0 . Ist jetzt die Version 2.0, die immer nutzt veröffentlicht scriptaculous .
Zu den interessantesten ist seine Fähigkeit, "engage" das Akkordeon ineinander, sowohl horizontal als auch vertikal in der MODL.
Dann weg von der ursprünglichen Betrieb der Klassiker wurde Accrodion hinzugefügt das Verhalten der Öffnen / Schließen. Auf der Seite können Sie das Skript (gekennzeichnet mit den Worten noch 1,0?) und Zugang Codebeispiele.

Fortsetzung ...

Akkordeon für Scriptaculous

Schließlich, ein feines Script in JavaScript (download Akkordeon 1,0 ), einfache und leicht, mit dem Sie die Accordion-Komponente in Flash und hinzufügen können mootools Bibliothek mit scriptaculous . In der Tat war dieses Objekt fehlt, was nützlich ist, bei vielen Gelegenheiten. Diese Version ist sehr einfach und ermöglicht es Ihnen, Akkordeon orizzonali dass vertikale schaffen. Das Skript ist kostenlos , aber Sie können eine kleine Spende machen, um den Autor zu einem schönen MacPro kaufen ;)

Zur Nutzung legen Sie einfach diese einfachen Zeilen Code:

1
2
3
"text/javascript" src = "javascript/prototype.js" >< / script > < script type = "text / javascript" src = "javascript / prototype.js"> </ script >
"text/javascript" src = "javascript/effects.js" >< / script > < script type = "text / javascript" src = "javascript / effects.js"> </ script >
"text/javascript" src = "javascript/accordion.js" >< / script > < script type = "text / javascript" src = "javascript / accordion.js"> </ script >

Die HTML-Markup ist unmittelbar:

1
2
3
4
5
6
7
8
9
10
11
"accordion_toggle" > Title Bar < / h3 > < h3 class = "accordion_toggle"> Title Bar </ h3 >
"accordion_content" > < div class = "accordion_content">
...
</ div >
...
...
...
"accordion_toggle" > Title Bar < / h3 > < h3 class = "accordion_toggle"> Title Bar </ h3 >
"accordion_content" > < div class = "accordion_content">
...
</ div >

Ein praktisches Beispiel:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/ / Allgemeine Syntax
'container-selector' , options ) ; neue Akkordeon ('container-Selektor ", options);


/ / Horizontal Beispiel
new accordion ( '#top_container' , { horizontalAccordion var Akkordeon = new ('# top_container', {
Klassennamen: {
, toggle: 'horizontal_accordion_toggle "
, toggleActive: "horizontal_accordion_toggle_active"
Inhalt: "horizontal_accordion_content"
}
DefaultSize: {
Breite: 525
}
Richtung: "horizontale"
});

/ / Vertical Accordion
new accordion ( '#bottom_container' ) ; verticalAccordion var Akkordeon = new ('# bottom_container');

Fortsetzung ...