일부 차트가 포함될 웹 페이지와 차트의 데이터 범위 및 세분성을 제어하는 일부 RangeSlider 위젯을 조합하려고합니다. 다양한 내비게이션 아이템을 보관할 몇 가지 요소를 만들었고 RangeSliders를 배치 할 시점에 있습니다. 핸들 사이의 음영 처리 된 막대를 클릭하거나 왼쪽 또는 오른쪽으로 핸들을 이동하려면 핸들이 슬라이더 막대의 오른쪽 끝으로 이동하고 거기에 머물러 있다는 점을 제외하고는 모두 작동합니다.Dojo RangeSlider 핸들의 위치가 잘못되었습니다.
나는 내 div의 절대/상대 위치 지정과 슬라이더 구성 요소 사이의 비 호환성으로 인한 것 같지만 작동 시키려고하는 견과류가 될 것입니다. 슬라이더를 div 스타일로 배치하지 않으면 슬라이더가 작동하지만 원하는 부분이 아닙니다.
전체 파일은 아래에 나열되어 있습니다. 내 스타일 정보를 포함하여 약 80 줄에 불과합니다. 간단히하기 위해 외부 .css 파일에서 그리기보다는 div에 첨부했습니다. 이를 시험해 보려면 도장 구성 요소에 대한 경로를 조정해야합니다.
내가 가지고있는 것보다 더 많은 expetise를 가진 사람은 아마도 jiffy에서 범위를 지정할 수 있지만 내 자신의 도장 요구 사항을 조정할 수는없는 것 같습니다.
감사합니다.
<!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>
저는 여전히 비슷한 문제가 있습니다. 당신의 레이아웃이 빈 페이지보다 복잡하다면 그것은 일종의 위치 계산을하고 있고 분명히 틀린 것입니다 ... – DanMan