我需要将此x-editable plugin与bootstrap3 version一起使用。
您可以在x-editable bootstrap3演示中看到,我们可以添加包含多个字段的自定义输入。但在示例中,每个输入都没有“清除按钮”(如type =“text”)。
我创建了自己的custum输入(带有2个输入文本);我尝试将这些按钮添加到我的输入中,但它们不能正常工作。只识别一个输入;我知道为什么,但我不知道如何使它好。
我姓名的一部分(例如)
$.extend(Name.prototype, {
/**
Renders input from tpl
@method render()
**/
render: function() {
this.$input = this.$tpl.find('input');
this.renderClear();
},
//render clear button
renderClear: function() {
if (this.options.clear) {
console.debug('clearBtn');
this.$clear = $('<span class="editable-clear-x"></span>');
this.$input.after(this.$clear)
.css('padding-right', 24)
.keyup($.proxy(function(e) {
//arrows, enter, tab, etc
if(~$.inArray(e.keyCode, [40,38,9,13,27])) {
return;
}
clearTimeout(this.t);
var that = this;
this.t = setTimeout(function() {
that.toggleClear(e);
}, 100);
}, this))
.parent().css('position', 'relative');
this.$clear.click($.proxy(this.clear, this));
}
},
//show / hide clear button
toggleClear: function(e) {
if(!this.$clear) {
return;
}
var len = this.$input.val().length,
visible = this.$clear.is(':visible');
if(len && !visible) {
this.$clear.show();
}
if(!len && visible) {
this.$clear.hide();
}
},
clear: function() {
console.debug('clearClick');
this.$clear.hide();
this.$input.val('').focus();
},// .. other code here ..
});
我可能需要在.after()之前使用.each(),但我不知道该怎么做。
我在插件的主要js中的Text类中找到了这个renderClear(和其他)方法。
感谢您的帮助。