Max*_*nya 11 html javascript jquery jquery-ui widget
<script>
(function( $ ) {
$.widget( "my.dropbox", {
errorText: function(text) {
$(this.element).next().html(text);
},
_create: function() {
var id = $(this.element).attr("id");
var customDropbox = $(
"<div class='form-group'>"+
"<label for='"+id+"'>"+getLabelFor(id)+"</label>"+
"<select id='"+id+"'></select>"+
"<div class='errors'></div>"+
"</div>"
);
customDropbox.attr("id", id);
$(this.element).replaceWith(customDropbox); // This removes original element from DOM
populateOptions(id);
},
});
}( jQuery ));
$(document).ready(function(){
$("#field1").dropbox(); //blank input field turns into a select with a label, populated options e.t.c..
$("#button1").on("click", function(){
$("#field1").dropbox("errorText", "This is a validation error message"); //throws an error saying dropbox is not initialized
});
});
</script>
<html>
<body>
<input id="field1" />
<button id="button1">Press me</button>
</body>
</html>
所以我想要一个带有公共方法的小部件,它将用与之关联的所有小部件数据替换原始元素.上面代码的问题是<select..>元素只是一个DOM元素,如果你调用.dropbox(..)它,它会说小部件没有被初始化.有没有办法使用.errorText()方法将select元素放入widget对象中？在线的所有小部件示例都会在原始元素周围添加内容,但永远不会替 至于更大的图景,我正在尝试制作一个动态配置表单的通用工具.这将是所有<input id="...">的HTML,但随后的JavaScript会查询数据库,获取配置的领域,使之成为一个dropbox,checkbox或者说,一个date picker与所有的labels,validation以及其他花俏.
您的窗口小部件代码存在多个问题.我会试着总结一下:
1.复制数据
你没有复制data到新创建的customDropbox,所以之前
this.element.replaceWith(customDropbox);
你应该复制data:
customDropbox.data(this.element.data());
现在,小部件将记住它已初始化.
这个元素消失了
后
this.element.replaceWith(customDropbox);
你应该更新,this.element以便它指向新创建的customDropbox:
this.element = customDropbox;
3. errorText消息采用错误的元素
由于小部件element(this.element)现在指向该<div class='form-group'></div>元素,因此该errorText函数必须稍微修改为:
this.element.find(".errors").html(text);
4. id应该是唯一的
现在,包装器<div>和<select>具有相同ID的ID在HTML中是不允许的,因此删除<select>标签上的那个.幸运的是,<label>可以在没有for属性的情况下工作,只需像这样写:
<label>labelForId <select></select></label>
然后获取<select>-element,this.element.find("select")在小部件中使用.
边注
`this.element` is already a jQuery element, so no need for the additional `$()` wrapping.
看到这个jsFiddle
| 归档时间： |
|
| 查看次数： |
1527 次 |
| 最近记录： |