jQuery einfachen Schieberegler

jQuery einfachen Schieberegler können Sie schnell eine Diashow-Funktion aus einer einfachen Liste UL/LI :

1
2
3
4
5
< ul >
"Title 1" >< img title = "Subtitle 1" src = "image1.jpg" / >< / li > < ihnen title = "Titel 1"> < img title = "Untertitel 1" src = "image1.jpg" /> </ sie >
"Title 2" >< img title = "Subtitle 2" src = "image2.jpg" / >< / li > < ihnen title = "Titel 2"> < img title = "Untertitel 2" src = "image2.jpg" /> </ sie >
li > < wird > ... </ sie >
</ ul >

Alle Links, Bild oder sottotiolo, kann ohne Probleme eingegeben werden:

1
2
3
4
5
< ul >
"Title 1" >< a href = "#" >< img border = "0" title = "Subtitle 1" src = "image1.jpg" / >< / a >< / li > < ihnen title = "Titel 1"> < ein href = "#"> < img border = "0" title = "Untertitel 1" src = "image1.jpg" /> </ eins > </ sie >
"Title 2" >< img title = "Subtitle 2 with a <a href='#'> link < / a > " src="image2.jpg" /> < / li > < ihnen title = "Titel 2"> < img title = "Untertitel 2 mit <a href='#'> Link </ eins > "src =" image2.jpg "/> </ sie >
li > < wird > ... </ sie >
</ ul >

Nutzung

Sie können die neueste Version direkt herunterladen aus dem Repository auf Google Code :

1
2
3
"text/javascript" src = "http://www.google.com/jsapi" >< / script > < script type = "text / javascript" src = "http://www.google.com/jsapi"> </ script >
"text/javascript" > google.load("jquery", "1.3") < / script > < script type = "text / javascript"> google.load ("jquery", "1,3") </ script >

Sobald die Seite geladen wird:

1
2
3
4
5
6
7
"text/javascript" > < script type = "text / javascript">
google.setOnLoadCallback (
function () {
$ ('# Ul myslider') SimpleSlider ().;
}
);
</ script >

Optionen

Sie können einen Satz von Parametern, die Methode simpleSlider () übergeben:

1
2
3
4
5
6
7
8
'0.7' ) , Bildunterschrift alpha Opazität (default '0 0,7 '),
'#000' ) Bildunterschrift bgColor die Hintergrundfarbe (Standardwert ist '# 000')
, 'normal' , 'fast' or number of milliseconds ) default 'slow' bgSpeed ​​Hintergrundbild fade Geschwindigkeit ('slow', 'normal', 'schnell' oder die Anzahl der Millisekunden) default 'slow'
'slow' , 'normal' , 'fast' or number of milliseconds ) default 'slow' Bildunterschrift captionSpeed ​​slideup / slidedown Geschwindigkeit ('slow', 'normal', 'schnell' oder die Anzahl der Millisekunden) default 'slow'
'50px' ) Bildunterschrift Höhe Höhe (Standard '50px ')
CSS Object titleStyle für den Titel
CSS Object subtitleStyle für Untertitel
4000 ) Zeitlimit in Millisekunden zwischen Objektträger Intervall (standardmäßig 4000)

Ressourcen

