JQuery Kochbuch (German Edition)

.ui-progressbar .ui-progressbar-value { border-style: none; }
    Dies ist der JavaScript-Code:
var secondsCached = 0, cacheInterval;
$('.mplayer .track')
     .progressbar({
     value: secondsCached / secondsTotal * 100
     })
     .find('.ui-progressbar-value').css('opacity', 0.2).end();

cacheInterval = setInterval(function() {
     secondsCached += 2;
     if (secondsCached > secondsTotal) clearInterval(cacheInterval);
     $('.mplayer .track.ui-progressbar')
     .progressbar('value', secondsCached / secondsTotal * 100);
}, 30);
    Es gibt keinen HTML-Code, da wir das Element
.track
aus dem vorigen Abschnitt erneut verwenden. Und falls Sie es noch nicht bemerkt haben: Der Code, der sich um das Puffern kümmert, ist ein einziger Schwindel. Nicht, dass er nicht funktioniert, aber er zeigt nicht an, inwieweit ein Lied schon gepuffert ist, sondern er simuliert das nur. Aber das macht er toll! Hätten Sie wirklich eine Musik-Ressource, die geladen und gepuffert würde, und könnten Sie Ihre Audio-API darüber benachrichtigen, dann würden Sie das Event binden und den Fortschrittsbalken dementsprechend zwischen 0 und 100 setzen. Anders als beim Slider können Sie keinen eigenen
max
-Wert definieren. Aber das ist durchaus sinnvoll, denn der Fortschritt geht immer von 0 bis 100%, oder?
    Okay, wir haben jetzt also einen Prototypen. Wenn die Seite geladen ist, wird der Puffer-Status zunehmen, so als ob die Datei schnell geladen wird, aber nicht so schnell wie bei einer lokalen Datei. Es macht Spaß, dabei zuzusehen. Figure 14-4 zeigt den von uns erzeugten Fortschrittsbalken. Aber was ist mit der »gefälschten« Anzeige? Da es sich nicht um einen echten Puffer-Status handelt, kann man auch darüber hinausspringen. Was passiert dann? Das hängt von Ihrer Audio-API und dem Backend ab. Haben Sie also keine Möglichkeit, den Puffer-Status zu ermitteln, oder ist es für Sie uninteressant, dann überspringen Sie das einfach. Oder aber lassen Sie es, damit es schicker aussieht.
    Figure 14-4. Fortschrittsbalken, um den Puffer-Status anzuzeigen
    Lautstärkeregler
    Jetzt brauchen wir ein Steuerelement für die Lautstärke. Ein Slider ist da genau das richtige. Lassen Sie ihn von
volume: 0
bis
volume: 1
laufen und setzen Sie
step
auf 0.01:
$('.mplayer .volume').slider({
     max: 1,
     step: 0.01,
     value: audio.volume,
     slide: fnSlide,
     change: fnChange
});
    Bumm! Warum nicht? Nun, natürlich würde es so funktionieren. Aber der Code würde einiges an Platz verbrauchen. Und die Ausrichtung kann auch ein Problem sein. Lassen wir den Slider horizontal anzeigen (was der Standard ist), dann rangeln wir mit der Anzeige für die Position um den Platz. Zudem würde unser Player »schief« aussehen. Sollten wir dann also dem Slider die Option
orientation: 'vertical'
hinzufügen? Nun, das würde zwar auch funktionieren, aber unser Player wäre dann 100 Pixel hoch – und das nur, um den Lautstärkeregler anzuzeigen. Die restlichen Steuerelemente brauchen nur um die 30 Pixel. Es muss einen besseren Weg geben.
    Und den gibt es. Verbergen Sie den Slider für die Lautstärke, wenn Sie ihn nicht brauchen. Wir zeigen nur den Slider-Handle dauerhaft an und fügen ein kleines Lautsprecher-Symbol hinzu. Dann verbergen wir den Rest, indem wir die Höhe des Steuerelements auf 0 setzen. Bewegt der Anwender den Mauscursor über den Handle, setzen wir die Höhe auf 100 Pixel. Beim Verlassen entfernen wir das, so dass die Höhe wieder auf 0 zurückgesetzt wird. Dadurch, dass wir den Container absolut in einem relativen Wrapper positionieren, wird auch nicht die Gesamthöhe des Players beeinflusst, wenn alle Elemente sichtbar sind.
    Es gibt nur ein Problem. Gehen wir einmal davon aus, dass die Lautstärke bei 0,1 ist, also 10%. Das würde bedeuten, dass der Handle sich nahe am unteren Rand befindet. Sollte der Handle herunterspringen? Oder der Balken nach oben? Und was passiert, wenn der Anwender ihn verschiebt? Zum Beispiel von 10% auf 90%? Dann würde er zurückspringen, wenn der Balken wieder verborgen wird. Das ist dumm.
    Daher machen wir es so: Wir halten den Handle die ganze Zeit am selben Platz. Der Anwender zieht ihn hoch, um die Lautstärke zu erhöhen, und herunter, um sie zu verringern. Der Balken wird sich einschließlich des durch
range
:
"min"
schattierten Bereichs unter dem Handle entsprechend bewegen.
    Dies ist der CSS-Code:
.mplayer .volume-container { position: absolute; top: 12px; right: 12px; }
.mplayer .volume { height: 0; margin-top: 5px; }
    Und dies der