0

私はこのスライダーを使用しています：http： //docs.jquery.com/UI/Slider

スライダーハンドルとスライダーバーの色を変更する必要があります。私はjQueryを初めて使用するため、その方法を理解できません。誰か助けてもらえますか？

4

3 に答える 3

1

実際、私は同じ問題に遭遇しました、そしてこれは私がそれを解決した方法です：

私のhtmlマークアップはこれでした：

<div id="slider" class="hidden">
    <input type="text" id="sliderAmount" value="30% to 90%" readonly="readonly"/>               
</div>

次のように、jQueryを使用してクラスをハンドルバーに手動で追加しました。

$(document).ready(function(){
    $("#slider a").addClass("myClassForSliderHandle");
});

これは、コードを見ると（chromeの要素を検査する）次のようになります（jQueryUIがハンドルバーをaタグに変えるため）：

<a class="ui-slider-handle ui-state-default ui-corner-all myClassForSliderHandle" href="#"></a>

そして私はこれを私のcssファイルに追加しました：

.myClassForSliderHandle {
    background-color: yellow !important;
    background-image: none !important;
}

そしてこれは私が得た結果です： ここに画像の説明を入力してください

もともと、私はテーマブリッツァーを使用していましたが、このリンクでわかるように、黄色のハンドルバーはありません。

編集：スライダーの色を変更する方法：スライダーに適用されているクラス（Chromeブラウザーでinspect要素を使用）を見ると、次のように表示されます。

.ui-widget-header {
    border: 1px solid #E3A1A1;
    background: #C00 url(images/ui-bg_highlight-soft_15_cc0000_1x100.png) 50% 50%         repeat-x;
    color: white;
    font-weight: bold;
}

ここで、スライダーの色を変更するには、背景画像を削除する必要があります。次のように試してください（試してみましたが、機能します）。

.ui-widget-header {
    border: 1px solid #E3A1A1;
    background: green;
    color: white;
    font-weight: bold;
}

このクラスは、jQuery UI cssファイル（私の場合はjquery-ui-1.8.16.custom.css）にあります。

これで問題が解決することを願っています。

于 2012-08-30T08:53:12.420 に答える
0

必要な色をカスタマイズするには、cssクラスをオーバーライドするか、jqueryで提供されるテーマを適用する必要があります。ページリンクの右隅にあるテーマを変更してみてください 。それはあなたに役立つかもしれません

于 2012-08-30T08:46:21.863 に答える
0

最も簡単な解決策は、jQueryUIテーマローラーを使用することです。そこで独自のスタイルを作成し、完了したら[テーマのダウンロード]をクリックするだけです。カスタムスタイルのjQueryUIライブラリをダウンロードできます。

または、特定のjQueryUIクラスのCSSをオーバーライドする必要がありますが、非常に複雑になる可能性があります。

于 2012-08-30T08:57:47.507 に答える