1

いくつかのグラフと、グラフのデータ範囲と粒度を制御するためのRangeSliderウィジェットを含むWebページをまとめようとしています。さまざまなナビゲーションアイテムを保持するためのいくつかの要素を作成し、RangeSlidersを配置したいところにいます。ハンドル間の影付きのバーをクリックして両方のハンドルを左または右に移動すると、ハンドルがスライダーバーの右端にジャンプし、そこにとどまる以外は、すべてが機能しています。

divの絶対/相対位置とスライダーコンポーネントの非互換性が原因であると確信していますが、それを機能させるために努力しています。divスタイルを使用せずにスライダーを配置した場合、スライダーは機能しますが、希望する場所にありません。

ファイル全体を以下に示します。私のスタイリング情報を含めて、たったの約80行です。簡単にするために、外部の.cssファイルから描画するのではなく、divに添付しました。試してみるには、dojoコンポーネントへのパスを調整する必要があります。

私よりも専門性の高い人なら、おそらく一瞬でそれを調べることができますが、道場の要件を自分の要件と一致させることはできないようです。

ありがとう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Errlog Chart for Single Host</title>
    <style type="text/css">
        @import "1.7.src/dojo/resources/dojo.css";
        @import "1.7.src/dijit/themes/tundra/tundra.css";
        @import "1.7.src/dijit/themes/dijit.css";
        @import "1.7.src/dijit/tests/css/dijitTests.css";
        @import "1.7.src/dojox/form/resources/RangeSlider.css";
    </style>

    <script type="text/javascript" src="1.7.src/dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script>
    <script type="text/javascript">
        dojo.require("dojox.form.RangeSlider");
        dojo.require("dijit.form.HorizontalRule");
        dojo.require("dijit.form.HorizontalRuleLabels");
    </script>
</head>
<body class="tundra">
<div id='header' style="width:100%;
    background: #FC8;
    position: absolute;
    height: 30px;
    top: 0;">header</div>
<div id='middle' style="width:100%;
    background: #8FC;
    position: absolute;
    top: 30px;
    bottom: 30px;">
  <div id='left' style="background: #C8F;
    position: absolute;
    left: 0;
    top: 0;
    width: 25%;
    height: 100%;">
  </div>
  <div id='right' style="background: #CF8;
    position: absolute;
    left: 25%;
    top: 0;
    width: 75%;
    height: 100%;">
  <div id='charts' style="background: #DF7;
  position: absolute;
  width: 100%;
  top:0;
  height:60%;">
CHARTS GO HERE
  </div>
  <div id='sliders' style="background: #BF9;
  position: absolute;
  width: 100%;
  bottom:0;
  height:40%;">
SLIDERS GO HERE
    <div 
        id="hrSlider" 
        discreteValues="11"
        onChange="dojo.byId('minValue').value=dojo.number.format(arguments[0][0]/100,{places:1,pattern:'#%'});dojo.byId('maxValue').value=dojo.number.format(arguments[0][1]/100,{places:1,pattern:'#%'});"
        value="20,80" 
        intermediateChanges="true"
        style="width:500px;" 
        dojoType="dojox.form.HorizontalRangeSlider">
        <ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.2em;font-size:75%;color:gray;" count="11" constraints="{pattern:'#.00%'}"></ol>
        <div dojoType="dijit.form.HorizontalRule" container="topDecoration" count=11 style="height:10px;margin-bottom:-5px;"></div>
    </div>
    Horizontal Slider Min Value:<input readonly id="minValue" size="10" value="20.0%"/><br/>
    Horizontal Slider Max Value:<input readonly id="maxValue" size="10" value="80.0%"/><br/>
  </div>
  </div>
</div>
<div id='footer' style="width:100%;
    background: #8CF;
    position: absolute;
    height: 30px;
    bottom: 0;">footer</div>
<script type="text/javascript">
</script>
</body>
</html>
4

1 に答える 1

0

最小値と最大値の差が離散値で割り切れない場合、奇数のオフセットが表示されます。min max を設定しないため、デフォルトで 0 と 100 になります。これは 101 の値であり、11 で割り切れません。

于 2015-10-22T12:44:11.010 に答える