30.08.2016, 17:08
|
Интересующийся
|
|
Регистрация: 30.08.2016
Сообщений: 11
|
|
Получить значение и вывести его в html, в html создаю инпуты <input id="amountcv", <input id="amountcs", <input id="amountcd", и так понимаю что используя slide: function( event, ui ) {$( "#ТУТ мои amountы" ).html( ui.value );} можно получить значения от бегунков на слайдере, потом их еще надо будет использовать для математических операций
|
|
30.08.2016, 17:32
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
Алмат,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.slider{
width: 300px;
margin: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/south-street/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
var arr = [];
function foo()
{
$(".res").text(arr)// тут все значения, делайте что хотите
};
$(".opt").each(function(i, el) {
arr[i] = 50;
var am = $(".amount", el),
sl = $(".slider", el);
sl.slider({
min: 0,
max: 100,
step: 1,
slide: function(event, ui) {
am.val(ui.value);
arr[i] = +ui.value;
foo()
},
change: function(event, ui) {
am.val(ui.value)
}
});
sl.slider("option", "value", 50)
});
foo()
});
</script>
</head>
<body>
<div class="opt">
<div class="slider"></div>
<input type="text" class="amount" readonly>
</div>
<div class="opt">
<div class="slider"></div>
<input type="text" class="amount" readonly>
</div>
<div class="opt">
<div class="slider"></div>
<input type="text" class="amount" readonly>
</div>
<div class="opt">
<div class="slider"></div>
<input type="text" class="amount" readonly>
</div>
<div class="res"></div>
</body>
</html>
|
|
30.08.2016, 18:18
|
Интересующийся
|
|
Регистрация: 30.08.2016
Сообщений: 11
|
|
рони,ого, вы прям весь код написали. Спасибо, здорово, только как новичку не очень понятно( Я понимаю, что время ценно, но вдруг если найдется немного лишнего времени, очень поможете, если добавите подробные комментарии или поделитесь полезными ссылочками, где это есть. Хотелось бы понимать, а в учебнике такого нет и нагуглить не могу. беда прям
|
|
30.08.2016, 18:44
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
|
|
30.08.2016, 18:55
|
Интересующийся
|
|
Регистрация: 30.08.2016
Сообщений: 11
|
|
я видел да, смотрел уже. но вспомните, вы ведь когда-то тоже были новичком)) я смотрю и вижу кое где код, а где-то просто набор непонятных символов. Мне интересно разобраться, что именно последовательно делает этот код. Мне не очень ясна здесь работа с массивом, и что именно делает $(".opt").
|
|
30.08.2016, 18:56
|
Интересующийся
|
|
Регистрация: 30.08.2016
Сообщений: 11
|
|
уж простите дурака, что занимаю время
|
|
30.08.2016, 18:58
|
Интересующийся
|
|
Регистрация: 30.08.2016
Сообщений: 11
|
|
и что такое sliders[i] = 50
|
|
30.08.2016, 19:06
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
Сообщение от Алмат
|
$(".opt").
|
все блоки с данным классом
Сообщение от Алмат
|
и что такое sliders[i] = 50
|
незнаю
|
|
30.08.2016, 19:10
|
Интересующийся
|
|
Регистрация: 30.08.2016
Сообщений: 11
|
|
о как)))) спасибо, буду разбираться
|
|
30.08.2016, 19:51
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
Сообщение от Алмат
|
sliders[i] = 50
|
где вы это взяли?
|
|
|
|