Question

我正在尝试创建一个带有规则和标签的水平滑块小部件。

滑块显示但被压扁，规则和标签似乎与实际滑块分开。

有什么建议我做错了吗？

感谢。

HTML：

<body class="claro">
  <div id="slider"></div>
  <p><input type="text" id="sliderValue" data-dojo-type="dijit/form/TextBox" /></p> 
  <script>
    require(["dojo/dom", "./widget/SliderWidget", "dojo/domReady!"],
        function(dom, SliderWidget){
      var sliderContainerContainer = dom.byId("slider");
      var widget = new SliderWidget().placeAt(sliderContainerContainer);
    });
  </script>
</body>

使用Javascript：

define(["dojo/dom-construct","dojo/_base/declare","dijit/_WidgetBase",
  "dojo/dom","dojo/parser","dijit/form/HorizontalSlider","dijit/form/HorizontalRule", 
  "dijit/form/HorizontalRuleLabels","dijit/form/TextBox"], function(domConstruct, declare, _WidgetBase, dom, parser, HorizontalSlider,HorizontalRule,HorizontalRuleLabels, TextBox){

  return declare([_WidgetBase], {

    postCreate: function() {
      this._getSlider();
      this._getHorizonalRule();
      this._getHorizonalRuleLabels();
    },

    _getSlider: function() {
      var slider = new HorizontalSlider({
        name: "slider",
        value: 0,
        minimum: 0,
        maximum: 10240,
        discreteValues:10241,
        intermediateChanges: true,
        style: "height:5px;width:330px;",
        onChange: function(value){
          dom.byId("sliderValue").value = value;
        }
      }, "slider").startup;
    },

    _getHorizonalRule: function() {
        var sliderNode =  dom.byId("slider");
        var rulesNode = domConstruct.create("div", null, sliderNode, "first");
        new dijit.form.HorizontalRule({ 
          container: "bottomDecoration",
          count: 11, 
          style: "width:330px;height:1em;font-size:75%;color:gray;" 
        }, rulesNode).startup;
    },

    _getHorizonalRuleLabels: function() {
      var sliderNode =  dom.byId("slider");
      var valuesNode = domConstruct.create("div", null, sliderNode, "first"); 
      new dijit.form.HorizontalRuleLabels({ 
        container: "topDecoration", 
        count: 10, 
        labels: [0,1024,2048,4096,5120,6144,7168,8192,9216,10240], 
        style: "height:2em;font-size:60%;color:gray;"
      }, valuesNode).startup;
    },
  });
});

Answer 1

在添加规则和规则标签后，您需要使用滑块调用startup()。此外，最好使用：

slider.addChild(horizontalRule)

和

slider.addChild(horizontalRuleLabels)

Dojo：HorizontalSlider：规则和标签

1 个答案:

Dojo：Horizo​​ntalSlider：规则和标签

1 个答案:

Dojo：HorizontalSlider：规则和标签