如何使用 jquery-ui-1.9.2.custom 仅在按钮的左侧添加边框角半径？答案

【问题标题】：How to add border-corner-radius only on left side of the button with jquery-ui-1.9.2.custom?如何使用 jquery-ui-1.9.2.custom 仅在按钮的左侧添加边框角半径？
【发布时间】：2013-11-30 21:11:42
【问题描述】：

我的 HTML 中有这段代码：

<div id="ot-lang-src">
<button id="rerun"></button>
<button id="select">Choose a language</button>
<ul id="ui-menu-left">                                                      
</ul>
</div>

我使用已下载的 jquery-ui-1.9.2.custom。问题在于边界半径。我正在尝试仅在按钮的左侧添加边框半径。右侧边框保持 0px。

Jquery-ui-1.9.2.custom.js 为页面加载按钮添加了 .ui-corner-all 类，这意味着所有四个角的边框都是 2px。我试图删除 .ui-corner-all 类并添加 .ui-corner-left 类：

$("button#rerun").removeClass("ui-corner-all").addClass("ui-corner-left");

它不起作用。我在 jquery-ui-1.9.2.custom.css 中有这段代码：

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 2px; -webkit-border-top-left-radius: 2px; -khtml-border-top-left-radius：2px；边框左上角半径：2px； } .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; -khtml-border-top-right-radius: 2px;边框右上角半径：2px； } .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 2px; -webkit-border-bottom-left-radius: 2px; -khtml-border-bottom-left-radius：2px；边框左下角半径：2px； } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 2px; -webkit-border-bottom-right-radius: 2px; -khtml-border-bottom-right-radius: 2px;边框右下角半径：2px； }

这是解决这个问题的正确方法吗？如何删除 .ui-corner-all 类？这是解决这个问题的更好方法吗？

谢谢！

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

将圆角半径增加到例如 8px，您可能会注意到它有效。 Fiddle test here

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    -moz-border-radius-top-left: 8px;
    -webkit-border-top-left-radius: 8px;
    -khtml-border-top-left-radius: 8px;
    border-top-left-radius: 8px;
}

【讨论】：

这对我不起作用。 Button 已经有 .ui-corner-all 类，所以有 4 个圆角。我不会在按钮的右侧边框为 0px。例如，左侧为 2px。问题是我无法删除 .ui-corner-all 类，实际上我现在不知道。您的建议有效，但这只是因为您之前没有提到过课程。还是谢谢
代码示例中的按钮没有任何类。如果您将 .ui-corner-all 添加到按钮，您可能会看到它起作用，否则，您没有发布所有必需的信息来解决您的问题。
马里奥我正在使用 jquery-ui-1.9.2.custom。这意味着我已经下载了 jquey-ui 的自定义版本。我已经有 custom.js 文件，正如我所说的 custom.js 文件自动将 .ui-coner-all 添加到按钮。并使用以下代码： $("button#rerun").removeClass("ui-corner-all").addClass("ui-corner-left");我无法删除该课程。这就是问题所在。
可能该代码在任何其他代码添加类之前运行。检查您的脚本流程，看看您是否没有尝试删除尚未创建的类。我的意思是，在尝试 removeClass() 之前检查是否真的调用了 addClass()。要进行故障排除，请将删除类放在页面的最底部（并在文档准备好时），以检查它是否确实删除了该类。

【解决方案2】：

我建议将您自己的类添加到按钮中，并确保在 JQuery UI CSS 定义之后加载定义该类的 CSS。

【讨论】：

【解决方案3】：

您需要设置border-radius属性与此规则相同：

border-radius: top-left top-right bottom-right bottom-left;

例如：

border-radius: 0px 10px 20px 30px;
-ms-border-radius: 0px 10px 20px 30px;  /* For make it compatible with IE 8 */

如果您将 jQuery 引用添加到您的页面，您可以执行与我在此处 Changing border radius customizable 所做的完全相同的操作

【讨论】：