1

UI 用に作成しているボタンは、アイコンといくつかのテキストで構成されているため、次のようになります。

  [ <icon> Some Text ]

次のような HTML を使用して、jQuery を使用してボタンを作成しています。

<button class="myButton" type="button"/>

JavaScript は次のようになります。

$('.myButton').button({
                    label: "Some Text",
                    icons: {
                        primary: "icon-custom",
                    }
                })
                .css({ width: '85px' });

設計チームは、それがどのように見えるべきかについての要件を指定しているので、アイコンとテキストの間に 5 ピクセルのギャップがある 85 ピクセル幅のボタン (私はそのビットを管理しました) が必要です。次に、アイコンとテキストのペアをボタン。

これは可能ですか？私はそれを理解することができませんでした。

デフォルトでは、ボタンのアイコンを左揃えにし、残りのテキストを中央に配置するようですが、これは見栄えがよくありません。

4

2 に答える 2

2

はい、アイコンを中央に配置するのは少し難しいです。設定すれば可能ですtext: falseが、ボタンのアイコンのみが表示され、ボタンのテキストは表示されません。

しかし、それを取得するためにいくつかのCSSトリックを行うことができます:

.ui-button-icon-primary 
{
   left:5.5em !important;    // default it is 0.5, so it's always on left position...
}​

left要件に基づいて値を変更します。

jsfiddle

于 2012-12-12T10:43:13.743 に答える
1

あまりエレガントではありませんが、要件を処理する必要があります。

$('.myButton').button({
    label: '<span class="ui-button-icon-primary ui-icon icon-custom"></span>text',
}).css({
    width: 85
}).find('.ui-icon').css({
    display:'inline-block',
    position:'relative',
    top:4, //top varies depending on button height / font-size, adapt as needed
    marginRight:5
});

フィドル

このようにして、アイコンは中央揃えのテキスト スパンの一部になります。垂直方向の位置合わせを補正するだけです。

于 2012-12-12T10:28:54.997 に答える