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;
}

这是我得到的结果： 在此处输入图像描述

最初，我使用的是主题blitzer，正如您在此链接上看到的那样，它没有黄色把手。

编辑：如何更改滑块颜色：如果您查看应用于滑块的类（我在 Chrome 浏览器中使用检查元素），您会看到：

.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 themeroller。只需在那里创建自己的样式，完成后单击“下载主题”。它将让您下载自定义样式的 jQueryUI 库。

或者，您将不得不为特定的 jQueryUI 类覆盖 CSS，但这会变得非常复杂。

于 2012-08-30T08:57:47.507 回答