user-interface - 实现双端滑动窗口 UI

问题描述

我在滑动窗口 SVG 下面遇到了，它不仅可以更改寡妇的开始和结束范围，还可以滚动选择的范围差异。相同的链接可以在 2中找到。

我们甚至称它为什么，愤怒选择器？还是滑动窗口？我什至无法找到正确的条款来谷歌这个。我们在 Jquery 中有类似的解决方案吗？

大多数范围选择器只允许我们更改开始和结束范围。但不允许我们滚动浏览该差异。

请就如何实现这一点分享指针或资源。

问候

标签： user-interfacejquery-uihtml5-canvasjquery-svg

查看您在#2 链接中所做的事情，他们使用纯 SVG 来绘制所有项目和元素。交互是移动和操纵 SVG 本身。

jQuery UI 中没有开箱即用的功能。您可以自定义 jQuery UI Slider 以提供类似的用户界面。考虑以下。这是一个非常轻量级的示例，作为概念证明。

$(function() {
  var handle = $("#custom-handle");
  $("#slider").slider({
    create: function() {
      var $self = $(this);
      $(".ui-slider-handle", this).css({
        height: ($self.height() - 4) + "px",
        width: "100px",
        background: "transparent",
        top: "1px",
        borderColor: "black",
        margin: 0
      }).resizable({
        classes: {
          "ui-resizable-e": "ui-icon ui-icon-grip-dotted-vertical",
          "ui-resizable-w": "ui-icon ui-icon-grip-dotted-vertical"
        },
        containment: $self,
        handles: "e, w"
      });
    },
    slide: function(event, ui) {

    }
  });
});

#custom-handle .ui-resizable-e,
#custom-handle .ui-resizable-w {
  top: 40px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="slider" style="height: 100px;">
  <svg class="chart" width="100%">
  <polyline
     fill="none"
     stroke="#0074d9"
     stroke-width="2"
     points="
       1,100
       20,60
       40,80
       60,20
       80,30
       100,75
       120,60,
       140,33
       160,37
       180,40
       200,45
       220,20
       240,2
       260,10
       280,75
       300,60
       320,45
       340,30
       360,20
       380,10
       400,19
       420,12
       440,45
       460,50
       480,80"/>
</svg>
  <div id="custom-handle" class="ui-slider-handle"></div>
</div>

在这里，我使滑块变大，并用代表较大项目的 SVG 填充它。这也可以是图像。我正在使用自定义句柄，如以下演示中所建议的那样：https ://jqueryui.com/slider/#custom-handle这只是设置样式并调整主题以适合您的问题。我还调整了手柄的大小。这是有它自己的优点和缺点的水平。

最后要做的是确定如何处理句柄溢出。它将移动到滑块的最后一个位置，并且手柄可能会移出“视口”。您可以添加一些碰撞检测并防止滑块进一步移动。这已在有关 Stack Overflow 主题的其他几个线程中进行了讨论。

您可能还会考虑以下内容： http: //paperjs.org/

user-interface - 实现双端滑动窗口 UI

问题描述

解决方案

推荐阅读