JQuery Kochbuch (German Edition)

HTML-Code:

    Hier der JavaScript-Code:
$('.mplayer .volume')
     .slider({
     max: 1,
     orientation: 'vertical',
     range: 'min',
     step: 0.01,
     value: audio.volume,
     start: function(event, ui) {
     $(this).addClass('ui-slider-sliding');
     $(this).parents('.ui-slider').css({
     'margin-top': (((1 - audio.volume) * −100) + 5) + 'px',
     'height': '100px'
     }).find('.ui-slider-range').show();
     },
     slide: function(event, ui) {
     if (ui.value >= 0 && ui.value <= 1) {
     audio.set('volume', ui.value);
     }
     $(this).css({
     'margin-top': (((1 - audio.volume) * −100) + 5) + 'px',
     'height': '100px'
     }).find('.ui-slider-range').show();
     },
     stop: function(event, ui) {
     $(this).removeClass('ui-slider-sliding');
     var overHandle = $(event.originalEvent.target)
     .closest('.ui-slider-handle').length > 0;
     if (!overHandle) {
     $(this).css({
     'margin-top': '',
     'height': ''
     }).find('.ui-slider-range').hide();
     }
     },
     change: function(event, ui) {
     if (ui.value >= 0 && ui.value <= 1) {
     if (ui.value != audio.volume) {
     audio.set('volume', ui.value);
     }
     }
     }
     })
     .mouseenter(function(event) {
     if ($('.ui-slider-handle.ui-state-active').length) {
     return;
     }
     $(this).css({
     'margin-top': (((1 - audio.volume) * −100) + 5) + 'px',
     'height': '100px'
     }).find('.ui-slider-range').show();
     })
     .mouseleave(function() {
     $(this).not('.ui-slider-sliding').css({
     'margin-top': '',
     'height': ''
     }).find('.ui-slider-range').hide();
     })
     .find('.ui-slider-range').addClass('ui-corner-bottom').hide().end();
    Während des Ziehens passen wir den negativen
margin-top
des Balken umgekehrt zum aktuellen Wert an, um den Handle an einer Stelle zu halten. Das geschieht durch diesen Code:
$(this).parents('.ui-slider').css({
     'margin-top': (((1 - audio.volume) * −100) + 5) + 'px',
     'height': '100px'
})
    Figure 14-5 zeigt den Lautstärke-Slider in unserem Player.
    Figure 14-5. Lautstärke-Slider
    Bei dieser Interaktion müssen Sie erkennen, dass Sie nicht den Balken in die umgekehrte Richtung wie die Maus ziehen. Aber gleichzeitig bewegen sich Ihr Mauscursor, die Größe des schattierten Bereichs und die Lautstärke in die richtige Richtung. Weniger/Unten für weniger, mehr/oben für mehr. Wenn Sie möchten, können Sie den Mauscursor auch über das Symbol bewegen, so dass der Balken erscheint, Ihren Mauscursor an die gewünschte Position auf dem Balken bewegen und klicken.
    Hintergrund des Widgets und letzte Feinarbeiten
    Lassen Sie uns jetzt noch ein paar Elemente mit Klassen aus dem jQuery UI CSS Framework hinzufügen, um den Player so anzupassen, dass er zu den Steuerelementen darin passt:
    Hier der CSS-Code:
.mplayer .bg { position: absolute; width: 100%; height: 100%; top: 0;
     bottom: 0; left: 0; right: 0; border: none; }
.mplayer .rod { position: absolute; top: −2px; left: −0.4%; right: −0.4%;
     width: 100.8%; height: 3px; overflow: hidden; border: none; }
.mplayer .hl { position: absolute; top: 2px; left: 1%; right: 1%; width: 98%;
     height: 1px; overflow: hidden; border: none; }
.mplayer .hl2 { position: absolute; top: 2px; left: 2%; right: 2%; width: 96%;
     height: 3px; overflow: hidden; border: none; }
    Hier der JavaScript-Code:
$('.mplayer').each(function() {
     $('.bg:first', this).css('opacity', 0.7);
     $('.bg:last', this).css('opacity', 0.3);
})
$('.mplayer .rod').css('opacity', 0.4);
$('.mplayer .hl').css('opacity', 0.25);
$('.mplayer .hl2').css('opacity', 0.15);
    Und der HTML-Code: