Question

我正在制作一个按钮组，这是正常的按钮，photo

因此，在应用了一些UI样式后，我会设置按钮样式，但请检查下一个image ...左侧会出现一个奇怪的按钮点。（如果我点击它，按钮组会激活按钮＃3）

我不得不说这个奇怪的小按钮只能使用Chrome浏览器，如果我使用IE浏览它，那就100％了。

按钮组的代码非常简单，

// JS

$(document).ready(function () {
        $("#radio").buttonset();
    });

// HTML

<div id="radio" align="center">
    <input type="radio" id="radio1" runat="server" value="BtnNextCaseClick" name="radio" checked="true"/><label for="radio1" style="width: 109px; margin-right:-.9em">Siguiente Caso</label>
    <input type="radio" id="radio2" runat="server" value="CloseCaseAndBandeja" name="radio" /><label for="radio2" style="margin-right:-.9em">Terminar Caso y Cerrar Bandeja</label>
    <input type="radio" id="radio3" runat="server" value="CloseBandeja" name="radio"/><label for="radio3" style="width: 109px">Cerrar Bandeja</label>
</div>

有关如何删除该样式错误的任何想法吗？

Answer 1

试试这个

#radio .ui-helper-hidden-accessible { display: none; }

解释

我在我的项目中观察到buttonset（）工作原理的一部分是它在底层无线电输入上设置'ui-helper-hidden-accessible'类，然后它应该导致隐藏无线电输入根据jQuery UI CSS样式表中为'ui-helper-hidden-accessible'定义的样式。

然而，IMO，正如你的Chrome案例以及我的IE案例所证明的那样，在我看来，'ui-helper-hidden-accessible'的jQuery UI CSS样式不足以隐藏无线电输入在所有情况下。所以我的答案是将这个简短的jQuery UI hack添加到项目的样式表中并完成它。毕竟，我们确实希望隐藏真正的无线电输入，因为我们需要按钮;毕竟，我们确实希望收音机输入仍然存在，因为这就是一切都在幕后工作的方式 - 按钮组只是前端的一层。

hack样式的目标是按钮集容器（在你的情况下是#radio），然后它定位到ui-helper-hidden-accessible类，以便将hack的应用限制在我们知道必要的地方并且正常工作 - 即因此它不会破坏您网站的其他部分，其他jQuery UI组件等。

请注意，您没有提及您的jQuery UI版本，因此我无法100％确定您的案例。我在jQuery UI 1.8.17上开发了这个hack，它将ui-helper-hidden-accessible定义为

.ui-helper-hidden-accessible 
{ 
    position: absolute !important;  
    clip: rect(1px 1px 1px 1px); 
    clip: rect(1px,1px,1px,1px); 
}

jQueryUI buttonset样式问题

1 个答案:

试试这个

解释