4

私はそれを完璧にスタイリングすることができましたが、それをコンテナ内にとどまらせることは困難でした. マージン左の修正は私にはうまくいかないようです。

ここに jsfiddle があります: http://jsfiddle.net/Erugp/

4

3 に答える 3

9

これに対する解決策は次のとおりです。何もラップする必要はありません。ハンドルの左マージンを幅の 1/2 の負の値に設定するだけです。http://bugs.jqueryui.com/ticket/3893で説明されているとおり

于 2013-10-03T14:46:24.347 に答える
3

問題は、jquery UI スライダーが左側の CSS プロパティと相対値を使用してスライダーをアニメーション化することです。これは、ハンドルの左端をスライダーの左端から反対側の端までスライドさせてオーバーフローさせることを意味します。1 つの解決策は、スライダーの div を小さくして、スタイリングを保持する別の div でラップすることです。外側の div の幅 = スライダーの幅 + ハンドルの div。

CSSのサイズとマージンを少しいじった後、うまくいきました。

于 2011-12-18T11:28:36.377 に答える
3

JavaScript を使用して修正します。

var $Slide = jQuery('#StatusSlide');
$Slide.slider({
  slide: function(event, ui) {
    /* Fix handler to be inside of slider borders */
    var $Handle = $Slide.find('.ui-slider-handle');
    $Handle.css('margin-left', -1 * $Handle.width() * ($Slide.slider('value') / $Slide.slider('option', 'max')));
  }
});
/* Fix handler to be inside of slider borders */
var $Handle = $Slide.find('.ui-slider-handle');
$Handle.css('margin-left', -1 * $Handle.width() * ($Slide.slider('value') / $Slide.slider('option', 'max')));

そして、これが修正されたフィドルです：http://jsfiddle.net/he04hqg3/

于 2014-10-19T14:09:24.837 に答える