Форум

cript · #11 (**permalink**) 20.03.2014, 00:53

Возник еще один вопрос. Добавляю в код $( "#rangevalue" ).html( ui.value );
в <output id="rangevalue"></output> все работает, но нужно сделать так чтобы выводилась не числовая последовательность, а опции этих radio (<input type="radio" value="Опция_1">), есть идеи на счет этого?

danik.js · #12 (**permalink**) 20.03.2014, 01:11

Сообщение от рони

$(this).prop({checked : indx == ui.value})

Не проще ли rd.eq(ui.value).prop('checked', true) ?

рони · #13 (**permalink**) 20.03.2014, 01:21

Сообщение от danik.js

Не проще ли rd.eq(ui.value).prop('checked', true) ?

name небыло указано а без одинакового name это несработает

рони · #14 (**permalink**) 20.03.2014, 01:27

cript,

$( "#rangevalue" ).html(rd.eq(ui.value).val());

cript · #15 (**permalink**) 20.03.2014, 01:41

рони,
Снова выручил, огромное спасибо!

Сообщение от рони

Сообщение от danik.js
Не проще ли rd.eq(ui.value).prop('checked', true) ?
name небыло указано а без одинакового name это несработает

А так если name указан то чем этот способ лучше?

рони · #16 (**permalink**) 20.03.2014, 02:08

Сообщение от cript

чем этот способ лучше?

ненужен перебор инпутов - 9 пост, строки 34 -36

cript · #17 (**permalink**) 21.03.2014, 20:49

Появился новый вопрос по этой теме.
Ставлю событие onclick на радио кнопку,
При клике мышкой событие срабатывает, а при наведении ползунком нет..

рони · #18 (**permalink**) 21.03.2014, 20:57

cript,
код покажите

cript · #19 (**permalink**) 21.03.2014, 21:03

Сообщение от рони

код покажите

Радио кнопка:

<input type="radio" class="radio" name="button" value="<?=$value;?>" onclick="action('2500')">

Слайдер:

<div id="slider-vertical" style="height:200px;"></div>
<script>
var rd = $('.output input:radio');
$("#slider-vertical").slider({
animate: true,
orientation: "vertical",
range: "min",
min: 0,
max: 5,
value: 0,
slide: function(event, ui) {
$("#rangevalue").html(rd.eq(ui.value).val());

rd.each(function(indx, element){  // первый вариант
$(this).prop({checked : indx == ui.value})
});
rd.eq(ui.value).prop('checked', true) // второй вариант

}
});
$("#rangevalue").val( $("#slider-vertical").slider("value"));
</script>
<label for="rangevalue">Value:</label>
<div id="rangevalue" style="border:0; color:#f6931f; font-weight:bold;"></div>

onclick пробовал заменять на onchange onselect onsubmit..

рони · #20 (**permalink**) 21.03.2014, 21:22

cript, всё работает

<!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.3/themes/mint-choc/jquery-ui.css">
  <style>
  div {
      margin-top: 20px;
  }

  .slider {width : 500px; }
   	</style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script>
$(function ()
{
   var rd = $('.output input:radio');
$("#slider-vertical").slider({
animate: true,
orientation: "vertical",
range: "min",
min: 0,
max: 5,
value: 0,
slide: function(event, ui) {
$("#rangevalue").html(rd.eq(ui.value).val());

rd.eq(ui.value).prop('checked', true) // второй вариант

}
});
$("#rangevalue").html( $("#slider-vertical").slider("value"));
})
function action(str)
{
   alert(str);
}
</script>
</head>

<body>
<div class="output">
<input type="radio" class="radio" name="button" value="1" onclick="action('2500')" checked="checked">
 <input type="radio" class="radio" name="button" value="2" onclick="action('2500')">
 <input type="radio" class="radio" name="button" value="3" onclick="action('2500')">
 <input type="radio" class="radio" name="button" value="4" onclick="action('2500')">
 <input type="radio" class="radio" name="button" value="5" onclick="action('2500')">
 <input type="radio" class="radio" name="button" value="6" onclick="action('2500')">
 </div>

<label for="rangevalue">Value:</label>
<div id="rangevalue" style="border:0; color:#f6931f; font-weight:bold;"></div>
<div id="slider-vertical" style="height:200px;"></div>


</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript