Artikel mit Tag 'scriptaculous'


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

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

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

Shadowbox assetURL: Image-Pfad

Wenn Shadowbox sein Fenster öffnet, um Inhalt zu zeigen (Bild, iframe, Film, etc ...), Blick, Warten, ein animiertes gif, die im Paket kommt. Wenn die Seite, die mit Shadowbox wird, ist auf der gleichen Ebene wie der Ordner images, funktioniert alles einwandfrei. Standardmäßig in der Tat, für das animierte gif unten Shadowbox images / loading.gif aussehen - oder Bilder / Laden-light.gif wenn Sie die Arten Licht (shadowbox-light.css) gewählt haben. Andernfalls und oft gibt es auch das Risiko, nicht accorgesene, wenn wir in einem anderen Masten sind, erzeugt es einen schönen Code 404 - Seite nicht Träger in unserem Fall Datei wurde nicht gefunden!

Zur Lösung des Problems nur initialisieren Shadowbox mit einem geeigneten Parameter, die genau den absoluten Pfad angibt in den Ordner images: undolog.com von z. B., legte ich das animierte gif des Ladens direkt in den Ordner images in dieser Wurzel (wie etwa eine Milliarde andere Websites :) . Um diesen Ordner zugänglich Shadowbox, unabhängig von dem Weg, habe ich eine einfache Möglichkeit enthalten:

1
2
/ / Init Parameter shadowbox mit assetURL
assetURL : 'http://www.undolog.com/' } ) ; Shadowbox Init ({assetURL: 'http://www.undolog.com/'}).

Fortsetzung ...

Alle Klone Lightbox in einem dynamischen Array

Planetozh geschaffen hat eine schöne Landschaft des dynamischen Werkzeug können alle JavaScript-Bibliotheken wie Lightbox aufzulisten.

Bild

Bild Mit einem Panel (siehe Bild links) mit einer Reihe von "Ticks" (Kontrollkästchen), die die verschiedenen Funktionen der Bibliotheken geben, können Sie einen Filter, was zu einer Liste von einem oder mehreren Bibliotheken, die den Job zu erledigen. Wir hoffen, dass der Autor dieses fantastische Seite unterhält aktualisiert, sehr nützlich in entwirren die zahlreichen und immer leistungsfähigere Bibliotheken dieser Art.

Fortsetzung ...

Hinzufügen neuer Übergänge in Scriptaculous

Nicht jeder weiß, dass dies vielleicht, aber Sie überschreiben können, oder fügen Sie Übergänge Effekte scriptaculous.js in einer extrem einfach und schnell. Scriptaculous Übergänge, Effekte, um die Art der Animation, wie sie sind nicht in Flash umgesetzt (ich empfehle einen Blick auf zu bestimmen diesem PDF des großen Rober Penner ), aber im Endeffekt ist - in der Tat - das gleiche . Außerdem im Paket Scriptaculous sind einige Übergänge nicht in Basis vorhanden invence Actionscript. Wenn wir einen neuen Übergang zu Scriptaculous hinzufügen wollte legen Sie einfach diesen Code, bevor Sie irgendeine Wirkung:

1
2
3
= function ( pos ) { Effect. Transitions. Exponential = function (pos) {
- Math. pow ( 1 - pos , 2 ) ; return 1 - Math pow (1 - polig, 2).
}

Von diesem Moment an, können wir den neuen Übergang exponentiellen in all den Auswirkungen der Scriptaculous. Für eine Vielzahl von Übergängen Gewinne - fast eine Portierung von Actionscript zu Scriptaculous - siehe hinzufügen irgendein Gewürz Scriptaculous .

Fortsetzung ...

Effect.Tween Scriptaculous: Wie es funktioniert

Unter all den Bibliotheken "web 2.0" verfügbar, scriptaculous ist sicherlich die schlecht dokumentiert! Auf der offiziellen Website, die oft langsam, die Dokumentation ist teilweise schlecht gemacht und schwierig zu bedienen. Mit den neuesten Versionen, dann werden einige neue Features fehlen völlig, ebenso wie die neuen Core Wirkung Tween (Effect.Tween). Letztere, in einer ähnlichen Weise wie Tween Flash ermöglicht individuelle Übergänge zu manipulieren. ÜBERSICHT seiner Basis ist die folgende:

Fortsetzung ...

Light Gallery: LightView 2.0.0_rc1

LightView . Neu freigegebene hier ist noch ein weiteres Unauffällig Javascript-Bibliothek für Bildergalerien und mehr LightView in 2.0.0_rc1 Release , fügt auch Funktionen zu "öffnen" das Fenster mit dem Inhalt, dass geht über die einfache Bild: Flash-Filme, QuickTime , Form und IFRAME! Im Vergleich zu der vorherigen Version (1.1.0 - die Griffe nur Bilder), daher ist diese Release-Kandidat von den Funktionen, die in angereichert anderen Bibliotheken . . Die Werkzeuge von erforderlich Lighview zu arbeiten sind sehr gut bekannt Prototype 1.6.0.2 und 1.8.1 Scriptaculous . Gliattributi werden verwendet, um die Bibliothek zu verwalten class und rel .

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

Rating: 9 - Homepage von LightView

Fortsetzung ...

Leichte Library: aus Slimbox zu Shadowbox, Galerien in Javascript

Man könnte sagen - und das zu Recht - nur! Von JavaScript-Bibliotheken (Unauffällig - nicht aufdringlich oder teilweise), um Bilder und Galerien zu behandeln gibt es so viele. Jedenfalls hier ist die Liste, mit Stärken und Schwächen, die besten, die ich bisher ausprobiert habe.

SlimBox 01.41

Extrem minimal, 7K (auf 1,41), erfordert mootools zu arbeiten. Wie auf der Startseite angezeigt ist ein echter Klon graph Lightbox , die wir weiter unten sehen werden. Ehrlich gesagt, abgesehen von der extremen Kompaktheit der Bibliothek, nichts Besonderes. Am selben Ort, jedoch können Sie dort auch ein Skript zur Laufzeit Reflexion erzeugen ... kann es sinnvoll sein, dies zu begrenzen ;)

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

Lightbox2

Lightbox2 Eines der bekanntesten und einfach. Verwaltet in dieser Pressemitteilung sind Bilder (so es nicht mit QuickTime, Flash oder andere Arbeiten). Für seinen Betrieb erfordert Prototype und Scriptaculous . Verwenden Sie das Attribut rel auf die Links zu den zu verarbeitenden Bilder zu identifizieren:

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

Wie andere Bibliotheken, die wir sehen werden, unterstützt den Diashow-Modus, durch Eingabe eines beliebigen Kennung in eckigen Klammern in einer Reihe von link / Bild:

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

Bewertung: 6 - Startseite Lightbox2

LightWindow 2.0

LightWindow 2.0 Auch dies ist durchaus üblich! Nach allem, wie zu verstehen, was ist die am häufigsten verwendete? ;) . Es ist jedoch sehr umfangreich und vielseitig. Der Ort zeichnet sich durch den Aufruf für Spenden für den Kauf eines Mac ... ein wenig invasive und dringendsten ... Jedoch, wie die vorhergehende, für seinen Betrieb, erfordert die Anwesenheit von Prototype und Scriptaculous . Anders als seine Vorgänger, aber damit können Sie moltisiimi Dateitypen: aus den Bildern, QuickTime-Filme, Flash-Filme, externe HTML-Seiten und PDF-Dateien. ) altri obbligatori ( class e params - per impostare il comportamento della libreria). Umgekehrt nutzt verschiedene Attribute, einige optional ( author, caption und title ) anderen gesetzlich ( class und params - , um das Verhalten der Bibliothek). Zum Beispiel, um eine Galerie oder einer Diashow verwenden das 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 > < a href = "gallery/0-sushi.jpg" class = "LightWindow" rel = "[Sushi]" title = Titel "Left Behind" = "Looks super lecker!" author = "Unbekannt"> Bild # 1 </ zu >
"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 > < a href = "gallery/1-sushi.jpg" class = "LightWindow" rel = "[Sushi]" title = "Hüten Sie sich vor warewolves ..." caption = "Ich sollte das nicht tun, wenn ich hungrig bin" author = "Unbekannt"> image # 2 </ a >
"gallery/2-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "That was good!" caption = "Take that sushi!" author = "Unknown" > image #3 < / a > < a href = "gallery/2-sushi.jpg" class = "LightWindow" rel = "[Sushi]" title = "Das war gut!" caption = "Nehmt das Sushi!" author = "Unbekannt"> Bild # 3 </ a >

Bewertung: 8 - Homepage LightWindow 2.0

Shadowbox 1.0B

Shadowbox Trotz sowohl auf Version 1.0 beta, ist dies vielleicht die komplette Bibliothek, sowohl aus funktionaler Sicht für beide Bibliotheken unterstützt. Für seinen Betrieb, in der Tat kann man aus einer Reihe von Rahmenbedingungen, dank Dateien "adapter" speziell hergestellt und vom Autor wählen:

Der visuelle Effekt (konfigurierbar über Haut / css), dann, im Gegensatz zu den anderen, ist es auf jeden Fall attraktiver. Die Attribute werden nur verwendet, rel , wo in seinem Inneren Platz finden alle anderen Konfigurationsparameter. Zum Beispiel, um eine Galerie zu erreichen, verwenden Sie einfach:

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

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

1
"myimage.jpg" rel = "prettyPhoto;options={overlayOpacity: 0.5, resize: false}" > My Image < / a > < a href = "meinbild.jpg" rel = "prettyPhoto, options = {OverlayOpacity: 0.5, resize: false}"> My Image </ a >

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

Rating: 9 - Homepage Shadowbox 1.0B

Fortsetzung ...