Question

我想自定义JQueryUI滑块，但无法找到任何方法来更改滑块手柄图像。 JQuery Themeroller似乎也不允许更改句柄图像。有人知道怎么做吗？

Answer 1

jQuery UI Slider插件使用   样式的jQuery UI CSS Framework   外观和感觉，包括颜色和   背景纹理。我们推荐   使用ThemeRoller工具创建   并下载自定义主题   易于构建和维护。

如果有更深层次的定制   需要，有特定于小部件   在...中引用的类   ui.slider.css样式表可以   改性。这些类是高亮的   以粗体显示。

在这种特殊情况下，您希望查看类名为 ui-slider-handle 的元素。

默认滑块手柄元素应用了以下类名：

ui-slider-handle
ui-state-default
UI-角所有

看看与这些类名相对应的CSS，您很可能能够编辑所需的一切。

另外，我建议您安装Firebug。这个Firefox插件可以让你更轻松地完成这些任务。

Answer 2

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

有人在评论部分询问了示例css代码，所以这里是我用来将手柄和滚动条背景图像更改为我自己的自定义png图像文件的那个。确保在标题部分的jquery ui css之后插入css。

更改滑块手柄图像

2 个答案: