使用dojo创建和设计单选按钮列表

Question

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

一些具体问题：

Ø如何使单选按钮及其标签有块状布局，使每一个占据了整条生产线？ o我应该使用什么类型的容器来容纳RadioButtons？ o当容器可以显示更多选项时，如何确保它是可滚动的？

任何建议，提示或例子一些先进的用户界面设计和结构与dojo？大多数书籍和人民freenode上#dojo都这么说，它仍然有点未开发的地...

Answer 1

我创建了什么，我想你想在http://telliott.net/dojoExamples/dojo-fancyRadioButtons.html

这里有延伸彼得自定义部件的例子Higgins的widgets中的小部件示例来自http://higginsforpresident.net/2010/01/widgets-within-widgets。我已经为我的代码重新命名了基本小部件'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> 

的RadioContainer有一些JS代码（很明显，你可以提前从XHR电话或任何创建标签的数组）：

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>标记中，并将其添加为列表中的项目。

如果这是你想要的，让这个数据存储器知道是相当简单的。