更改滑块手柄图像

Question

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

Answer 1

来自jQuery UI文档:

jQuery UI Slider插件使用jQuery UI CSS Framework来设计其外观和风格,包括颜色和背景纹理.我们建议使用ThemeRoller工具来创建和下载易于构建和维护的自定义主题.

如果需要更深层次的自定义,则可以修改ui.slider.css样式表中引用的特定于窗口小部件的类.这些类在下面以粗体显示.

在这种特殊情况下,您需要查看带有classname的元素ui-slider-handle.

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

• UI滑块手柄
• UI状态默认
• 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图像文件的那个.确保在标题部分中将jssery ui css插入后插入css.