26.02.2016, 18:18
|
|
Интересующийся
|
|
Регистрация: 26.02.2016
Сообщений: 10
|
|
|
одновременное прокручивание нескольки[ слайдеров ui
Добрый день, всем!
такая проблема есть у меня слайдеры
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slider demo</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css"/>
<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'>
<style>
#slider0, #slider1 { margin: 10px; width: 300px; }
</style>
</head>
<body>
<div id="slider0"></div>
<div id="slider1"></div>
<script>
var sliders = $( "#slider0, #slider1" );
sliders.slider(
{
orientation: "vertical",
slide: function( event, ui ) {
var i = sliders.index(this);
i ^= 1;
$("#slider"+i+ " .ui-slider-handle").css("left", (ui.value)+"%");
}
}
);
</script>
</body>
</html>
как мне сделать чтобы заставить их работать вертикально?
orientation: "vertical", не то тут не помагает. Признаюсь этот код
var i = sliders.index(this);
i ^= 1;
$("#slider"+i+ " .ui-slider-handle").css("left", (ui.value)+"%"); нашел здесь на форуме...
заранее спасибо
|
|
26.02.2016, 19:35
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
Tyoma5891,
наверно height: 300px; а не
|
Сообщение от Tyoma5891
|
|
width: 300px; }
|
и убрать
|
Сообщение от Tyoma5891
|
|
нашел здесь на форуме...
|
или обьяснить зачем вам оно надо
|
|
26.02.2016, 20:14
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
slider jquery-ui vertical обратнозависимые
Tyoma5891,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slider demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<style type="text/css">
body{
background-color:#EEE8AA;
}
#slider0,#slider1{
margin:10px;
width:8px;
height:300px;
float:left;
background-image:-webkit-gradient(linear,left,right,color-stop(0,#FFD700),color-stop(1,#FF4500));
background-image:-o-linear-gradient(left,#FFD700,#FF4500);
background-image:-moz-linear-gradient(left,#FFD700,#FF4500);
background-image:-webkit-linear-gradient(left,#FFD700,#FF4500);
background-image:linear-gradient(to right,#FFD700,#FF4500);
}
.ui-slider-handle{
border-radius:50%;
position:relative;
font-size:10px;
display:block;
}
.ui-slider-vertical .ui-slider-handle{
padding-top:8px;
left:-.6em;
background-color:transparent;
border:4px solid #D2691E;
background-image:none;
margin-bottom: -1.2em;
}
:focus{
outline:0;
border:0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">
</script>
</head>
<body>
<div id="slider0"></div>
<div id="slider1"></div>
<script>
var sliders = $("#slider0, #slider1");
sliders.slider({
orientation: "vertical",
value: 50,
slide: function(event, ui) {
var i = sliders.index(this);
i ^= 1;
$("#slider" + i).slider("option", "value", 100 - ui.value)
}
});
</script>
</body>
</html>
Последний раз редактировалось рони, 27.02.2016 в 00:23.
|
|
26.02.2016, 20:21
|
|
Интересующийся
|
|
Регистрация: 26.02.2016
Сообщений: 10
|
|
|
ой извините отправил и не заметил Ваш ответ...
Последний раз редактировалось Tyoma5891, 26.02.2016 в 20:24.
|
|
26.02.2016, 23:55
|
|
Интересующийся
|
|
Регистрация: 26.02.2016
Сообщений: 10
|
|
|
Спасибо Вам огромное, Вы очень помогли все работает теперь как надо
зы карму плюсанул
|
|
01.03.2016, 17:02
|
|
Интересующийся
|
|
Регистрация: 26.02.2016
Сообщений: 10
|
|
|
добавление тултип
Добрый день, всем!
извините а не подскажите как мне к моим этим слайдерам двум привязать тултип по типу как тут http://jsfiddle.net/j08691/bEze7/1/
чтобы отображалось у обоих слайдеров, что-то у меня не выходит никак, заранее благодарен...
var slidersw = $( "#sliderw0, #sliderw1" );
var initialValue = 870;
var tooltip = $('<div id="tooltip" />').css({
position: 'absolute',
top: -25,
left: -10
});
slidersw.slider({
range: "min",
min: 470,
max: 1920,
value: initialValue,
create: function( event, ui ) {
tooltip.text(initialValue);
},
slide: function( event, ui ) {
tooltip.text(ui.value);
var i = slidersw.index(this);
i ^= 1;
$("#sliderw" + i).slider("option", "value", ui.value)
$( "#door_w" ).val( ui.value );
$.post('action.php', { sliderw: ui.value }, result_sliderw );
}
}).find(".ui-slider-handle").append(tooltip);
в таком виде оно меняет тултип тока во втором слайдере а первый не меняет...
Последний раз редактировалось Tyoma5891, 01.03.2016 в 17:36.
|
|
01.03.2016, 18:34
|
|
Интересующийся
|
|
Регистрация: 26.02.2016
Сообщений: 10
|
|
есть у кого-то какие-то мысли?
уточню, мой вопрос относился как продолжение к примеру рони, этому:
<!DOCTYPE html>
02
<html lang="en">
03
<head>
04
<meta charset="utf-8">
05
<title>slider demo</title>
06
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
07
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
08
<style type="text/css">
09
body{
10
background-color:#EEE8AA;
11
}
12
13
#slider0,#slider1{
14
margin:10px;
15
width:8px;
16
height:300px;
17
float:left;
18
background-image:-webkit-gradient(linear,left,right,color-stop(0,#FFD700),color-stop(1,#FF4500));
19
background-image:-o-linear-gradient(left,#FFD700,#FF4500);
20
background-image:-moz-linear-gradient(left,#FFD700,#FF4500);
21
background-image:-webkit-linear-gradient(left,#FFD700,#FF4500);
22
background-image:linear-gradient(to right,#FFD700,#FF4500);
23
}
24
25
.ui-slider-handle{
26
border-radius:50%;
27
position:relative;
28
font-size:10px;
29
display:block;
30
}
31
32
.ui-slider-vertical .ui-slider-handle{
33
padding-top:8px;
34
left:-.6em;
35
background-color:transparent;
36
border:4px solid #D2691E;
37
background-image:none;
38
margin-bottom: -1.2em;
39
}
40
41
:focus{
42
outline:0;
43
border:0;
44
}
45
</style>
46
47
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">
48
</script>
49
</head>
50
<body>
51
<div id="slider0"></div>
52
<div id="slider1"></div>
53
<script>
54
var sliders = $("#slider0, #slider1");
55
sliders.slider({
56
orientation: "vertical",
57
value: 50,
58
slide: function(event, ui) {
59
var i = sliders.index(this);
60
i ^= 1;
61
$("#slider" + i).slider("option", "value", 100 - ui.value)
62
}
63
});
64
</script>
65
</body>
66
</html>
Последний раз редактировалось Tyoma5891, 01.03.2016 в 18:53.
|
|
01.03.2016, 19:04
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
slider jquery-ui вслед за бегунком
Tyoma5891,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slider demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<style type="text/css">
body{
background-color:#EEE8AA;
position: relative;
}
#slider0,#slider1{
margin:10px;
width:8px;
height:300px;
float:left;
background-image:-webkit-gradient(linear,left,right,color-stop(0,#FFD700),color-stop(1,#FF4500));
background-image:-o-linear-gradient(left,#FFD700,#FF4500);
background-image:-moz-linear-gradient(left,#FFD700,#FF4500);
background-image:-webkit-linear-gradient(left,#FFD700,#FF4500);
background-image:linear-gradient(to right,#FFD700,#FF4500);
}
#slider0{
margin-left: 50px;
}
.ui-slider-handle{
border-radius:50%;
position:relative;
font-size:10px;
display:block;
}
.ui-slider-vertical .ui-slider-handle{
padding-top:8px;
left:-.6em;
background-color:transparent;
border:4px solid #D2691E;
background-image:none;
margin-bottom: -1.2em;
}
:focus{
outline:0;
border:0;
}
.show0, .show1{
text-align: right;
position: absolute;
width: 30px;
bottom: 50%;
left: -40px;
}
.show1 {
left : 12px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">
</script>
</head>
<body>
<div id="slider0"><div class="show0">50</div></div>
<div id="slider1"><div class="show1">50</div></div>
<script>
var sliders = $("#slider0, #slider1"), fn = function(event, ui) {
var i = sliders.index(this);
var bottom = $(ui.handle).css("bottom");
$(".show"+ i).html(ui.value).css({bottom : bottom });
i ^= 1;
$("#slider" + i).slider("option", "value", 100 - ui.value);
};
sliders.slider({
orientation: "vertical",
value: 50,
change: fn,
slide: fn
});
</script>
</body>
</html>
|
|
02.03.2016, 14:36
|
|
Интересующийся
|
|
Регистрация: 26.02.2016
Сообщений: 10
|
|
|
Спасибо большое, как всегда выручили, да по слайдерам еще надо учится)
|
|
|
|
