Question

我的特殊问题是我希望自动完成功能不具有圆角，但是所有其他具有圆角的小部件应该是。
我可以传递一个参数来禁用自动完成的角点吗？

修改

让我们看看是否可以回答这个问题。

在页面 Datepicker 。

我想删除所有圆角类（标题和下一个上一个按钮）。

$( "#datepicker" ).datepicker('widget').removeClass('ui-corner-all');不起作用。

Answer 1

很晚但是在这里：

jQuery UI小部件有一个方法，它返回小部件本身的HTML节点。所以答案是：

$('#someinput').autocomplete(...).autocomplete('widget').removeClass('ui-corner-all');

回应编辑：

据我所见，您需要使用widget()（或autocomplete()）方法链接datepicker()方法才能生效。似乎它不适用于$()返回的常规HTML节点。

Answer 2

将此css类分配给具有窗口小部件角落的元素。

.ui-corner-flat {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

$("#elementwithcorners").addClass("ui-corner-flat");

Answer 3

删除左下半径

在构造函数中我做了这个

    $( "#signup" ).dialog(
        {
            create: function (event, ui) {

                $(".ui-dialog").css('border-bottom-left-radius','0px');
            },

        }
    );

Answer 4

自动填充小部件的_suggest()方法调用menu.refresh()，因此每次输入更改时，都会重置菜单项等的ui-corner-all类。但是，在open()内的每次menu.refresh()调用后都会调用_suggest()回调，因此根据需要调整类是一个明智的地方：

$("#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小部件有点难度，因为它构建为半单一的。在这里，我们需要一个猴子补丁来一致地执行它，因为没有提供的回调选项是合适的：

// store the built-in update method on the "global" instance...
$.datepicker.__updateDatepicker = $.datepicker._updateDatepicker;
// ...and then clobber with our fix
$.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使用主题类的原因 - 捏造这些东西是一个有趣的黑客，但它是不太干净的选项，除非样式不可用...

Answer 5

为您不想要圆角的元素创建一个新的CSS类。

p.rounded { border-radius: 10px; }

p.none-rounded { border-radius: 0; }

如何从一个jQuery UI小部件中删除圆角而不是其他小部件？

5 个答案: