jQuery 更改滑块手柄图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1170596/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing Slider handle image
提问by Kshitij Saxena -KJ-
I wanted to customize the JQueryUI slider but am not able to find any way to change the slider handle images. The JQuery Themeroller also does not seem to allow the change of handle images. Does somebody know how to do this?
我想自定义 JQueryUI 滑块，但找不到任何方法来更改滑块句柄图像。JQuery Themeroller 似乎也不允许更改句柄图像。有人知道怎么做吗？
回答by Aron Rotteveel
From the jQuery UI docs:
来自jQuery UI 文档：
The jQuery UI Slider plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
If a deeper level of customization is needed, there are widget-specific classes referenced within the ui.slider.css stylesheet that can be modified. These classes are highlighed in bold below.
jQuery UI Slider 插件使用 jQuery UI CSS 框架来设置其外观样式，包括颜色和背景纹理。我们建议使用 ThemeRoller 工具来创建和下载易于构建和维护的自定义主题。
如果需要更深层次的自定义，可以修改 ui.slider.css 样式表中引用的特定于小部件的类。这些类在下面以粗体突出显示。
In this particular case, you want to take a look at the element with classname ui-slider-handle.
在这种特殊情况下，您想查看带有 classname 的元素ui-slider-handle。
The default slider handle element has the following classnames applied to it:
默认滑块手柄元素应用了以下类名：
- ui-slider-handle
- ui-state-default
- ui-corner-all
- ui-slider-handle
- ui-state-default
- ui-corner-all
Take a look at the CSS corresponding to these classnames and you will most likely be able to edit everything you need.
查看与这些类名对应的 CSS，您很可能能够编辑您需要的所有内容。
Also, I suggest you install Firebug. This Firefox plugin will make tasks like these a lot easier on you.
另外，我建议你安装Firebug。这个 Firefox 插件将使您更轻松地完成此类任务。
回答by Simon Suh
#demo-frame > div.demo {
padding: 10px !important;
float: left;
}
.contentContainer {
float: left;
width: 400px;
height: 500px;
overflow: hidden;
}
.ui-slider-vertical .ui-state-default {
border: none;
width: 28px;
height: 82px;
background: transparent url(volume_bar/shattle.png) no-repeat 0 0;
}
.ui-slider-vertical .ui-slider-handle {
left: 0;
margin-bottom: -41px;
margin-left: 0;
}
.ui-slider-range, .ui-widget-header, .ui-slider-range-min {
background: none;
}
#slider-vertical, .ui-slider {
border: none;
width: 50px;
height: 50px;
background: transparent url(volume_bar/track-bg.png) repeat-y 0 0;
}
someone asked in the comment section for sample css code so here's the one I used to change the handle and scrollbar background image to my own custom png image files. Make sure to insert the css AFTER the jquery ui css in the header section.
有人在评论部分询问了示例 css 代码，所以这里是我用来将句柄和滚动条背景图像更改为我自己的自定义 png 图像文件的代码。确保在标题部分中的 jquery ui css 之后插入 css。
