Question

我有兴趣用dojo创建一个很好的列表样式的互斥选项列表。然而，我遇到的一个问题是，做到这一点的最佳方法是什么。我正在通过代码（而不是标记）创建RadioButton，因为选项是由异步的结果决定的。

一些具体问题：

o如何使RadioButtons及其标签具有类似块的布局，以便每个布局占据整行？ o我应该使用什么类型的容器来容纳RadioButtons？ o如果有多个选项而不是容器可以显示的选项，我该如何确保它可以滚动？

有关dojo的一些高级UI设计和结构的任何建议，提示或示例吗？ freenode上的#dojo上的大多数书籍和人都说它仍然有点未开发......

Answer 1

我在http://telliott.net/dojoExamples/dojo-fancyRadioButtons.html

创建了一个我认为你想要的例子

这里有一个自定义小部件，它在http://higginsforpresident.net/2010/01/widgets-within-widgets的小部件示例中扩展了Peter Higgins的小部件。我为我的代码重命名了基本小部件'telliott.Widget'。

要创建'RadioContainer'，请调用

<script type="text/javascript">
    dojo.require('telliott.RadioContainer');
    dojo.addOnLoad(function() {
        var container1 = new telliott.RadioContainer({
            id: 'Container1',
            name: 'Container1',
            labels: ['one', 'two', 'three', 'The quick brown fox', 'Jumped over the lazy dog', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 'Mauris vitae nunc non risus commodo sodales', 'Maecenas sed nibh et turpis laoreet volutpat at et sapien'],
            selected: 'two',
        }).placeAt(dojo.byId('container'));
    });
</script>

（显然你可以提前通过XHR调用或其他方式创建标签数组）

RadioContainer有一些JS代码：

dojo.provide('telliott.RadioContainer');

dojo.require('telliott.Widget');
dojo.require('dijit.form.RadioButton');

dojo.declare('telliott.RadioContainer', [telliott.Widget], {

    templateString: dojo.cache('telliott', 'templates/RadioContainer.html'),

    name: "", 

    postCreate: function() {
        this.labels = this.labels || []; 
        this.name = this.name || ""; 
        this.selected = this.selected || ""; 

        this.labels.forEach(dojo.hitch(this, function(l) {
            this.createRadio(l);
        }));
    },  

    createRadio: function(/* String */ label) {
        var item = dojo.create('li', null, this.containerNode, 'last');
        var nobr = dojo.create('nobr', null, item);
        var radio = this.adopt(dijit.form.RadioButton, {
            checked: this.selected == label ? true : false,
            value: label,
            name: this.name
        });
        radio.placeAt(nobr);
        this.createLabel(label, radio.get('id'), nobr);

    },  

    createLabel: function(/* String */ label, /* String */ idFor, /* Node */ location) {
        dojo.create('label', { for: idFor, innerHTML: label }, location, 'last');
    }    

});

和模板：

<div class="dijit dijitReset RadioContainer">
    <ul dojoAttachPoint="containerNode" class="dijit dijitReset contents"></ul>
</div>

以及一些CSS：

  .claro .RadioContainer {
      overflow-y: auto;
      height: 100%;
  }

  .claro .RadioContainer .contents {
      padding: 10px;
      list-style: none;
  }

当您创建窗口小部件时，您还应该使用标准CSS指定每个实例的宽度，即：

#Container1 {
    width: 500px;
    background-color: white;
}

在内部，窗口小部件只是创建一个无序列表，将单选按钮和标签包装在<nobr>标记中，并将其添加为列表中的项目。

如果这是您想要的，那么让这个数据存储意识到这将是相当简单的。

创造＆amp;使用dojo设置单选按钮列表

1 个答案: