Dojo Horizo​​ntal Slider显示在标签上

时间:2012-12-03 19:02:19

标签: javascript slider dijit.form

我正在设置带有标签和规则的dijit.form.HorizontalSlider,但我无法让显示器正常工作。滑块显示在规则和标签的顶部。我可以看到标签和规则所放置的div没有高度属性我猜这是我的问题,但我似乎无法解决它。

这是代码......

//create a div for the rule in my inner node div
this.ruleDiv = dojo.create("div", {}, dojo.byId("ruleDiv"), "first");
this.getInnerNode().appendChild(this.ruleDiv);

//create a div for the labels in my inner node div
this.labelsDiv = dojo.create("div", {},dojo.byId("labelsDiv"), "first");
this.getInnerNode().appendChild(this.labelsDiv);

//create the rule object
this.sliderLabelsRule = new HorizontalRule({
    container: "topDecoration",
    count: 10
}, this.getLabelsRuleDiv());

//create the labels object  
this.sliderLabels = new HorizontalRuleLabels({
    container: "topDecoration",
    labelStyle: "font-size: 10px;",
    labels: ["test0", "test1", "test2", "test3", "test4", "test5", 
             "test6", "test7", "test8", "test9"]
}, this.getLabelsDiv());

//create the slider   
this.slider = new Slider({}, this.getInnerNode());

//startup the widgets
this.getSlider().startup();
this.getLabelsRule().startup();
this.getLabels().startup();

我尝试过交换东西并尝试一些不同的方法,但我似乎无法找到合适的组合,任何帮助都表示赞赏!

1 个答案:

答案 0 :(得分:1)

在Horizo​​ntalRule构造函数中,添加样式属性以设置高度。像这样的东西。

this.sliderLabelsRule = new HorizontalRule({
  container: "topDecoration",
  count: 10,
  style: "height: 5px;"
}, this.getLabelsRuleDiv());

我有一个类似的问题,我的所有标签和规则在滑块下面,但也直接堆叠在一起,所以我有十个标签和规则在一个大混乱,我不得不在上面的构造函数中设置宽度与滑块相同的宽度并使用position:absolute将它们移动到正确的位置。要将它们准确地送到您想要的位置,您可能需要做类似的事情。只需在构造函数的style属性中使用css