3

jquery ui 範囲スライダー ハンドル内で値のスタイルを設定しようとしています。

このDEMOを使用しています

さらに、この CSS を使用しましたが、まだ機能していません。どこが間違っていますか？

<div class="demo">
    <div id="slider-vertical" class="sliderControl-label v-labeCurrent"></div>
</div>

.sliderControl-label {
    color: #CCCCCC;
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    top: -10px;
}

.ui-slider-handle .sliderControl-label .v-labelCurrent {
    color: #777777;
    font-size: 16px;
    line-height: 24px;
    position: relative;
    text-shadow: 0 1px 0 #FFFFFF;
    top: -2px;
    transition: color 0.15s linear 0s;
}​


$(function(){
    $("#slider-vertical").slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 60,
        slide: function( event, ui ) {
            $( "#amount" ).val( ui.value );
            $(this).find('.ui-slider-handle').text(ui.value);
        },
        create: function(event, ui) {
            var v=$(this).slider('value');
            $(this).find('.ui-slider-handle .sliderControl-label .v-labelCurrent').text(v);
        }
    });    
});​

私は正しいCSSの混乱に陥っています。

4

3 に答える 3

0

ハンドルでその番号のスタイルを設定するだけの場合は、次の.ui-slider-handleようにターゲットを設定するだけです。jsfiddle： 

.ui-slider-handle {
    color: #777777;
    font-size: 10px;
    padding: 3px;
    text-shadow: 0 1px 0 #FFFFFF;
    text-decoration:none;
}
于 2012-10-23T15:33:17.840 に答える
0

わかりました、これを修正しました。助けてくれてありがとう。私の問題は、javascript で値のクラスを宣言していないことでした。

$(this).find('.ui-slider-handle').html('<div class="value-label">'+ui.value+'</div>');

この行を宣言することで、ハンドル内の値をスタイルできます。乾杯

于 2012-10-24T08:56:30.030 に答える