0

js / htmlのWindowsストアアプリでWinJSコントロールの「範囲」（スライダー）を使用すると、ユーザーがチェックマークをドラッグしている間、チェックマークに続くカスタムdivを作成する方法があります。これは、のデフォルトのツールチップのようです。コントロールですが、どちらを最初から作成しますか？

範囲コントロールは、次のコマンドを使用するだけで、一種の「単純な」標準HTML5コントロールのように見えます。

<input type="range" />

..それを使用するタグ。「WinJS.UI.SomeSpecificControl」値を持つ「data-win-control」属性を持つタグではありません。'range'コントロールの解釈は、それをレンダリングするブラウザエンジンに依存しているようですが、絶対位置のdivなどをどこに「バインド」できるかわかりません...

どうもありがとうございました。

4

1 に答える 1

1

範囲要素の幅に基づいてパーセンテージを計算し、それにオフセット要素を追加する必要があると思います。次に、ツールチップの絶対位置を決めるために、これをピクセルに変換する必要があります。ここに例をまとめました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 に答える