更改滑块手柄图像

从 jQuery UI docs :

jQuery UI滑块插件使用 jquery ui css框架 外观和感觉,包括颜色和 背景纹理。我们推荐 使用主题滚轮工具创建 下载自定义主题 易于建造和维护。

如果更深层次的定制是 需要,有特定的小部件 在中引用的类 ui.slider.css样式表 被改进的。这些课程很受欢迎 下面用粗体。

在这个特定的例子中,您需要查看具有classname的元素 ui-slider-handle .

默认的slider handle元素应用了以下类名:

• 用户界面滑动手柄
• 用户界面状态默认值
• UI角落全部

看看这些类名对应的CSS,你很可能就能编辑你所需要的一切。

另外,我建议您安装 Firebug . 这个火狐插件会让这样的任务对你来说更加容易。

#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。