0

私はボタンセットに取り組んでいます。これは通常のものです、写真

それで、いくつかのUIスタイルを適用した後、ボタンのスタイルを設定しましたが、次の画像を確認してください...左側に奇妙なボタンドットが表示されます。(クリックすると、ボタンセットがボタン #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>

そのスタイルエラーを取り除く方法について何か考えはありますか?

4

1 に答える 1

1

これを試して

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

説明

私は自分のプロジェクトで、buttonset() がどのように機能するかの 1 つの部分は、基礎となるラジオ入力に 'ui-helper-hidden-accessible' クラスを設定することであることに気付きました。これにより、スタイルごとにラジオ入力が非表示になるはずです。 jQuery UI CSS スタイルシートの「ui-helper-hidden-accessible」に定義されています。

ただし、IMO は、Chrome の場合と IE の場合で証明されているように、「ui-helper-hidden-accessible」の jQuery UI CSS スタイルは、すべての場合にラジオ入力を非表示にするのに十分ではないように思えます。 . したがって、私の答えは、この短い jQuery UI ハックをプロジェクトのスタイルシートに追加することです。代わりにボタンが必要なため、結局のところ、実際のラジオ入力を非表示にする必要があります。結局のところ、無線入力はまだそこにある必要があります。これは、すべてが舞台裏で機能し続ける方法だからです。ボタンセットはフロントエンドの単なるレイヤーです。

ハック スタイルは、ハックの適用を、ハックが必要で機能することがわかっている場所に限定するために、ui-helper-hidden-accessible クラスをターゲットにする前に、ボタンセット コンテナー (この場合は #radio) をターゲットにします。そのため、サイトの他の部分や他の jQuery UI コンポーネントなどを壊すことはありません。

jQuery UI のバージョンについて言及していないことに注意してください。jQuery UI 1.8.17 でこのハックを開発しました。これは、ui-helper-hidden-accessible を次のように定義しています。

.ui-helper-hidden-accessible 
{ 
    position: absolute !important;  
    clip: rect(1px 1px 1px 1px); 
    clip: rect(1px,1px,1px,1px); 
}
于 2012-11-07T19:44:36.043 に答える