Как добавить пользовательский счетчик приращений и уменьшений в jQuery Ui Slider - PullRequest
Новая
       50

Как добавить пользовательский счетчик приращений и уменьшений в jQuery Ui Slider

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

Я пытаюсь увеличить width элемента (.inner) с помощью ползунка jQuery Ui.Это как-то нормально работает , но Мне нужно держать center из inner всегда в центре .wrapper.поэтому я думаю, что мне нужно добавить отрицательные значения для top и left, но я не знаю, как их достичь.Нужно ли создавать два пользовательских счетчика или есть лучший способ добиться этого? 

$(function() {
  $("#slider").slider({
    range: "max",
    min: 300,
    max: 1000,
    value: 1,
    slide: function(event, ui) {
      $(".inner").css({
        "width": ui.value,
        "height": ui.value
      });
     }
  });

});
body,
html {
  height: 100%;
  width: 100%
}

.wrapper {
  position: relative;
  height: 300px;
  width: 300px;
  border: 2px solid #999;
  border-radius: 4px;
  overflow:hidden;
}

.inner {
  position: absolute;
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  -webkit-align-items: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="wrapper ">
  <div class="inner"> Center </div>
</div>
<br />
<div id="slider"></div>

1 Ответ

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

Поскольку ширина div и диапазон ползунка были одинаковыми, я использовал значение ползунка, чтобы изменить левую и верхнюю позиции внутреннего div.Это, конечно, было возможно, потому что оно было в положении absolute.

. Применяется только половина значения ползунка, потому что для центрирования вы должны разделить изменение слева / справа и сверху / снизу.Очевидно, что добавление свойства right или bottom css было бы бессмысленным, поскольку его достаточно для правильного позиционирования вашего элемента. 

$(function() {
  var $inner = $(".inner");
  var lastValue = 300;
  $("#slider").slider({
    range: "max",
    min: 300,
    max: 1000,
    value: 300,
    slide: function(event, ui) {
      var curLeft = $inner.position().left;
      var curTop = $inner.position().top;
      var toAdd = (lastValue - ui.value) /2;

      $inner.css({
        "width": ui.value,
        "height": ui.value,
        "top": curTop + toAdd,
        "left": curLeft + toAdd,
      });
      
      lastValue = ui.value;
     }
  });

});
body,
html {
  height: 100%;
  width: 100%
}

.wrapper {
  position: relative;
  height: 300px;
  width: 300px;
  border: 2px solid #999;
  border-radius: 4px;
  overflow:hidden;
}

.inner {
  position: absolute;
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  -webkit-align-items: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eee;
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="wrapper ">
  <div class="inner"> Center </div>
</div>
<br />
<div id="slider"></div>
...