web-dev-qa-db-ja.com

jQuery UIボタンのサイズを変更しますか？

ページ全体でjQuery UIボタンを使用していますが、単純な問題と思われるものを回避する方法を見つけていません。一部のボタンを他のボタンよりも小さくしたいのですが、これはボタンテキストの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がボタンを作成する方法をハックせずに、これを回避する方法が必要です。何か案は？

javascriptjqueryjquery-uijquery-ui-button
49
chum of chance

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も無関係になります。

36
rickp

これは、私にとってボタンの高さを減らすのに役立ちました（Smoothnessテーマのデフォルトはline-heightの1.4です）：

.ui-button .ui-button-text
{
 line-height: 1.0;
}
14
Tim

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

/* 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％は親要素のfont-sizeと等しくなります。

6
Dean

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 */
}
5
Derek Adair

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

<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>

がんばろう。 ;）

3
xxx

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

ページのスタイルシートに追加：

.ui-button .ui-button-text
{
   padding: 0px 11px 0px 21px !important;
   font-size: .72em !important;
}
3
TrophyGeek

私のソリューションは、新しいメニュー項目でも機能する必要がありました

メニューとボタンの両方に一致する要素を最初に選択する

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

そして、上記のように2番目は、不従順を強制します

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

私はこれをしましたが、うまくいきます。

$( "button" ).button("font-size", "0.8em");
1
KungFuMonkey

<input type="submit" value="Mostrar imágenes">

そして私のCSS：

input[type="submit"] {
color: #000;
border: 0 none;
cursor: pointer;
height: 30px;
width: 150px; }
0
Marinha do Nascimento

CSSを変更せずに、実行時にjQueryを使用します。これにより、柔軟性が大幅に向上します。

$(function() {
  $("input[type=button]").css("font-size", "0.8em");
});
0
Dmitri K