50

ページ全体でjQueryUIボタンを使用していますが、単純な問題と思われる問題を回避する方法が見つかりません。一部のボタンを他のボタンよりも小さくしたいのですが、これはボタンテキストのCSSを次のように設定するのと同じくらい簡単なはずです。font: .8em;ただし、jQuery UIはDOM要素を受け取り、それをラップします。

<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
   <span class="ui-button-text">Button Label</span>
</button>

したがって、<button class="small-button">Small button!</button>jQueryがある場合、テキストは子スパンに配置されます。クラスに指定されたフォントサイズはすべてsmall-button無視されます。

jQueryがボタンを作成する方法をハッキングせずに、これを回避する方法が必要です。何か案は？

4

10 に答える 10

36

直接スタイリングui-button-textする場合font-sizeは、!important を適用して上位レベルでオーバーライドできます。そのような：

.small-button {
   font-size: .8em !important;
}

.ui-button-text編集:継承するCSS スタイルを直接設定してみてください:

.ui-button-text {
   font-size: inherit !important;
}

.small-buttonこれにより、無関係なものに対して !important も作成されます。

于 2010-08-01T03:15:44.637 に答える
14

これは、ボタンの高さを下げるのに役立ちました (Smoothness テーマのデフォルトは line-height 1.4 です):

.ui-button .ui-button-text
{
 line-height: 1.0;
}
于 2011-03-04T16:30:18.703 に答える
6

ボタンのサイズがjQuery UI web サイトと同じになるように、web サイトでフォントサイズを設定するために使用するものを次に示します。これが機能するのは、jQuery UI Web サイトがまさにそれを行う方法だからです!

/* percentage to px scale (very simple)
 80% =  8px
100% = 10px
120% = 12px
140% = 14px
180% = 18px
240% = 24px
260% = 26px
*/

body
{
    font-family: Arial, Helvetica, sans-serif;
    font-size:10px;
}

body 要素のように font-size プロパティを設定することで、他のすべての font-size を 100% = 10px として簡単に設定できます。

パーセンテージを使用する場合はカスケード効果に注意してください。子要素の 100% は、親要素のフォント サイズと等しくなります。

于 2012-07-22T23:55:53.800 に答える
5

Tim が提案するように、jQuery が生成するマークアップ内に含まれる span 要素のパディングを変更することで、さまざまなサイズのボタンを作成できます。

このマークアップ/JavaScript...

$(document).ready(function(){
    $("button").button();
});

<button id="some-id" class="some-class">Some Button</button>

この変換されたマークアップの結果...

<button class="some-class ui-button ui-widget ui-state-default ui-corner-all 
          ui-button-text-only" id="some-id" role="button" aria-disabled="false">
<span class="ui-button-text">some button</span>
</button>

idこれには、最初に提供されたタグとタグが含まれていることが最も確実classです。要素にパディングを追加することで、ボタンのサイズを変更できますspan.ui-button-text。

そのようです..

button#some-id .ui-button-text {
    /* padding values here to your liking */
}
于 2011-03-04T16:47:57.290 に答える
3

ボタンのフォントサイズを変更するだけです;）。

<asp:Button ID="btn2" runat="server" Text="Button" style="font-size:10px" />

jquery スクリプトをボタンに追加します。

   <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $('input:submit, #btn2').button();
        });
    </script>

幸運を。;)

于 2011-03-27T12:10:31.297 に答える
3

上記の2つの提案を組み合わせて使用​​しました。好きなようにUIを微調整するのはとても簡単です。

ページのスタイルシートに次を追加します。

.ui-button .ui-button-text
{
   padding: 0px 11px 0px 21px !important;
   font-size: .72em !important;
}
于 2012-01-09T23:21:36.483 に答える
1

私はこれを行いましたが、正常に動作します。

$( "button" ).button("font-size", "0.8em");
于 2014-09-24T22:17:06.557 に答える
0

My solution needed to work across the new menu items as well

The first to select the matching elements for both menu and button

.menu>.ui-button-icon-only,
.ui-button{
font-size:0.8em !important;
}

And the second as above to force inheiritance

.ui-button-text {
 font-size: inherit !important;
}
于 2013-04-22T21:15:50.147 に答える