Вопрос по добавлению условий в slider jquery-ui
$( ".slider" ).slider({
animate: true,
range: "min",
value: 1000,
min: 100,
max: 10000,
step: 10,
//Получаем значение и выводим его на странице
slide: function( event, ui ) {
$( "#slider-result" ).html( ui.value );
$( "#slider-result" ).val($("#tema").val(ui.value));
},
//Обновляем скрытое поле формы, так что можно передать данные с помощью формы
change: function(event, ui) {
$('#hidden').attr('value', ui.value);
}
});
как например div#interval1 сделать видимым при условии что ползунок в значение от 1000 до 5000 а div#interval2 сделать видимым при значении от 5000 до 10000 а div##interval3 сделать видимым только при значение от 0 до 1000. то есть пока ползунок ползает должен быть открыт только тот или иной div |
ufaclub,
:-?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slider demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/start/jquery-ui.css">
<style>.slider { margin: 10px; } </style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div class="rang" id="interval1">1</div>
<div class="rang" id="interval2">2</div>
<div class="rang" id="interval3">3</div>
<input id="slider-result" name="">
<div class="slider"></div>
<script>
var rang = [[1000,5000,1],[5000,10000,2],[0,1000,3]];
function toggle(value)
{
$.each(rang,function(indx, el){
var show = value >= el[0] && value < el[1] ? "show" : "hide"
$("#interval"+el[2])[show]()});
}
$( ".slider" ).slider({
animate: true,
range: "min",
value: 1000,
min: 100,
max: 10000,
step: 10,
//Получаем значение и выводим его на странице
slide: function( event, ui ) {
$( "#slider-result" ).val( ui.value );
// $( "#slider-result" ).val($("#tema").val(ui.value));
toggle(+ui.value)
},
//Обновляем скрытое поле формы, так что можно передать данные с помощью формы
change: function(event, ui) {
$('#hidden').val( ui.value );
$( "#slider-result" ).val( ui.value );
toggle(+ui.value)
}
});
$( ".slider" ).slider("option","value", 1000)
</script>
</body>
</html>
|
спасибо!
|
| Часовой пояс GMT +3, время: 07:52. |