我正在使用这个滑块: http ://docs.jquery.com/UI/Slider
我需要更改滑块手柄和滑块的颜色。由于我是 jQuery 新手,所以我不知道该怎么做。有人可以帮忙吗?
我正在使用这个滑块: http ://docs.jquery.com/UI/Slider
我需要更改滑块手柄和滑块的颜色。由于我是 jQuery 新手,所以我不知道该怎么做。有人可以帮忙吗?
实际上,我遇到了同样的问题,这就是我解决它的方法:
我的 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)。
希望这现在可以解决您的问题。
您必须覆盖 css 类来自定义您想要的颜色,或者您必须应用 jquery 中提供的主题。尝试更改页面链接右上角的主题 。它可能对你有用
最简单的解决方案是使用jQueryUI themeroller。只需在那里创建自己的样式,完成后单击“下载主题”。它将让您下载自定义样式的 jQueryUI 库。
或者,您将不得不为特定的 jQueryUI 类覆盖 CSS,但这会变得非常复杂。