Jquery 设置剑道组合的宽度而不使用其Id
我在durandal项目工作,想知道: 如何定义剑道ui组合框的宽度 我在link上看到了这个问题,但是那里的答案对我来说并不好,因为我不想使用组合Id (为什么没有简单的方法作为组合属性来实现,就像您可以简单地定义其高度一样?) 以下是我的html代码:Jquery 设置剑道组合的宽度而不使用其Id,jquery,html,kendo-ui,durandal-2.0,kendo-dropdown,Jquery,Html,Kendo Ui,Durandal 2.0,Kendo Dropdown,我在durandal项目工作,想知道: 如何定义剑道ui组合框的宽度 我在link上看到了这个问题,但是那里的答案对我来说并不好,因为我不想使用组合Id (为什么没有简单的方法作为组合属性来实现,就像您可以简单地定义其高度一样?) 以下是我的html代码: <input id="myCombo" data-bind=" value:'444', kendoDropDownList: { dataSource: data, dataVal
<input id="myCombo" data-bind=" value:'444',
kendoDropDownList: { dataSource: data,
dataValueField:itemValue,
dataTextField: itemText,
value:selectedId,
}" />
我想没有
width
选项,因为小部件默认为输入的宽度,所以对于典型用例,不需要单独指定宽度。如果您想为下拉容器的宽度提供一个单独的选项,只需创建自己的小部件,读取listWidth
选项:
(function ($) {
var ui = kendo.ui,
DropDownList = ui.DropDownList;
var CustomDropDownList = DropDownList.extend({
init: function (element, options) {
DropDownList.fn.init.call(this, element, options);
if (options.listWidth) {
this.list.width(options.listWidth);
}
},
options: {
name: 'CustomDropDownList'
}
});
ui.plugin(CustomDropDownList);
})(jQuery);
然后您可以这样使用:
$("#c2").kendoCustomDropDownList({
dataTextField: "text",
dataValueField: "value",
listWidth: 400,
dataSource: [{
text: "Item1",
value: "1"
}, {
text: "Item2",
value: "2"
}]
});
<input data-role='customdropdownlist' data-list-width="150"/>
如果要以声明方式声明listWidth
,可以使用类似以下的init方法:
init: function (element, options) {
options.listWidth |= $(element).attr('data-list-width');
DropDownList.fn.init.call(this, element, options);
if (options.listWidth) {
this.list.width(options.listWidth);
}
}
然后像这样使用:
$("#c2").kendoCustomDropDownList({
dataTextField: "text",
dataValueField: "value",
listWidth: 400,
dataSource: [{
text: "Item1",
value: "1"
}, {
text: "Item2",
value: "2"
}]
});
<input data-role='customdropdownlist' data-list-width="150"/>
演示