Artikel mit Tag 'Prototype.js'


Shadowbox 3.0 beta

Es wurde gerade jetzt (dank der Anregung des Autors veröffentlicht Michael Jackson JI ) die 3.0 Beta-Version von Shadowbox.js . Neben dem neuen Design der Website sind hier die wichtigsten Änderungen in diesem Release vorläufiger:

Fortsetzung ...

Camelize, CamelCase

Wie bereits in der Post gesehen Vielfalt der Kodierung und Kodierung Ansätze, dass ein Entwickler haben ein Problem lösen können, sind vielfältig und vielfältig für eine feste Programmiersprache verwendet. Hier ist, wie einige der beliebtesten Javascript Frameworks haben eine einfache Funktion gelöst CamelCase :

Prototype.js

Prototype.js , Version 1.6.0.3, explizit schlägt ein Verfahren camelize() zum camelcase auf einer Schnur. Der Autor der Ansatz ist ganz einfach und der Code ist selbsterklärend. In diesem Fall war es keine 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 = this split ("-"), len = parts Länge;.
len == 1 ) return parts [ 0 ] ; if (len == 1) return Teile [0];

this . charAt ( 0 ) == '-' . camelized var = diese charAt (0) == '-'
0 ] . charAt ( 0 ) . toUpperCase ( ) + parts [ 0 ] . substring ( 1 ) ? Parts [0]. CharAt (0). ToUpperCase () + Teile [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 () + Teile [i] substring (1)...

camelized return;
}

Fortsetzung ...

jQuery gegen alle: ein Benchmark mit 5 Browser

Bild Ein guter Entwickler hat kein Problem, von einer Programmiersprache zur anderen zu gehen. Die Entscheidung, auf eine bestimmte Sprache, Rahmen-oder Entwicklungsumgebung, konzentrieren wird mehr durch die Verfügbarkeit von Zeit und der Art der Arbeit, die stattfindet, diktiert. Jedoch ein wichtiger Faktor, der die Wahl der "Rahmen" beeinflussen können, ähnlich ist es Sympathie oder Zuneigung, die mit der Zeit reifen können.
Genauer gesagt, wollte ich einige analysieren - sicherlich nicht alle - Javascript Frameworks zur Verfügung heute, denn auch "empfohlen", um einen Blick zu nehmen insbesondere jQuery .
Die Macher von Mootools (eines der beliebtesten Javascript-Frameworks) haben ein Werkzeug zur Verfügung, um einen Speed-Test und die Gültigkeit von fünf bekannten JavaScript-Framework laufen: Slickspeed . Dieser Test ist das Ergebnis überhaupt nicht offensichtlich ist, ist wichtig, da die Client-seitige Javascript Frameworks arbeiten, dh sie werden von unserem Browser durchgeführt. Es ist genau aus diesem Grund, dass einige finden Safari schneller als Internet Explorer oder Google Chrome schneller als Firefox . Doch diese hängt oft von der Art der angezeigten Seite. In der Tat kann es sehr gut passieren, dass eine bestimmte Website ist wirklich "schneller" als in Safari angesehen, aber dies bedeutet nicht, dass "alle Seiten" wird schneller mit Safari! Offensichtlich gilt für jede andere Browser.

Der Benchmark

In den Tests, die ich gemacht habe mit Slickspeed Ich verglich 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 dem Internet Explorer 7 laufen, da sie die Maschine blockiert, ging sogar außerhalb der Skala mit den Ergebnissen! Noch einmal herzlichen Glückwunsch Microsoft.
I crercato die gleiche PC-Status während der Ausführung der Tests zu erhalten, einzeln Öffnen des Browsers und sendet keine anderen laufenden Prozess.

Hinweis: Wenn Sie auch eine oder mehrere dieser Tests ausführen möchten, können Sie zu diesem Beitrag bei "neugierig" und mehrere Ergebnisse zu kommentieren.

Bild

Google Chrome war wirklich schnell, mit einem Wert von 68 (Durchschnitt) im Test mit jQuery . Je langsamer, jedoch ist das Ergebnis Flock trotz aus dem gleichen "Mutter" Mozilla. Das schlechte Abschneiden der Flock ist wirklich neugierig sah Schneiden Social Network, weil es das Social Network Web 2.0 ist es, die Vorteile der vielen JavaScript-Frameworks zur Verfügung zu nehmen, um so eine wirklich innovative Navigation und Interaktion bieten.
Überraschend schlägt FireFox und Opera hat auch eine nette kleine ', immer noch eine 74 in der Ausführung Dojo ! Firefox und Safari, nachdem alle, gleich aussehen, mit Safari schneller in Tests mit Mootools und jQuery.

Welche Rahmenbedingungen zu wählen?

Wenn Sie nichts dagegen haben, um die Geschwindigkeit der Ausführung zu testen und nicht um die normale Größe in KByte des Frameworks selbst kümmern, könnte die Antwort sein ", was Dir gefällt" oder, wenn Sie es vorziehen, "was Sie am besten kennen, oder gibt es mehr harmonisch mit Ihrem Art der Programmierung. "
Letztlich diese Frameworks aussehen ein bisschen "alle (siehe die Verwendung des $ zum Beispiel), 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, alle, die mit jQuery erreicht werden kann, zum Beispiel, können Sie mit Mootools oder Prototyp fine! Wenn jQuery hat eine sehr kompakte Syntax, da alle Methoden immer das jQuery Objekt-Basis, wodurch endlose Reihen von oggetto.metodo().metodo().metodo()... es wird gesagt, dass das überhaupt ist kostet Kraft, vor allem für diejenigen, die das Debugging zu tun haben!
Bibliotheken wie prototype.js Sünde vielleicht in der Abwesenheit von Grafik-Effekte, auch einfach, die Entwickler zu zwingen als Spinoff implementieren scriptaculous.js , schwere und weit entfernt von der Bibliothek die erste Wahl.

Ein Beispiel

Dieser letzte Grund, zum Beispiel, hat mich veranlasst, die gekoppelt Prototyp / scriptaculous mit jQuery zu ersetzen, um interaktive Tafeln / animated erstelle hier in der Seitenleiste undolog.com. In der Tat, auch die Verwendung von Google-API, um Bibliotheken zu importieren, ist es eine Verschwendung Last die gesamte Bibliothek scriptaculous von einem slidedown und slideup. Für Informationen und ein Beispiel, hier ist der Javascript-Code, wie es mit dem Prototyp / scriptaculous gekoppelt wurde:

1
2
3
4
5
6
7
8
9
10
11
12
13
/ / Prototype / scriptaculous
) . each ( $ $ ('H2.dropdown'). Jede (
element ) { function (element) {
= "pointer" ; .. Cursor Element style = "Zeiger";
'click' , Element. beobachten ("Klick",
event ) { function (event) {
this . next ( ) . style . display == "" ) new Effect. BlindUp ( this . next ( ) , { duration : .5 } ) ; if (.. this. next () Stil Display == "") neu Effect BlindUp (this. next (), {duration: 0,5});.
Effect. BlindDown ( this . next ( ) , { duration : .3 } ) ; . sonst neue Effect BlindDown (this. next (), {duration: .3});
event ) ; . Event-Stop (event);
}
)
}
);

und wie es jetzt ist mit jQuery:

1
2
3
4
5
6
7
8
9
10
/ / JQuery
) . each ( $ ('H2.dropdown'). Jede (
i ) { Funktion (i) {
) . 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 () ist (": hidden ')) $ (this) next () slidedown () else $ (this) next () slideup ();....
}
);
}
);

Alles in allem, ein genauerer Blick, weiß ich nicht, dass es einen großen Unterschied! Aber wie ich schon sagte ... die Frage ist "auch" des persönlichen Geschmacks.

Fortsetzung ...

jQuery Neugestaltung

In diesen Tagen (unter Anleitung ...) Ich war gerade in jQuery , eine große Bibliothek im Stil der prototype.js , scriptaculous.js , MooTools , so zu sprechen ... und heute hier in ganze Website wurde komplett neu gestaltet:

Bild

Große beginnen, meinen Horizont auf diese Art von Bibliotheken zu erweitern! Demnächst veröffentlichen einige Artikel interessant, vor allem über die Unterschiede zwischen jQuery und anderen Bibliotheken "ähnlich".

Fortsetzung ...

Einfache Akkordeon mit der Klasse USimpleTabStrip

Die Klasse USimpleTabStrip , in vorgestellt Unauffällig Einfache TabStrip , kann auch verwendet werden, um eine zu realisieren einfaches Menü Akkordeon .
offerti da Scriptaculous : Mit den Auswirkungen der BlindUp() und BlindDown() angeboten durch Scriptaculous :

1
2
3
4
5
6
7
8
9
10
function init () {
USimpleTabStrip ( ) ; USimpleTabStrip uts = new ();
; UTS Init ().
function ( e ) { UTS. onShow = function (e) {
( e ) ; . neue Effect BlindDown (e);
}
function ( e ) { UTS. OnHide = function (e) {
( e ) ; . neue Effect BlindUp (e);
}
}

Und Neupositionierung HTML-Elemente ( HTML-Quelle ):

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 = "Akkordeon">
"#acc1" > Accordion 1 < / a > < a href = "# acc1"> Akkordeon 1 </ a >
"acc1" >< / a > < a name = "acc1"> </ a >
< div >
h1 > < h1 > Content # 1 </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

"#acc2" > Accordion 2 < / a > < a href = "# acc2"> Akkordeon 2 </ a >
"acc2" >< / a > < a name = "acc2"> </ a >
< div >
h1 > < h1 > Content # 2 </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

"#acc3" > Accordion 3 < / a > < a href = "# acc3"> Akkordeon 3 </ a >
"acc3" >< / a > < a name = "acc3"> </ a >
< div >
h1 > < h1 > Content # 3 </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

</ div >

Sie erhalten ein einfaches Akkordeon Menü , das in einer extrem schnellen Art und Weise verwendet werden kann.

Fortsetzung ...

Unauffällig Einfache TabStrip

USimpleTabStrip ist eine unauffällige JavaScript können Sie die klassischen Anker-Link (noch) innerhalb einer HTML-Seite zu verbessern. Diese Quelle ist eine Verbesserung der Funktion in vorgestellt Unauffällig Tabstrip . In dieser Version auch ausrichten den Code zur Freigabe von 1,6 prototype.js eine echte Klasse, um das Register handhaben erstellt wurde. Die Veröffentlichung präsentiert hier ist sehr einfach und unkompliziert. Sein Hauptwerk liegt in Hinzufügen eines Click-Ereignis in den normalen Link Anker. Sie sind auch nicht CSS-Stile präsentiert, nur um maximale Handlungsfreiheit zu ermöglichen, aber Sie können eine bekommen wirksam TabStrip mit ein paar Zeilen CSS-Code zusätzliche, siehe hinzufügen CSS-Stile unten.

HTML

Die Klasse USimpleTabStrip arbeitet an einer einfachen HTML, sftuttando der Anker ( &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.
<-! Einfache Liste der Links in der Seite ->
< ul >
= "#tbs1" > Link 1 < / a >< / li > < li > < a href = "# tbs1"> Link 1 </ a > </ li >
= "#tbs2" > Link 2 < / a >< / li > < li > < a href = "# TBS2"> Link 2 </ a > </ li >
= "#tbs3" > Link 3 < / a >< / li > < li > < a href = "# tbs3"> Link 3 </ a > </ li >
</ ul >

<-! Blocks / tabs ->

"tbs1" >< / a > < a name = "tbs1"> </ a >
< div >
h1 > < h1 > Eintrag # 1 </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

"tbs2" >< / a > < a name = "TBS2"> </ a >
< div >
h1 > < h1 > Eintrag # 2 </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

"tbs3" >< / a > < a name = "tbs3"> </ a >
< div >
h1 > < h1 > Card # 3 </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

funziona da contenitore. Das Tag div unterhalb des Ankers a als Behälter arbeiten.

Fortsetzung ...

Text Replacement Techniques in Flash

Der Text Replacement Technik , die ich heute präsentieren ist, in gewisser Hinsicht wirklich interessant. Im Gegensatz zu den klassischen Ersatz ist auf Bild via CSS , nutzt diese Technik einen Flash-Film, um die Titel unserer Seite zu überschreiben. Obwohl er ein wenig mehr artikuliert, wie es die Schaffung eines Flash-Films und die Verwendung von Javascript erfordert, ermöglicht es, eine Reihe erheblicher Vorteile erhalten:

  • Hält die "Zugänglichkeit der Website durch Ausnutzung einer -Echt-Unauffällig Javascript , so dass Web-Crawler und Spider, um die Seite so einfach und richtig HTML sehen weiter
  • Es erfordert nicht die Erstellung von Bildern für n n Aktien. Es dauert nur ein Film, um alle Titel unserer Seite zu ersetzen, mit einer erheblichen Einsparung von Herunterladen
  • Ermöglicht Ihnen die einfache, aber auch Titel mit Font erstellen normalerweise nicht auf dem Web verwendet
  • Der Text in HTML gerendert werden können, dank der Eigenschaften von Flash-
  • Der Text ist frei wählbar
  • Als Flash-Film, den Sie setzen können jede Art von Interaktivität und Animationen

Sie werden bemerken auch, dass in diesem Verfahren die CSS kaum berücksichtigt werden!

Fortsetzung ...

Google AJAX API-Bibliothek: ein Wendepunkt für Entwickler

AJAX Libraries API Google , in der letzten Periode, hat eine Vielzahl an Werkzeugen für Entwickler durch ständige Aktualisierung ihrer Releases veröffentlicht. Jetzt hält eine Einigung mit den populärsten AJAX-Frameworks, und nicht nur, um die Verteilung der Bibliothek zentralisieren jQuery , Prototype , script.aculo.us , MooTools und Dojo !

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

Die Geschwindigkeit, in der Beladung wird durch das gleiche Netzwerk, Google, sowie durch sich eine Struktur von verteilten Server gewährleistet, ermöglicht (standardmäßig) Belastung komprimiert (gzip / minify) der Bibliotheken. Das Hosting Google näher an die Anfrage wird verwendet, um den Code zu senden, und, im Fall von nicht bis hinunter oder temporär, das Netzwerk wird sichergestellt, Google sendet immer noch den Javascript-Code!

Fortsetzung ...

Google AJAX API Sprache und Prototype.js

Nachdem ich den Betrieb des Google AJAX API kam ich mit einem alternativen Weg zum Realtime unseren Web-Seiten mit übersetzen prototype.js können Sie die HTML-Tags, die wir übersetzen wollen zu markieren, anstatt unterwirft das gesamte Dokument zu Übersetzung. : Um die HTML-Tags Früher habe ich das Attribut übersetzen markieren rel , wenn er auf translate :

1
"translate" > Questo testo deve essere tradotto < / p > < p rel = "translate"> Dieser Text sollte übersetzt </ werden p >

Mit einer einfachen Funktion, dann können wir prototype.js, alle HTML-Tags verarbeiten mit rel='translate' :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17.
18
19
/ **
* @ Name: translate ()
* @ Description: Übersetzung
* /
funktionieren translate () {
) . each ( $ $ ('[Rel = "übersetzen"]'). Jede (
e ) { function (e) {
( e. innerHTML , 'it' , 'en' , google. Sprache. übersetzen (z. innerHTML, 'de', 'en',
result ) { function (result) {
result. translation ) { if (result. Übersetzung) {
result. translation ; innerHTML = Ergebnis und Übersetzung..
{ Else {}
'Translate Error! \n \n ' + result. error . message ) ; alert ('Fehler Translate \ n \ n' + Ergebnis Fehlermeldung..);
}
}
);
}
);
}

Sie können dies in Aktion zu sehen auf E-lementi.com

Offensichtlich kann das Skript (und / oder muss) verfeinert je nach Fall werden. . Es ist interessant, zu beachten ist jedoch, dass es möglich ist specializzarlo, so dass die Bilder (im Falle von Schaltflächen in Grafiken, die Text enthalten) ersetzen oder ihn ziehen TAG insbesondere INPUT oder TEXTAREA .

Eine der Einschränkungen, die ich gefunden habe, und ich möchte zu vertiefen, um die Anzahl der Zeichen, die übersetzt werden können. Bei wichtigen Texten, in der Tat, nicht schwer eine Fehlermeldung erhalten: in der Tat, dass ich das Skript mit einem alert() .

Fortsetzung ...

Dynamic HTML mit Prototype: Arten und Skripte

Vor über einem Jahr schrieb ich einen Beitrag ( Dynamic HTML mit JavaScript ), die einige Techniken, um dynamisch hinzufügen Stylesheets und Skripte in eine HTML-Seite bereits geladen dargestellt. Wer nutzt Prototype.js Sie erheblich vereinfachen kann Ihr Leben mit zum Beispiel:

1
2
3
4
5
6
"dom:loaded" , Dokument zu beobachten ("dom: loaded".,
function () {
new Element ( "script" , { type : "text/javascript" , src : "/js/altro.js" } ) ; var script = new Element ("script", {type: "text / javascript", src: "/ js / altro.js"});
) [ 0 ] . insert ( script ) ; $ $ ("Head") [0] Insert (Skript).
}
);

Nachdem die Seite geladen wurde ( document.observe ) wird ein neues Skript JavaScript verfasst! Für Arten, das ist genau das gleiche!

Fortsetzung ...