更改滑塊手柄圖像

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。