Создание и стилизация списка переключателей с помощью dojo

Question

Я заинтересован в создании списка взаимоисключающих опций в хорошем стиле списка с помощью dojo. Однако одна проблема, с которой я столкнулся, заключается в том, какой именно лучший подход для этого был бы. Я создаю RadioButtons через код (не разметку), так как параметры определяются результатом асинхронности.

Некоторые конкретные вопросы:

o Как заставить RadioButtons и их метки иметь блочную структуру, чтобы каждая из них занимала целую строку? o Какой тип контейнера я должен использовать для хранения кнопок RadioButton? o Если имеется больше параметров, чем может отображать контейнер, как мне убедиться, что он прокручивается?

Есть ли какие-либо советы, советы или примеры какого-либо продвинутого дизайна и структурирования пользовательского интерфейса с помощью dojo? Большинство книг и людей на #dojo на freenode говорят, что это все еще неисследованная земля ...

Answer 1

Я создал пример того, что, я думаю, вы хотите на http://telliott.net/dojoExamples/dojo-fancyRadioButtons.html

Здесь у вас есть пользовательский виджет, который расширяет пример виджетов Питера Хиггинса внутри виджетов с http://higginsforpresident.net/2010/01/widgets-within-widgets. Я переименовал базовый виджет "telliott.Widget" для моего кода.

Чтобы создать «РадиоКонтейнер», вы звоните

<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> и добавляет его в качестве элемента в списке.

Было бы довольно тривиально сделать это хранилище данных осведомленным, если это то, что вы хотели.