Artikel Tagged 'prototype.js "


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

Einfache Akkordeon mit der Klasse USimpleTabStrip

Die Klasse USimpleTabStrip präsentierte Unauffällig Einfache TabStrip , können auch verwendet, um eine zu erstellen einfaches Menü Akkordeon .
offerti da Scriptaculous : Mit den Auswirkungen der BlindUp() und BlindDown() angeboten von Scriptaculous :

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

Und die Verlagerung des HTML-Elemente ( HTML-Quellcode ):

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

"#acc2" > Accordion 2 < / a > < ein href = "# ACC2"> Akkordeon 2 </ eins >
"acc2" >< / a > < ein name = "ACC2"> </ eins >
< div >
h1 > < h1 > # 2 Inhalt </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

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

</ div >

Sie erhalten ein einfaches Menü Akkordeon , die sehr schnell eingesetzt werden kann.

Fortsetzung ...

Unauffällig Einfache TabStrip

USimpleTabStrip Dezente JavaScript ist es, die klassische Anker-Links (noch) nicht innerhalb einer HTML-Seite zu verbessern. Diese Quelle ist eine Verbesserung der Funktion im vorgestellten Unauffällig Tabstrip . In dieser Version sowie Ausrichtung der Code mit Release 1.6 von prototype.js hat eine echte Klasse, um die Register zu handhaben. Die Mitteilung ist hier sehr einfach und unkompliziert. Sein Hauptwerk liegt in Hinzufügen eines Click-Ereignis den normalen Link zu verankern. CSS-Stile auch nicht vorgelegt werden, nur um die maximale Handlungsfreiheit zu verlassen, aber Sie können einen bekommen effektive TabStrip mit ein paar zusätzlichen Zeilen CSS-Code, siehe Hinzufügen von CSS-Stilen unten.

HTML

Die Klasse USimpleTabStrip der Arbeit an einem einfachen HTML, der Anker sftuttando ( &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 von Links auf der Seite ->
< ul >
= "#tbs1" > Link 1 < / a >< / li > < wird > < ein href = "# tbs1"> Link 1 </ eins > </ sie >
= "#tbs2" > Link 2 < / a >< / li > < wird > < ein href = "# tbs2"> Link 2 </ eins > </ sie >
= "#tbs3" > Link 3 < / a >< / li > < wird > < ein href = "# tbs3"> Link 3 </ eins > </ sie >
</ ul >

<-! Blocks / Tabs ->

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

"tbs2" >< / a > < ein name = "tbs2"> </ eins >
< div >
h1 > < h1 > Listing # 2 </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

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

funziona da contenitore. Das Tag div knapp unterhalb der Anker a als Container zu arbeiten.

Fortsetzung ...

Flash Text Replacement-Techniken

Der Text Replacement-Technik , die ich heute anwesend ist in mancher Hinsicht sehr interessant. Im Gegensatz zu den klassischen Bild mit CSS, um den Betrieb zu ersetzen , verwendet diese Technik, einen Flash-Film, um die Titel unserer Website zu überschreiben. Obwohl es ein wenig komplizierter, erfordert die Schaffung eines Flash-Films und die Verwendung von JavaScript, produziert eine Reihe erheblicher Vorteile:

  • Hält die "Erreichbarkeit des Geländes mit einem True-Unauffällig Javascript- so, dass Raupen und Spinnen, die Seite als sehen weiterhin eine einfache und korrekte HTML
  • Es erfordert nicht die Schaffung von n durch n Bild Titel. Nur ein Film für alle die Titel unserer Website, mit einer erheblichen Einsparung im Hinblick auf die Download-Ersatz
  • Auch können Sie einfach Titel, aber normalerweise nicht verwendeten Schriftarten im Web erstellen
  • Text kann in HTML, dank der Features von Flash wiedergegeben werden
  • Der Text ist frei wählbar
  • Wie können Sie fügen Sie ein Flash-Film und interaktive Animationen jeglicher Art

Sie werden bemerken auch, dass in diesem Verfahren praktisch keine CSS berücksichtigt!

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

Google AJAX Language API und prototype.js

Nach der Besichtigung des Betriebs der Google AJAX APIs kam ich mit einem alternativen Weg, um Web-Seiten nutzen unseren Echtzeit-Übersetzung prototype.js , können Sie markieren den HTML tags wollen wir übersetzen, statt Unterwerfung des gesamten Dokuments für die Übersetzung. : So markieren Sie die HTML-Tags Früher habe ich das Attribut übersetzen rel , wenn er auf translate :

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

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

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

Sie können dies in Aktion zu sehen, e-lementi.com

Natürlich kann das Script (und / oder müssen), gegebenenfalls ergänzt werden. . Es ist interessant zu beachten Sie jedoch, dass es möglich ist, sich zu spezialisieren, um die Bilder (im Falle der grafische Schaltflächen, die Text enthalten), zu ersetzen oder zu entwickeln ihn als einen besonderen TAG INPUT oder TEXTAREA .

Eine der Einschränkungen, die ich gestoßen, und ich möchte zu vertiefen, die Anzahl der Zeichen, die übersetzt werden kann. Im Falle von wichtigen Texten, in der Tat ist es nicht schwer, einen Fehler zu bekommen: dass in der Tat ich das Skript ausführen mit einem alert() .

Fortsetzung ...

Dynamic HTML mit Prototype: Stile und Skripte

Vor über einem Jahr schrieb ich einen Beitrag ( Dynamic HTML mit JavaScript ), die einige Techniken, um dynamisch hinzufügen Stylesheets und Skripten in eine HTML-Seite geladen dargestellt. Wer nutzt prototype.js können erheblich vereinfachen Ihr Leben durch, zum Beispiel:

1
2
3
4
5
6
"dom:loaded" , Dokument zu beobachten ("Sun: 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] einfügen (script).;
}
);

Nachdem die Seite geladen ist ( document.observe ) fügt ein neues Skript JavaScript! Für Stile, die genau das gleiche!

Fortsetzung ...