Невозможно прикрепить (позиционировать) элемент Div к обработчику ползунка пользовательского интерфейса jQuery - PullRequest
Новая
       36

Невозможно прикрепить (позиционировать) элемент Div к обработчику ползунка пользовательского интерфейса jQuery

0 голосов
/ 24 июня 2018

Можете ли вы взглянуть на этот фрагмент и сообщить, почему я не могу прикрепить .box к обработчику пользовательского интерфейса 

$("#slider").slider({
    min: 100,
    max: 500,
    step: 1,
    value: 200,
    animate: 'slow',
    create: function() {
        $('.box').appendTo($('#slider a').get(0));

    },
    slide: function(event, ui) { $(ui.handle).find('span').html( ui.value); }
});

// only initially needed
$('.box').html($('#slider').slider('values', 0)).position({
    my: 'center top',
    at: 'center bottom',
    of: $('#slider a:eq(0)'),
    offset: "0, 10"
});
body{
  padding:60px;
  }

#slider 
{
    width: 80%;
    margin-left: 1em;
}

#slider a {
    text-decoration: none;
    outline: none;
}

.box {
  position: relative;
  width: 50px;
  background: #FFF;
  border: 1px dashed #666;
    text-align: center;
  width: 100%;
  color: #303030;
  padding: 8px 3px 9px;
  text-align: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding:12px 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

<div id="slider"></div>
<span class="box"></span>

1 Ответ

0 голосов
/ 24 июня 2018

Элемент .box в настоящее время присоединен к <body>.Если вы хотите расположить его, вам нужно только правильно использовать .position().

Пример: 

$(function() {
  $("#slider").slider({
    min: 100,
    max: 500,
    step: 1,
    value: 200,
    animate: 'slow',
    slide: function(event, ui) {
      $(".box").html(ui.value).position({
        my: "center top",
        at: "center bottom+10",
        of: $(".ui-slider-handle", this)
      });
    }
  });

  // only initially needed
  $('.box').html($('#slider').slider('values', 0)).position({
    my: 'center top',
    at: 'center bottom+10',
    of: $("#slider .ui-slider-handle")
  });
});
body {
  padding: 60px;
}

#slider {
  width: 80%;
  margin-left: 1em;
}

#slider a {
  text-decoration: none;
  outline: none;
}

.box {
  position: relative;
  width: 50px;
  background: #FFF;
  border: 1px dashed #666;
  text-align: center;
  width: 100%;
  color: #303030;
  padding: 8px 3px 9px;
  text-align: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 12px 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

<div id="slider"></div>
<span class="box"></span>

Обновление

Если вы хотите, чтобы дескриптор был коробкой, попробуйте это.

HTML 

<div id="slider"></div>

CSS 

.ui-slider span.ui-slider-handle {
  width: 50px;
  background: #FFF;
  border: 1px dashed #666;
  text-align: center;
  color: #303030;
  padding: 8px 3px 9px;
  text-align: center;
  padding: 12px 12px;
}

JavaScript 

$(function() {
  $("#slider").slider({
    min: 100,
    max: 500,
    step: 1,
    value: 200,
    animate: 'slow',
    slide: function(event, ui) {
      $(".ui-slider-handle", this).html(ui.value);
    }
  });
  $("#slider .ui-slider-handle").html($("#slider").slider("value"));
});
...