Показать сообщение отдельно
  #4 (permalink)  
Старый 04.11.2013, 00:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

slider jquery ui
Сообщение от tai
перетаскиваем бегунок и блок с ценой также перетаскивается за этой ценой
Вариант
<!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/south-street/jquery-ui.css">
  <style>
  #slider { margin: 10px; }
  #show{
       position: relative;
       width: 30px;
       top: 5px;

    }
  	</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>

</head>

<body>
<div id="show">0</div>
<div id="slider"></div>
<script>

$( "#slider" ).slider(
   {change: function( event, ui ) {
   var left = $(ui.handle).css("left");
   $("#show").html(ui.value).css({left : left} )  },
   slide: function( event, ui ) {
   var left = $(ui.handle).css("left");
   $("#show").html(ui.value).css({left : left} )  }

   }
);
</script>
</body>
</html>

Последний раз редактировалось рони, 04.11.2013 в 00:55.
Ответить с цитированием