gbTicker v1.0
Ein animierter Newsticker mal anders. Mit gbTicker können mehr Informationen dargestellt werden, die in ein einfaches Laufband nicht platzieren kann. Zudem werden die einzelnen Themen übersichtlicher angezeigt. Die JavaScript Klasse erlaubt es den Benutzer die Animation anzuhalten und abzuspielen, oder das Blättern von vertikal auf horizontal umzustellen. gbTicker eignet sich auf Webseiten bei denen häufig und viele Neuigkeiten veröffentlicht werden und diese nicht viel Platz einnehmen sollen. Es können zu den Texten natürlich auch Bilder eingebunden werden.
Demo
Newsticker
Ticker anhalten
Ticker absielen
Horizontal blättern
Vertikal blättern
-
gbAnimate v1.0
Diese JavaScript Klasse ermöglicht es Ihnen beim Seitenaufbau Elemente einzufaden oder bei einem Seitenaufruf Elemente auszufaden. D.h. das beim eintreten in eine Seite die gewünschten Elemente eingeblendet werden und beim verlassen der Seite ausgeblendet werden. Diese ein- ausblend Animation ist sehr effektvoll und wertet Ihre Seite auf ohne Flash verwenden zu müssen.
-
gbWindow v1.0
gbWindow ist nichts anderes als eine Lightbox. Durch klick auf einen Link öffnet sich ein Fenster, das vor einem abgedunkelten Hintergrund auf einer Webseite angezeigt wird. Das Fenster kann Bilder oder Flash-Anwendungen darstellen. gbWindow eignet sich als Bilder-Galerie oder als Popup-Fenster.
-
gbMoveBox v1.0
Mit gbMoveBox können Sie einen Div Container an einer absoluten Stelle positionieren. Beim scrollen bewegt sich dieser Div Container zur eingestellten Position. Diese Klasse eignet sich besonders für Werbung oder für Informationen, die immer präsent sein sollen.
-
gbAccordion v1.0
Mit gbAccordion können sie einen Auf- Zuklapp-Effekt (Accordion-Effekt) realisieren. Durch klicken eines Elementes wird der dazugehörige Inhalt aufgeklappt und der alte Inhalt zugeklappt. gbAccordion eignet sich hervorragend für einen FAQ-Bereich.
-
gbReflection v1.0
Mit gbReflection können Sie Bilder spiegeln. Eine Bildbearbeitung für die Spiegelung eines Bildes ist somit überflüssig. Mit einen Reflexion-Effekt werten Sie das Erscheinungsbild Ihrer Webseite erheblich auf.
-
gbInputLen v1.0
gbInputLen liest die Anzahl der Zeichen eines Textfeldes (Input) oder eines Textbereichs (Textarea) und gibt die restliche Zeichenlänge in einer Ausgabe aus. Dabei wird die Eingabe auf die eingestellte Zeichenlänge (maxlength) begrenzt. Somit ist es kein Problem mehr maxlength bei Textarea anzuwenden, um die Zeichenlänge eines mehrzeiligen Eingabefeldes zu begrenzen. Diese JavaScript Klasse eignet sich besonders für Formulare die in ihrer Eingabe beschränkt werden sollen.
-
gbSnow v1.0
Mit gbSnow werden Bilder als Schneefall animieren. Durch diese JavaScript Klasse können Sie zur kalten Jahreszeit Ihre Internetpräsentation effektvoll in Szene setzen.
Einbinden
- Laden Sie die benötigt Daten » hier herunter.
- Binden Sie die JavaScript Dateien in Ihrer Seite ein.
<script type="text/javascript" src="moo1.2.js"></script>
<script type="text/javascript" src="gbTicker.js"></script> - Optional können Sie Schaltflächen anlegen, um dem Benutzer die Möglichkeit zu geben den Newsticker zu steuern. Wichtig hierbei ist, dass die Schaltflächen in einen Container liegen, dem eine eindeutige Identifikationsnamen (id) vergeben wurde. Diese id wird der Klasse übergeben.
Z.B.<div id="btn">
<div id="btn_stop"><a><img src="stop.jpg" /></a> Ticker anhalten</div>
<div id="btn_play"><a><img src="play.jpg" /></a> Ticker absielen</div>
<div id="btn_hori"><a><img src="hori.jpg" /></a> Horizontal blättern</div>
<div id="btn_verti"><a><img src="verti.jpg" /></a> Vertikal blättern</div>
</div> - Legen Sie einen Container an in dem Ihre Informationen in eine Liste stehen werden.
Z.B.<div id="contentTicker""></div> - In diesen Container werden nun Ihre Inhalte in einer Liste stehen. Wichtig hierbei ist die Vergabe einer eindeutigen Identifikationsnamen (id), die der Klasse übergeben werden muss.
Z.B.<ul id="itemTicker">
<li>Inhalt mit Text und Bild</li>
<li>Inhalt mit Text und Bild</li>
</ul> - Sie können der Klasse noch Optionen (optional) zuweisen, die der Klasse übergeben werden soll.
<script type="text/javascript">
var gbTickerOpt = {
handler : 'itemTicker',
btnStop : 'btn_stop',
btnPlay : 'btn_play',
btnDirect_h : 'btn_hori',
btnDirect_v : 'btn_verti',
current : 0,
intervall : 3,
play : true,
duration : 1500,
transition : Fx.Transitions.Expo.easeOut,
direction : 'vertical'
}
</script> - Die JavaScript Klasse wird automatisch aufgerufen, wenn die Webseite vollständig geladen ist.
Erläuterung
- handler
Tragen Sie hier die id ein, die Sie der Liste vergeben haben.
Z.B. 'itemTicker' - btnStop, btnPlay, btnDirect_h, btnDirect_v
Hier tragen Sie die id für die Steuerelemente ein.
Z.B. 'btn_stop', 'btn_play', 'btn_hori', 'btn_verti' - current
Die Zahl (beginnend ab 0), die Sie hier eintragen, beeinflusst den Startpunkt. Sie können somit mit der zweiten Nachricht (1) beginnen.
Z.B. 0 - intervall
Geben Sie an, wie viel Sekunden eine Information stehen bleiben soll.
Z.B. 3 - play
Mit einen booleschen Wert (true oder false) können Sie beeinflussen, ob der Newsticker abgespielt werden soll. true steht für abspielen und false für nicht abspielen.
Z.B. true - duration
Einstellung für die Geschwindigkeit der Animation.
Z.B. 'short', 'normal', 'long' oder eine Zahl (1=1ms, 100=100ms) - transition
Diese Einstellung gibt den Ablauf der Animation an. Mehr dazu finden Sie bei » MooTools
Z.B. Fx.Transitions.Expo.easeOut, Fx.Transitions.Linear.easeOut - direction
Hier können Sie die Richtung (vertical oder horizontal) festlegen in der die Animation laufen soll.
Z.B. 'vertical'
RSS
