jquery slider mit Wert über die Reisen mit dem Schieberegler

Ich habe einen slider mit Abfrage - /Schieberegler und formatiert es mit css. ( http://jsfiddle.net/9qwmX/ )

Mir ist es gelungen, um den ausgewählten Wert in einen div-container; aber jetzt möchte ich den container "Reisen" mit dem Schieberegler entsprechend an.
Ich habe versucht, verwenden Sie die ui.handle und seine css - left Eigenschaft, die ein Prozentsatz. Aber das Verhalten ist etwas seltsam: manchmal reist er mit der linken Seite des Schiebereglers und manchmal mit einen Abstand von 10px.

Frage: weiß jemand eine gute Möglichkeit, lassen Sie die Schachtel mit den slided-Wert-Reisen Sie mit dem Griff?

InformationsquelleAutor stUrb | 2012-06-19
  1. 12

    Können Sie einfach befestigen Sie eine QuickInfo-wie div, die Sie anfügen können, um den Griff, so dass es bewegt sich zusammen mit ihm. Sie müssen nur, um es zu positionieren mit CSS, und zwar so:

    JS

    var initialValue = 2012; //initial slider value
var sliderTooltip = function(event, ui) {
    var curValue = ui.value || initialValue; //current value (when sliding) or initial value (at start)
    var tooltip = '<div class="tooltip"><div class="tooltip-inner">' + curValue + '</div><div class="tooltip-arrow"></div></div>';

    $('.ui-slider-handle').html(tooltip); //attach tooltip to the slider handle
}

$("#slider").slider({
    value: initialValue,
    min: 1955,
    max: 2015,
    step: 1,
    create: sliderTooltip,
    slide: sliderTooltip
});

    CSS tooltip entlehnt aus dem twitter bootstrap-framework 

    .tooltip {
    position: absolute;
    z-index: 1020;
    display: block;
    padding: 5px;
    font-size: 11px;
    visibility: visible;
    margin-top: -2px;
    bottom:120%;
    margin-left: -2em;
}

.tooltip .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-top: 5px solid #000000;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    position: absolute;
    width: 0;
    height: 0;
}

.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    background-color: #000000;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}

    Demo: http://jsfiddle.net/9qwmX/2/

    InformationsquelleAutor Andres Ilich
  2. 1

    Können Sie tun, so etwas zu bauen, was Sie wollen, ich bin mit event.pageX

    var newLeft = 100;
$('#move').text(100).css('margin-left',115);
$("#slider").slider(
{
            value:100,
            min: 0,
            max: 500,
            step: 50,
            slide: function( event, ui ) {
                $( "#slider-value" ).html( ui.value );
                var  pos = (event.pageX > newLeft)? event.pageX + 8 
                                                  : event.pageX - 42;
                newLeft = event.pageX;                
                $('#move').text(ui.value).css('margin-left',pos);
            }
}
);

    Demo: http://jsfiddle.net/joycse06/Cw6u8/1/

    InformationsquelleAutor Prasenjit Kumar Nag
  3. 0

    Dies ist, wie ich es getan hätte. Um Ihnen den Einstieg:

    Nutzen Sie den "Griff" Lage:

    var offset = $('.ui-slider-handle .ui-state-default .ui-corner-all"').offset();
var offsetLeft = offset.left;
var offestTop = offset.top;

    Position der Folie-Wert-box mit einer absoluten Positionierung:

    #tijdlijnDatum { position: absolute; }

    Tun und etwas mit ihm in der slide Veranstaltung:

    $( "#slider" ).slider({
   slide: function(event, ui) { 

       $('#tijdlijnDatum').css({ left: offsetLeft + 'px'  }); //etc
   }
});
    InformationsquelleAutor Johan
Schreibe einen Kommentar