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

Question

我的问题是，我希望自动完成功能没有圆角，但是所有其他具有圆角的小部件都应该有。
是否有一个参数可以传递来仅禁用自动完成的圆角？ 编辑 让我们看看这个问题能否被回答。

在页面上Datepicker。

我想删除所有圆角类的出现（标题和下一个-上一个按钮）。 $( "#datepicker" ).datepicker('widget').removeClass('ui-corner-all'); 将不起作用。

- Moak

Answer 1

虽然晚了，但是我来回答一下：

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

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

回复编辑部分：

据我所知，您需要将widget()方法与autocomplete()（或datepicker()）方法链接起来才能使其正常工作。看起来对于由$()返回的普通HTML节点它不起作用。

- Piotrek Okoński

---

太好了！+1 感谢你向我介绍：.removeClass('ui-corner-all'); 适用于一些小部件 :) - Alberto Fortes

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");

- Ajit Aranha

---

边框半径：0像素！重要！ - NoWomenNoCry

Answer 3

去掉左下角的圆角

在构造函数中，我这样做了

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

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

        }
    );

- Isaac Jessop

Answer 4

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");
  }
});

日期选择器小部件有点棘手，因为它是建立在半单例模式基础上的。这里我们需要进行猴子补丁来保持一致性，因为没有提供的回调选项适合：

// 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使用主题类的原因 - 这种东西的插入是一个有趣的技巧，但除非样式不可用，否则这是较不干净的选项...

- rsandwick3

Answer 5

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

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

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

p.none-rounded { 边框半径: 0; }

- beactive

---

谢谢，但问题与控制实际的jQuery UI有关，而不是更改CSS样式表。 - Moak