JQuery Kochbuch (German Edition)

versehen, ihn an einem Handle »anzufassen« und diesen zu verschieben, indem wir für ihn
.slider()
aufrufen. Dabei nutzen wir die Slider-Option
range: 'min'
, so dass der Bereich zwischen 0:00 und der aktuellen Position andersfarbig dargestellt wird. Und natürlich setzen wir
max
auf die Laufzeit des Liedes in Sekunden. Handelt es sich also um ein Lied, das 3,5 Minuten läuft, setzen wir
max
auf 210. Wir brauchen da gar nicht rechnen, da uns
audio.duration
schon die Anzahl der Sekunden im Lied gibt. Die anderen Standardwerte für Slider sind hier schon genau richtig:
min: 0
,
step: 1
.
    Der CSS-Code:
.mplayer .track { top: 11px; margin: 0 5.2em; margin-top: −2px;
     border-style: none; }
.mplayer .track .ui-slider-handle { border-left-width: 0; height: 1.1em;
     top: −0.24em; width: 2px; margin-left: −3px; }
    Der HTML-Code:

    Der JavaScript-Code:
$('.mplayer .track')
     .slider({
     range: 'min',
     max: audio.duration,
     slide: function(event, ui) {
     $('.ui-slider-handle', this).css('margin-left',
     (ui.value < 3) ? (1 - ui.value) + 'px' : '');
     if (ui.value >= 0 && ui.value <= audio.duration) {
     audio.set('currentTime', ui.value);
     }
     },
     change: function(event, ui) {
     $('.ui-slider-handle', this).css('margin-left',
     (ui.value < 3) ? (1 - ui.value) + 'px' : '');
     }
     })
     .find('.ui-slider-handle').css('margin-left', '0').end()
     .find('.ui-slider-range').addClass('ui-corner-left').end();

$audio
     .bind('timeupdate', function(event) {
     $('.mplayer .track').each(function() {
     if ($(this).slider('value') != audio.currentTime) {
     $(this).slider('value', audio.currentTime);
     }
     });
     $('.mplayer .currenttime').text(minAndSec(audio.currentTime));
     });
    Slider Handles sind mittig ausgerichtet – beim
min
-Wert befindet sich die linke Hälfte des Handle links vom Slider, beim
max
-Wert befindet sich die rechte Hälfte des Handle rechts vom Slider. Wir haben den Handle schon verschlankt und den linken Rahmen entfernt, so dass er ein bisschen besser in den Bereich passt. Aber wir müssen trotzdem noch ein paar Anpassungen vornehmen, wenn wir nahe an
min
sind. Dazu dienen diese Zeilen:
slide: function(event, ui) {
     $('.ui-slider-handle', this).css('margin-left',
     (ui.value < 3) ? (1 - ui.value) + 'px' : '');
     if (ui.value >= 0 && ui.value <= audio.duration) {
     audio.set('currentTime', ui.value);
     }
},
change: function(event, ui) {
     $('.ui-slider-handle', this).css('margin-left',
     (ui.value < 3) ? (1 - ui.value) + 'px' : '');
}
    Im Callback
slide
prüfen wir zudem, ob der Wert gültig ist, bevor wir das Audio-Element anweisen, an diesen Punkt zu springen. Das ist dann der Fall, wenn der Anwender den Slider verschiebt und wir die Abspielposition im Lied verändern müssen. So können wir ein »Scrubbing« zulassen. Berücksichtigten wir das nur im Callback für
change
, dann würde sich die Audio-Position erst ändern, wenn der Anwender die Maus loslässt, nachdem er den Handle verschoben hat. Figure 14-3 zeigt den Slider, den wir eben erstellt haben.
    Figure 14-3. Slider für die Position im Lied
    Fortschrittsbalken, um den Pufferstatus anzuzeigen
    Jetzt werden wir ein bisschen Spaß haben. Würden Sie mir glauben, dass wir zwei verschiedene jQuery UI-Plugins auf das gleiche Element loslassen können? Das funktioniert in diesem Fall sehr gut. Wir haben schon einen Slider, den wir als