如何更改JQuery UI滑塊手柄

我想修改庫存JQuery UI滑塊，以便手柄上有一個箭頭而不是一個正方形。即我想使用自定義圖像作爲句柄。如何更改JQuery UI滑塊手柄

有跡象表明，做一些教程：

但我無法得到它的工作。下面的代碼會導致固定手柄圖像：

<!DOCTYPE html> 
<html> 
<head> 
    <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> 
    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script> 
    <style type="text/css"> 
    #myhandle {position: absolute;z-index: 100;height: 25px;width: 35px;top: auto;background: url(http://stackoverflow.com/content/img/so/vote-arrow-down.png) no-repeat;} 
    </style> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
    $("#slider").slider({handle: '#myhandle'}); 
    }); 
    </script> 
</head> 
<body> 
<div id="slider"><div id="myhandle"></div></div> 
</body> 
</html>

這是因爲如果JQuery的不撿，我想用myhandle ID爲把手。我想知道：我需要一個JQuery插件來識別處理選項嗎？（在http://docs.jquery.com/UI/Slider中未記錄）。或者，它可能只適用於舊版本的JQuery？

任何想法？

來源

2009-07-30 Tom

這已被回答之前：http://stackoverflow.com/questions/1170596/changing-slider-handle-image – karim79 2009-07-30 15:24:19

問題中的所有三個教程鏈接現在已經死了。 :( – 2015-07-23 13:51:01

可以更改以將圖像添加到JQuery滑塊句柄的CSS類稱爲「.ui-slider-horizontal .ui-slider-handle」。

下面的代碼顯示了一個演示：

<!DOCTYPE html> 
<html> 
<head> 
    <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> 
    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script> 
    <style type="text/css"> 
    .ui-slider-horizontal .ui-state-default {background: white url(http://stackoverflow.com/content/img/so/vote-arrow-down.png) no-repeat scroll 50% 50%;} 
    </style> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
    $("#slider").slider(); 
    }); 
    </script> 
</head> 
<body> 
<div id="slider"></div> 
</body> 
</html>

我想註冊一個手柄選項是這樣做的舊的方式和jQuery的UI 1.7.2不再支持？

來源

2009-07-30 16:05:12 Tom

哇..我也面臨同樣的問題，並從您的解決方案得到解決..謝謝你的朋友 – 2010-04-27 05:12:53

我複製和粘貼在DW確切的代碼，並嘗試它。我用我自己的替換圖像。圖像顯示在所有我已經嘗試了每個解決方案列出有關此主題，沒有任何工作，以改變圖像。我會在我自己的主題下發布自己的代碼，如果有這樣的工作解決方案，希望有人可以列出SO上的URL。 – Chris22 2012-05-25 15:58:49

到PNG的鏈接已損壞。 – 2013-06-03 23:58:19

你也應該設置border:none到那個CSS類。

來源

2010-06-08 02:36:28

.ui-slider .ui-slider-handle{ 
    width:50px; 
    height:50px; 
    background:url(../images/slider_grabber.png) no-repeat; overflow: hidden; 
    position:absolute; 
    top: -10px; 
    border-style:none; 
}

來源

2010-08-04 02:07:40

如果您需要到別處完全取代的東西手柄，而不僅僅是再造型吧：

You can specify custom handle elements by creating and appending the elements and adding the ui-slider-handle class before initialization.

Working Example

$('.slider').append('<div class="my-handle ui-slider-handle"><svg height="18" width="14"><path d="M13,9 5,1 A 10,10 0, 0, 0, 5,17z"/></svg></div>'); 
 

 
$('.slider').slider({ 
 
    range: "min", 
 
    value: 10 
 
});

.slider .ui-state-default { 
 
    background: none; 
 
} 
 
.slider.ui-slider .ui-slider-handle { 
 
    width: 14px; 
 
    height: 18px; 
 
    margin-left: -5px; 
 
    top: -4px; 
 
    border: none; 
 
    background: none; 
 
} 
 
.slider { 
 
    height: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script> 
 
<link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" /> 
 
<div class="slider"></div>

來源

2014-02-11 18:31:15 apaul

這應該是完整性和工作示例的答案。爲什麼用你的風格預先存在的元素可以簡單地注入自己的元素？ – 2016-09-08 20:22:17

此更改只能在多手柄滑塊中處理。在apiDoc中，您可以看到：「例如，如果您指定了值：[1,5,18]並創建一個自定義句柄，則該插件將創建另外兩個。」

來源

2016-02-09 08:30:31 anatoli

請在解決問題的原因和方式上添加一些關於您的解決方案的意見 – 2016-02-09 18:08:45

如何更改JQuery UI滑塊手柄

回答

相關問題