Autocomplete小部件的
_suggest()
方法调用
menu.refresh()
,因此每次输入更改时都会重置菜单项等的
ui-corner-all
类。但是,在
_suggest()
中的每个
menu.refresh()
调用之后都会调用
open()
回调函数,因此这是一个合适的地方根据需要调整类:
$("#autocomplete").autocomplete("option", {
open: function(event, ui) {
$(this).autocomplete("widget")
.menu("widget").removeClass("ui-corner-all")
.find(".ui-corner-all").removeClass("ui-corner-all");
}
});
日期选择器小部件有点棘手,因为它是建立在半单例模式基础上的。这里我们需要进行猴子补丁来保持一致性,因为没有提供的回调选项适合:
$.datepicker.__updateDatepicker = $.datepicker._updateDatepicker;
$.datepicker._updateDatepicker = function(inst) {
$.datepicker.__updateDatepicker(inst);
inst.dpDiv.removeClass("ui-corner-all")
.find(".ui-corner-all").removeClass("ui-corner-all");
};
请注意,默认的
_updateDatepicker()
实现没有返回值。此外,请注意
_updateDatepicker()
方法不是接口方法,因此不应假定其可用。因此,最一致的解决角落问题的方法是使用适当的CSS,类似于:
.ui-autocomplete.ui-menu.ui-corner-all,
.ui-autocomplete.ui-menu .ui-menu-item > a.ui-corner-all,
.ui-datepicker.ui-corner-all,
.ui-datepicker-header.ui-corner-all,
.ui-datepicker-next.ui-corner-all,
.ui-datepicker-prev.ui-corner-all {
border-radius: 0;
}
更具体一些的选择器(或者使用
!important
指令)可以用来确保这些选择器被遵守。这正是jQuery使用主题类的原因 - 这种东西的插入是一个有趣的技巧,但除非样式不可用,否则这是较不干净的选项...