如何覆盖Dojo的CheckedMultiSelect Widget显示UI

问题描述

与其在CheckedMultiSelect小部件的侧面显示下拉按钮，不如将其显示为“ 0个项目被选择”，我该如何改写下拉显示，使其成为一个仅显示“状态”的按钮，当单击该按钮时将显示下方的下拉菜单？

我正在研究这个JSFiddle http://jsfiddle.net/qf6o4gna/21/

HTML

<div id="form">
    <div class="pad" style="top:0px">Programmatic:
        <select id="stateSelect">
            <option value="CA">California</option>
            <option value="CO">Colorado</option>
            <option value="AK">Alaska</option>
            <option value="AR">Arkansas</option>
            <option value="DE">Delaware</option>
        </select>
    </div>
</div>

JS

require([
    "dojo/dom-construct","dojo/json","dijit/form/Form","dojox/form/CheckedMultiSelect","dojo/parser","dojo/domReady!"],function (construct,JSON,Form,CheckedMultiSelect) {
    var form,div = construct.create('div',{
        'class': 'pad',style: 'bottom:0px'
    },'form');
    getValues = function () {
        div.innerHTML = JSON.stringify(form.get('value'));
    };
    new CheckedMultiSelect({
        dropDown: true,labelText: 'States',multiple: true,name: 'state',onChange: getValues,required: false
    },"stateSelect");
    form = new Form({
        style: 'display:block'
    },'form');
    form.startup();
});

CSS

.dojoxCheckedMultiSelectMenuCheckBoxItemIcon {
  display:block
}

.dojoxCheckedMultiSelectCheckBoxInput {
  opacity: 1;
  border-color: red;
  background-color: red;
}

div.pad {
  position:absolute
}

#form {
  display: none
}

谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）