2

HTMLマークアップは次のとおりです。

<button id="Refresh"><img src="refresh.png" /></button>

このボタンを次のコードでjqueryuiボタンとして作成しています。

$("#Refresh").button();

この関数を呼び出すと、次のマークアップが生成されます。

<button id="Refresh" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
    <span class="ui-button-text">
        <img src="refresh.png">
    </span>
</button>

これは正常に機能します。.4em 1em;結果は、 jqueryのCSSで定義されているようにパディングされたボタンです。（.ui-button-text-only .ui-button-text）

このページにはいくつかのボタンがあり、ほとんどのボタンでこのパディングが気に入っています。ただし、特にこの1つのボタンについては、パディングを使用しないようにします。CSSを変更するだけでいいのですが、それでは.ui-button-text-onlyこの .ui-button-textスタイルを使用して他のボタンが台無しになってしまい、そのままの状態で気に入っています。

だから私はこのcssを1つのボタンだけでオーバーライドする方法があるかどうか疑問に思っています。jqueryのボタンドキュメントを調べましたが、ボタンオプションで特定のCSSを渡すことができないようです。

助けてくれてありがとう！

4

2 に答える 2

3

作成後、ボタン内のスパンに新しいクラスを追加するだけです。

$("#Refresh").button();
$("#Refresh").find('span.ui-button-text').addClass('yourClass');
于 2012-06-07T15:47:01.537 に答える
2

CSSを使用して簡単にスタイルを設定できます。オーバーライドされないようにするには、「！important」を追加します

スパンタグを追加します

#Refresh span {
    padding:0 !important;
}
于 2012-06-07T15:44:58.340 に答える