將單元添加到dojo中的numberspinner

Question

我使用編程器在dojo中以編程方式創建表容器。 有沒有辦法將單位（秒，米等）添加到微調器？ 或者如果這是不可能的，我怎麼能添加第二行只有標籤呢？所以我可以在那裏定義單位。

Answer 1

考慮創建一個自定義小部件，它將容納你的「標籤」值，這裏是一個例子。

注：

您可以從標籤更改HTML模板templateString到div的，如果你的喜歡。 下面我使用的是ContentPage()，但是你可以爲你設計一個佈局組件。

require(['dijit/form/NumberSpinner', 'dijit/layout/ContentPane', 'dijit/_WidgetBase', 'dijit/_TemplatedMixin', 'dojo/_base/declare', 'dojo/domReady!'], function(NumberSpinner, ContentPane, _WidgetBase, _TemplatedMixin, declare, domReady) { 
 
    var data = { 
 
     meters: '1' 
 
    }, 
 
    layout = new ContentPane(), 
 
    LabelTextbox = declare([_WidgetBase, _TemplatedMixin], { 
 
     label: '', 
 
     textboxId: '', 
 
     name: '', 
 
     value: '', 
 
     
 
     templateString: '<div><label>${label}</label><div data-dojo-attach-point="textboxNode"></div></div>', 
 
     
 
     postCreate: function() { 
 
      this.inherited(arguments); 
 
     
 
      this.own(new NumberSpinner({ 
 
       id: this.textboxId, 
 
       name: this.meters, 
 
       value: this.value 
 
      }, this.textboxNode)); 
 
     } 
 
    }); 
 

 
    Object.keys(data).forEach(function (prop, index) { 
 
     layout.addChild(new LabelTextbox({ 
 
      textboxId: prop + '-'+ index, 
 
      name: prop, 
 
      value: data[prop], 
 
      label: 'meters: ' 
 
     })); 
 
    }.bind(this)); 
 

 
    
 
    layout.placeAt('layout'); 
 
    layout.startup(); 
 

 
});

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" media="screen"> 
 
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script> 
 
<div id="layout"></div>