dojo CheckBox问题解析
发布时间:2020-12-16 21:59:46 所属栏目:百科 来源:网络整理
导读:dojo版本:1.6 在使用dojo的dijit.form.CheckBox组件过程中发现了如下两个问题: 一、是无法方便地指定其label,虽然CheckBox组件有一个label属性, 但是设置了并不能达到想要的效果,label依然不显示,因为根本就没有为checkbox添加label标签。如下: input
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); // 直接使用JS var 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,"selectAll"); }); }); function selectAll(event) { var selectAllCheckBox = dijit.byId("selectAll"); var checked = selectAllCheckBox.get("checked"); var widgets = dijit.findWidgets(document.getElementById("sportsDiv")); dojo.forEach(widgets,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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |