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 回答