gpt4 book ai didi

css - dojo RangeSlider 句柄位置错误

转载 作者:太空宇宙 更新时间:2023-11-03 19:04:06 27 4
gpt4 key购买 nike

我正在尝试将包含一些图表的网页放在一起,以及一些 RangeSlider 小部件来控制图表的数据范围和粒度。我已经创建了一些元素来保存各种导航项,现在我想放置我的 RangeSliders。一切正常,除了当我单击 handle 之间的阴影条以向左或向右移动两个 handle 时, handle 跳到 slider 条的右手端,并停留在那里。

我很确定这是由于我的 div 的绝对/相对定位与 slider 组件之间的不兼容造成的,但我正在努力让它工作。如果我只是放置没有任何 div 样式的 slider , slider 可以工作,但不是我想要的位置。

下面列出了整个文件。它只有大约 80 行,包括我的样式信息。为了简单起见,我将它附加到 div,而不是从外部 .css 文件绘制它。要试用它,您需要调整 dojo 组件的路径。

比我更专业的人可能很快就能确定它的范围,但我似乎无法将 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>

最佳答案

如果最小值和最大值之间的差异不能被离散值整除,则会出现奇数偏移。由于你没有设置min max,所以它们默认为0和100。也就是101个值,不能被11整除

关于css - dojo RangeSlider 句柄位置错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11001512/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com