10 Kommentare zu "jQuery einfachen Schieberegler"

  1. 30. Januar 2009 Camu :

    Sehr interessant ist das einzige, was ich perplime die Zugänglichkeit dieser Werkzeuge. Mit anderen Worten, ruiniert sie herum mit Javascript deaktiviert, und die Verwendung von position: absolute macht es schwierig, das Layout zu verwalten, wenn der Benutzer erweitert den Text auf der Seite (Strg +). Wie diese Probleme zu lösen? Dank :)

    Antwort zitieren
  2. 30. Januar 2009 Giovambattista Fazioli :

    @ Camu: eine große Frage! Die Frage, in der Tat, ist sehr breit. Einfach ausgedrückt, versuchen, Ihre Frage zu beantworten, können wir das Problem in zwei Teile gliedern: Javascript ist aktiv und flüssige Layouts.

    Tools wie das von mir vorgeschlagene unbedingt davon aus, fahren, dass Javascript eingeschaltet ist und ordnungsgemäß in die jQuery-Bibliothek geladen. Doch wie im Fall hier vorgestellten, führt diese Art von Skript eine Laufzeit ändern, um eine bereits vorhandene HTML und oft gut lesbar, auch ohne Anwendung des Skripts. Diese Technik, bekannt als unaufdringliche JavaScript (Unauffällig Javascript), hat als Hauptziel ist es, eine Seite, die bereits in Betrieb ist und gut lesbare, Durchführen Ergänzungen nur, wenn JavaScript aktiviert ist zu verbessern. Allerdings gibt es keine wirkliche Trennlinie zwischen einem JavaScript "intrusive" und ein "non-intrusive". Zum Beispiel könnte das Plugin habe ich vorgestellt als semi-intrusive werden.

    Am deutlicher, um die Zugänglichkeit, wie die Fähigkeit, die Schrift vergrößern widmet, sind die Dinge noch komplizierter, weil es ins Spiel der Bitmap verwendet werden, um Seiten, die normalerweise nicht leiden Entlassungen als Schriften erstellt Anrufe. Zur Überwindung des Hindernisses Sie einen speziellen Grafik-Stylesheets verpackt und erstellen muss und die Nutzung einer Vielzahl von Techniken (von denen einige Javascript aktiv erfordern) zu "reparieren" ein Layout dieser Art während der Laufzeit.

    Aber lassen Sie unterstreichen, dass einige Browser haben kürzlich internen Fähigkeiten, Zugänglichkeit, hinzugefügt, um einige Hindernisse im Zusammenhang mit dem aktuellen Standard CSS und HTML zu überwinden. Zum Beispiel können Sie "in zoom" nicht nur die Schrift, sondern die ganze Seite, macht ein echtes "Optischer Zoom", so dass die gesamte layput werden noch sichtbar in der richtigen Art und Weise (die Bitmaps kann ein bisschen körnig erscheinen) .

    Ich glaube, dass solche Dinge sollte ein integraler Bestandteil der "Kern" eines Browsers werden, so dass Entwickler von dieser Art von Problem beseitigt werden kann. : D

    Antwort zitieren
  3. 30. Januar 2009 Camu :

    Wow, das ist eine rispostona :) Danke, dass so detaillierte ... Ich fuhr fort, sich Notizen zu machen!

    Antwort zitieren
  4. 31. Januar 2009 Santino Bivacqua :

    Hallo, tolles Drehbuch, ... und vor allem abbaubar.

    Ich frage mich, eine Sache, aber es ist möglich, zu entscheiden, wie viel jede Folie devvo die Dauer sein?
    Ich meine, vielleicht ein paar Bilder sind nur Titel, nur 4 Sekunden und dann die nächste, aber wenn das Bild hat eine Menge Text zu lesen sollte mindestens 8 / 10 Sekunden ...

    Es wäre nützlich, zum Beispiel unter Angabe der Dauer des Bildes selbst, wie eine schöne [... Verloren ... ]
    Was denken Sie?

    Antwort zitieren
  5. 31. Januar 2009 Giovambattista Fazioli :

    @ Santino Bivacqua:

    für jede Folie entscheiden, wie devvo die Dauer werden

    Ich glaube, ich verstehe, was Sie bedeuten, obwohl es einige Ihrer Kommentare verloren hat ... und es scheint eine gute Idee. Sie können ein Attribut hinzufügen, zum Beispiel in einem Feld rel oder benutzerdefinierte (siehe Stunden) und, falls vorhanden, um individuell zu entscheiden, zwischen einer und einer anderen Folie.
    Sobald ich werde aktualisieren kann und werde ich Ihnen für die hervorragende Beratung zu zitieren. Dank : D

    Antwort zitieren
  6. 31. Januar 2009 Santino Bivacqua :

    Oops sorry, habe ich das Tag img , und ich habe nicht bemerkt ....
    Vielen Dank, aber meine Idee war, den Betrag in das rel-Attribut des Bildes einfügen
    zum Beispiel:

    o ancora rel="4" rel="speed[4]" oder einfach rel="speed-4" oder rel="4"

    wäre mehr "praktisch, besonders bei Verwendung einer Template-Engine und zeigen Dias aus der Datenbank, es würde aber auch JavaScript unangenehm, aber nicht unmöglich :)

    Antwort zitieren
  7. 31. Januar 2009 Giovambattista Fazioli :

    @ Santino Bivacqua: in der Tat genau das, was ich dachte, :)

    Antwort zitieren
  8. 2. Februar 2009 jQuery einfachen Schieberegler 1.1.0 | Undolog.com :

    [...] Durch den Vorschlag, dass Santino Bivacqua ich in jQuery einfachen Schieberegler angeschlossen Inspiriert kann ein Timeout für jede Folie gesetzt [...]

  9. 8. April 2009 @ g Briele:

    Sie kann Links zu den Folien hin und her zu bekommen, ohne die Zeit abwarten?

    Antwort zitieren
  10. 8. April 2009 Giovambattista Fazioli :

    @ G @ Briele Nein, diese Funktionen in dieser Version nicht geplant.

    Antwort zitieren

Hinterlasse einen Kommentar

XHTML TAG PERMIT: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERTION CODE: 
 <pre></pre> // blocco generico <code></code> // blocco generico [cc_actionscript][/cc_actionscript] // Actionscript [cc_actionscript3][/cc_actionscript3] // Actionscript 3 [cc_css][/cc_css] // CSS Style Sheet [cc_html][/cc_html] // HTML [cc_js][/cc_js] // Javascript [cc_objc][/cc_objc] // Objective-C [cc_php][/cc_objc] // PHP [cc_sql][/cc_sql] // SQL