dojo CheckBox问题解析

来源：互联网发布：淘宝代销怎么取消关联编辑：程序博客网时间：2024/06/16 16:23

dojo版本：1.6

在使用dojo的dijit.form.CheckBox组件过程中发现了如下两个问题：

一、是无法方便地指定其label，虽然CheckBox组件有一个label属性，

但是设置了并不能达到想要的效果，label依然不显示，因为根本就没有为checkbox添加<label>标签。如下：

<input type="checkbox" dojoType="dijit.form.CheckBox" checked="true" label="足球">

产生的checkbox却无标签

我的解决办法是扩展CheckBox组件，创建CheckBox组件后自动添加<label>标签，代码如下：

dojo.provide("my.widget.CheckBox");dojo.require("dijit.form.CheckBox");dojo.declare("my.widget.CheckBox",dijit.form.CheckBox, {startup : function() {this.inherited(arguments);// 使用jQuery//var html = '<label for="' +this.id+ '" style="display:inline;float: none;padding-right:0;">' +this.labelText+ '</label>';//$(this.domNode).after(html);// 直接使用JSvar label = document.createElement("label");label.setAttribute("for", this.id);label.innerText = this.labelText;// 覆盖dojo默认label样式label.style.display = "inline";label.style.float = "none";label.style.paddingRight = "0";this.insertAfter(label, this.domNode);},insertAfter : function (newElement, targetElement) {   var parent = targetElement.parentNode;   if (parent.lastChild == targetElement ) {        // 如果最后的节点是目标元素，则直接添加。因为默认是最后        parent.appendChild(newElement );   } else {        //如果不是，则插入在目标元素的下一个兄弟节点的前面。也就是目标元素的后面        parent.insertBefore( newElement, targetElement.nextSibling );   }},labelText : ""});

二、在做全选功能时，发现CheckBox事件循环传递，导致达不到预期效果，解决办法如下：

<script type="text/javascript">dojo.require("my.widget.CheckBox");dojo.addOnLoad(function(){var selectAllCheckBox = dijit.byId("selectAll");// 为全选CheckBox注册onClick事件，当然onChange也可以var handle = dojo.connect(selectAllCheckBox, "onClick", window, "selectAll");var widgets = dijit.findWidgets(document.getElementById("sportsDiv"));dojo.forEach(widgets, function(checkbox, index){dojo.connect(checkbox, "onChange", function(checked){console.log(checkbox.get("id") + ":" + checked);if(!checked) {dojo.disconnect(handle);// 设置checked属性时，会触发全选CheckBox的onClick事件，所以在此之前须先断开// 否则事件会循环触发selectAllCheckBox.set("checked", false);} else {var hasUnchecked = false;for(var i=0; i<widgets.length; i++) {console.log(widgets[i].get("checked"));if(!widgets[i].get("checked")) {hasUnchecked = true;}}if(!hasUnchecked) {// 设置checked属性时，会触发全选CheckBox的onClick事件，所以在此之前须先断开// 否则事件会循环触发dojo.disconnect(handle);selectAllCheckBox.set("checked", true);}}});// 最后，为全选CheckBox重新注册onClick事件监听handle = dojo.connect(selectAllCheckBox, "onClick", window, "selectAll");});});function selectAll(event) {var selectAllCheckBox = dijit.byId("selectAll");var checked = selectAllCheckBox.get("checked");var widgets = dijit.findWidgets(document.getElementById("sportsDiv"));dojo.forEach(widgets, function(checkbox, index){checkbox.set("checked", checked);});}</script></head><body class="claro"><form action="" id="reg_form"><div class="grouping"><div><input type="checkbox" dojoType="my.widget.CheckBox" name="select-all" id="selectAll" labelText="全选"></div><div id="sportsDiv"><div><input type="checkbox" dojoType="my.widget.CheckBox" name="sports" value="football" id="football" labelText="足球"><input type="checkbox" dojoType="my.widget.CheckBox" name="sports" value="basketball" id="basketball" labelText="篮球"></div></div></div></form></body>

0 0