如何在 jQuery Ui 滑块中添加自定义增量和减量计数器

Posted

技术标签:

【中文标题】如何在 jQuery Ui 滑块中添加自定义增量和减量计数器【英文标题】:How to Add Custom Increment and decrements Counter in jQuery Ui Slider 【发布时间】:2018-11-19 23:58:21 【问题描述】:

我正在尝试使用 jQuery Ui 滑块增加元素 (.inner) 的 width。这在某种程度上工作正常我需要将innercenter 始终保持在.wrapper 的中心。所以我想我需要为topleft 添加负值,但我不知道如何实现它们。我必须在那里创建两个自定义计数器还是有更好的方法来实现这一点?

$(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>

【问题讨论】:

请检查答案。我决定我想在几周内达到 2000 :D 【参考方案1】:

由于 div 的宽度和滑块的范围是相同的,所以我使用滑块值来改变内部 div 的左侧和顶部位置。 这当然是可能的,因为它在位置absolute

只应用了滑块值的一半,因为要居中,您应该将更改拆分为左/右和上/下。显然添加 rightbottom 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>

【讨论】:

感谢 Sampgun 越来越完美。我也在尝试了解如何正确减少它 我想通了!我不必更改符号,因为我已经在计算与最后一个值的差异了!!现在可以了! 不。也许我总是不得不改变标志......等一下

以上是关于如何在 jQuery Ui 滑块中添加自定义增量和减量计数器的主要内容,如果未能解决你的问题,请参考以下文章

jQuery 自定义事件 - 当宽度为 xx 时触发事件

Jquery UI Slider 增量和减量

自定义 jQuery UI 滑块高度和宽度

jQuery UI 滑块自定义不起作用 [关闭]

未捕获的类型错误:无法读取 jquery 滑块中未定义的属性“addClass”

如何更改 Jquery UI 滑块句柄