1

jQueryUIに精通しているだけです。だから、これは私の見解からのコードのブロックです：

<label id="min">
    5000</label>
<div id="slider">
</div>
<label id="max">
    9000</label>

そして、スクリプトの一部：

    $('#slider').slider({
        animate: true,
        range: true,
        min: 5000,
        max: 9000,
        values: [5000, 9000],
        slide: function (event, ui) {
            //doing smth
        }
    });

すべてが正常に機能しますが、スライダーが引き伸ばされ、線全体が表示されます。ラベルはその下と下にあります。私はそれらすべてが一列に並ぶことを期待していました。

それを達成するにはどうすればよいですか？

編集

これは私が期待していることです：

正しい

そして、これは私が持っているものです：

エラー

編集

Site.cssファイルに次のコードを追加して、スライダーcssをオーバーライドしようとしました。

.ui-slider .ui-slider-handle
{
    position: absolute;
    z-index: 2;
    width: 0.5em !important;
    height: 1.2em !important;
    cursor: default;
}

しかし、何も変わりませんでした。jQueryにこのcssを使用させるにはどうすればよいですか？

別の注意：元のcssは次のようになります：

.ui-slider .ui-slider-handle
{
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 1.2em;
    cursor: default;
}

それで、cssはここでの問題ですか？または何か他のものが私のスライダーを伸ばすのですか？

もっと

これは生成されたhtmlです：

<div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
    <div class="ui-slider-range ui-widget-header" style="left: 25.95%; width: 74.05%;">
    </div>
    <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 25.95%;">
    </a>
    <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 100%;">
    </a>
</div>

やっと

.ui-sliderではなく、クラスをオーバーライドする必要があり.ui-slider .ui-slider-handleました。それが問題でした。

Rajesh Rolen- DotNet De、ありがとう！

4

1 に答える 1

1

スライダーの幅を設定できます。 jqueryスライダーの幅と高さを変更します

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
width:1em !important;
height:1em !important;
 cursor: default;
}

http://tycoontalk.freelancer.com/css-forum/200419-jquery-css-slider-width-100-problem.html

于 2012-09-05T04:41:54.940 に答える