0

在 js/html 中为 Windows 应用商店应用程序使用 WinJS 控件“范围”（这是一个滑块），有没有一种方法可以创建一个自定义 div，它会在用户拖动它时跟随刻度，就像默认的工具提示控件，但哪个会从头开始创建？

范围控件似乎是一种“简单”的标准 HTML5 控件，因为您只需使用：

<input type="range" />

..tag 来使用它，而不是带有一些“WinJS.UI.SomeSpecificControl”值的“data-win-control”属性的标签。虽然“范围”控件的解释似乎依赖于渲染它的浏览器引擎，但我不知道我可以在哪里“绑定”一个绝对定位的 div 左右......

非常感谢你的帮助。

4

1 回答 1

1

我认为您需要做的是根据范围元素的宽度计算百分比并将偏移元素添加到其中。然后需要将 ack 转换为像素以用于工具提示的绝对定位。我在这里整理了一个例子http://jsfiddle.net/CYSeY/4/

下面的代码

CSS：

#range {
    margin-left: 100px;
}

#tip {
    position: absolute;
    display: none;
    border: 1px solid black;
    padding: 4px;
}

HTML：

<input type="range" id="range" min="0" max="20" value="0" />
<div id='tip'>Some tip</div>

JavaScript：（onload 或 WinJS 页面就绪事件）

var r = document.getElementById('range');
var max = r.getAttribute('max');
var min = r.getAttribute('min');
var w = r.clientWidth;
//w += r.offsetLeft;
var isDragging = false;

var moveTip = (function (e) {
    if (isDragging) {
        var posPerc = (r.value / max) * 100;
        var pixPos = (posPerc / 100) * w;
        pixPos += r.offsetLeft;

        document.getElementById('tip').style.display = 'block';
        document.getElementById('tip').style.left = pixPos + 'px';
    }
});

r.onmousedown = (function (e) {
    isDragging = true;
    r.addEventListener('mousemove', moveTip, false);
});
r.onmouseup = (function (e) {
    isDragging = false;
    r.removeEventListener('mousemove', moveTip);
    document.getElementById('tip').style.display = 'none';
});

上面的代码可以稍微整理一下，但这是一个很好的起点。'

演示：

var r = document.getElementById('range');
var max = r.getAttribute('max');
var min = r.getAttribute('min');
var w = r.clientWidth;
//w += r.offsetLeft;
var isDragging = false;

var moveTip = (function(e) {
  if (isDragging) {
    var posPerc = (r.value / max) * 100;
    var pixPos = (posPerc / 100) * w;
    pixPos += r.offsetLeft;

    document.getElementById('tip').style.display = 'block';
    document.getElementById('tip').style.left = pixPos + 'px';
  }
});

r.onmousedown = (function(e) {
  isDragging = true;
  r.addEventListener('mousemove', moveTip, false);
});
r.onmouseup = (function(e) {
  isDragging = false;
  r.removeEventListener('mousemove', moveTip);
  document.getElementById('tip').style.display = 'none';
});
    #range {

      margin-left: 100px;

    }

    #tip {

      position: absolute;

      display: none;

      border: 1px solid black;

      padding: 4px;

    }
<input type="range" id="range" min="0" max="20" value="0" />
<div id='tip'>Some tip</div>

于 2013-03-27T15:47:41.697 回答