更改滑块手柄图像

Question

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

Answer 1

从jQuery UI docs：

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

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

在这种特殊情况下，你要看看元素与类名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图像文件的一个。确保在标题部分插入jss后的css。