dojo를 사용하여 라디오 버튼 목록 생성 및 스타일 지정

좋은 목록 스타일의 상호 배타적 인 옵션 목록을 dojo로 만드는 데 관심이 있습니다. 그러나 내가 한 가지 쟁점은 정확히 이렇게하는 것이 가장 좋은 방법 일 것입니다. 비동기의 결과에 따라 옵션이 결정되므로 (태그가 아닌) 코드를 통해 RadioButton을 작성합니다.dojo를 사용하여 라디오 버튼 목록 생성 및 스타일 지정

일부 특정 질문 :

내가 하나 하나가 전체 라인을 차지하도록 블록과 같은 레이아웃을 가지고 라디오 버튼에 자신의 레이블을 일으킬 어떻게 O를? o RadioButton을 보유하려면 어떤 유형의 컨테이너를 사용해야합니까? o 컨테이너가 표시 할 수있는 것보다 더 많은 옵션이있는 경우 어떻게 스크롤 할 수 있는지 확인해야합니까?

고급 UI 디자인 및 도장으로 구성하는 데 필요한 조언, 팁 또는 예제가 있습니까? 는 Freenode에 #dojo에 대부분의 책 사람들은 내가 여기 http://telliott.net/dojoExamples/dojo-fancyRadioButtons.html

당신이 피터를 확장하는 사용자 정의 위젯을에 당신이 원하는 생각의 예를 만들었습니다

출처

2011-02-22 Alexander Trauzzi

... 여전히 다소 미개척 지상의 말 Higgins의 위젯은 위젯 내의 예 (http://higginsforpresident.net/2010/01/widgets-within-widgets)입니다. 나는 기본 위젯의 이름을 'telliott'로 바꿨다.

는

RadioContainer 일부 JS 코드가 (분명히 당신이 XHR 호출 또는 어떤에서 사전에 라벨의 배열을 만들 수 있습니다)

<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'을 만들려면 :

를

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>

012 일부 CSS와 함께 3,516,

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

내부적으로 위젯은 다음과 같습니다 위젯 자체를 만들 때

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

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

, 당신은 다음 또한 지정해야합니다은 즉, 표준 CSS를 사용하여 인스턴스 당 폭의 정렬되지 않은 목록을 만들고, 라디오 버튼과 레이블을 <nobr> 태그로 묶고이를 목록의 항목으로 추가합니다.

원하는 경우이 데이터 저장소에 알리는 것이 매우 쉽습니다.

출처

2011-02-24 11:19:12 mrtom

감사합니다. –

dojo를 사용하여 라디오 버튼 목록 생성 및 스타일 지정

답변

관련 문제