Как изменить дескриптор слайдера пользовательского интерфейса Jquery
-
05-07-2019 - |
Вопрос
Я хочу изменить стандартный слайдер пользовательского интерфейса jQuery таким образом, чтобы на маркере была стрелка, а не квадрат.т. е.Я хочу использовать пользовательское изображение в качестве дескриптора.
Есть несколько руководств, которые делают это:
- http://jqueryfordesigners.com/slider-gallery/
- http://www.ryancoughlin.com/2008/11/04/using-the-jquery-ui-slider/
- http://www.keepthewebweird.com/creating-a-nice-slider-with-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 не улавливал, что я хочу использовать моя ручка идентификатор для дескриптора.Мне интересно:Нужен ли мне плагин для jQuery, чтобы распознавать ручка вариант?(это не задокументировано в http://docs.jquery.com/UI/Slider).Или, возможно, это работало только в старой версии jQuery?
Есть какие-нибудь идеи?
Решение
Класс CSS , который можно изменить для добавления изображения в дескриптор слайдера jQuery , называется ".ui-ползунок-горизонтальный .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">
.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?
Другие советы
.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;
}
Если вам понадобится полностью заменить ручку на что-то другое, а не просто переделывать ее:
$('.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>
Вы также должны установить border:none
к этому классу css.
Это изменяет только первый дескриптор в многоручковом слайдере.В apiDoc вы можете увидеть: "Например, если вы укажете значения:[ 1, 5, 18 ] и создайте один пользовательский дескриптор, плагин создаст два других ".