在Windows Store应用程序中自定义WinJS范围控件(滑块)上方的工具提示/div

Question

在js/html中使用WinJS控件'range'(这是一个滑块)用于Windows Store应用程序，是否有一种方法可以创建一个自定义div，当用户拖动它时，它会跟随tick，就像控件的默认工具提示一样，但这将从头开始创建?

范围控件似乎是一种"简单"的标准HTML5控件，因为你只需使用:

<input type="range" />

. .标记来使用它，而不是带有"data-win-control"属性的标记。SomeSpecificControl"价值。虽然一个'范围'控制的解释似乎是依赖于浏览器引擎渲染它，我不知道在哪里我可能"绑定"一个绝对定位的div或…

非常感谢你的帮助

Answer 1

我认为您需要做的是根据range元素的宽度计算百分比并将offset元素添加到它。然后需要将其转换回像素，以用于工具提示的绝对定位。我在这里放了一个例子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 or WinJS Page ready event)

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>