2

TL;DR-webkit-linear-gradientが壊れています-moz-linear-gradient

難問です。2つのハンドルが付いたJquerySliderプラグインを使用しており、背景色としてグラデーションを使用して、外側の範囲に色を付けています。私がやろうとしているのは、スライダーが動いたときにグラデーションのパーセンテージを更新することです。Chrome / Safariでは機能しますが、-mozタグと-webkitタグの両方が使用されているFirefoxでは機能しません。値は最初のスライダーの位置からプルされています。

-moz-linear-gradientタグしかない場合は機能しますが、-webkit-linear-gradientタグを追加すると、Firefoxでは機能しなくなります。

これがコードです

HTML：

<div id="traffic-allocation">
    <h4 id="traffic-allocation-hed">Traffic Allocation <small>Change by dragging handles right or left and applying changes</small></h4>
    <div class="slideContainer">
        <div  id="slider-direct" class="slider"></div>
    </div>
</div>

<div class="labelBox">
     <div class="control-box" id="control-box-direct">
         <input id="control-direct" type="text" value="35%" class="allocation-control" />
         <div class='allocation-control-wrapper'>
             <h4 class="variantLabel mycontrol-label" id="mycontrol-label-direct">Control:  </h4>
         </div>
    </div>
</div>

JavaScript：

$(function() {
$( '.slider' ).slider({
    range: true,
    values: [35, 70],
    min: 0,
    max: 100,
    step: 5,
    slide: function( e, ui ) {

    //Derive calling (class selector) element's ID and set the IDs for its "companion" value displays:
    theSegment = e.target.id.slice(7);
    theControl = '#control-' + theSegment;

        $( theControl ).val( ui.values[ 0 ] + '%' );

        var slidercolor = $('#control-direct').val();
        $('.ui-slider-horizontal').css({
            background: '#0e76bc', /* Old browsers */
            background: 'linear-gradient(to right,  #0e76bc '+slidercolor+',#e78f08 '+slidercolor+')' ,/* W3C */
            background: '-moz-linear-gradient(left,  #0e76bc '+slidercolor+', #e78f08 '+slidercolor+')', /* FF3.6+ */
            background: '-webkit-linear-gradient(left,  #0e76bc '+slidercolor+',#e78f08 '+slidercolor+')' /* Chrome10+,Safari5.1+ */

        })
    }
});

CSS：

h1 {
    font-family: Helvetica, Arial;   
    font-weight: bold;
    font-size: 18px;
}

body, p{
    font-family: Helvetica, Arial;
}

.ui-slider-horizontal{
    background: '#0e76bc', /* Old browsers */
    background: linear-gradient(to right,  #0e76bc 50%,#e78f08 50%); /* W3C *
    background: -moz-linear-gradient(left,  #0e76bc 50%, #e78f08 50%); /* FF3.6+ */
    background: -webkit-linear-gradient(left,  #0e76bc 50%,#e78f08 50%); /* Chrome10+,Safari5.1+ */

}
.ui-widget-header {
    background: none repeat scroll 0 0 #292668;
    border: 1px solid #CCCCCC;
    color: #292668;
    font-weight: bold;
}

これが何が起こっているのかを確認するためのリンクであり、cssが原因でそれがたくさんあります:)。（chrome / safariで開いて何をすべきかを確認し、Firefoxで壊れていることを確認します）

http://jsfiddle.net/DrewLandgrave/bep9A/

前もって感謝します ：）

4

2 に答える 2

1

特定の要素の単一のスタイルプロパティに設定できる値は1つだけです。あなたが持っているのはCSSファイルで行うことですが、それは.css()メソッドが行うことではありません。style影響を受ける各DOM要素で直接オブジェクトのプロパティをいじっています。したがって、「-moz-linear-gradient」を設定すると、「linear-gradient」が消去され、設定すると、単純な色設定が消去されます。

CSSでクラスなどでスタイルを設定し、JavaScriptで設定を選択するときにクラスを設定します。

于 2012-08-30T16:25:33.923 に答える
0

フィドルを変更しました。複数のバックグラウンドプロパティの代わりに、複数のcss呼び出しが必要です。これを試してください：http：//jsfiddle.net/bep9A/1/

于 2012-08-30T17:11:05.717 に答える