-
05-07-2019 - |
题
我要修改的股票技滑处有一个箭头上而不是在个广场。即我想用一个自定义的图像处理。
有几个教程,这样做:
- 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不拿起,我想要使用 myhandle id处理。我想知道:我需要一个插件。承认 手柄 选项?(它是不是记录在案 http://docs.jquery.com/UI/Slider).或许它只能在一个旧的版本初?
任何想法?
解决方案
CSS类可以改变添加一个图像以延长滑处理被称为".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-ui1.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类。
这种改变只有第一手柄在multihandle滑块。在apiDoc你可以看到:"例如,如果指定的价值观:[1、5日、18],创造一个定制的处理,插件将创造其他两个。"
不隶属于 StackOverflow