更改滑块手柄图像
我想自定义JQueryUI滑块，但无法找到任何方法来更改滑块手柄图像。 JQuery Themeroller似乎也不允许更改句柄图像。 有人知道怎么做吗？
来自jQuery UI文档 ：
jQuery UI Slider插件使用jQuery UI CSS Framework来设计其外观和风格，包括颜色和背景纹理。 我们建议使用ThemeRoller工具来创建和下载易于构建和维护的自定义主题。
如果需要更深层次的自定义，则可以修改ui.slider.css样式表中引用的特定于窗口小部件的类。 这些类在下面以粗体显示。
在这种特殊情况下，您需要查看具有classname ui-slider-handle的元素。
默认滑块手柄元素应用了以下类名：
- UI滑块手柄
- UI状态默认
- UI的角落，所有
看看与这些类名相对应的CSS，您很可能能够编辑所需的一切。
另外，我建议你安装Firebug 。 这个Firefox插件可以让你更轻松地完成这些任务。
#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。