30

jQueryUIのボタンを互いに別々に配置するにはどうすればよいですか。ボタンは同じ方向に配置されます。1つのボタンを左に、もう1つのボタンを右に配置したいと思います。出来ますか？

4

13 に答える 13

30

OK、Firebugでこれを見て...

Dialogコントロールは、というクラスでdivを作成するui-dialog-buttonpaneので、それを検索できます。

複数のボタンを扱っている場合は、おそらく属性が必要:firstになり:lastます。

だから、$(".ui-dialog-buttonpane button:first)あなたに最初のボタンを取得する必要があります。最後のボタンが表示され$(".ui-dialog-buttonpane button:last)ます。

そこから、css / styleを変更して、各ボタンを左右に配置できます（float値を変更します）。

とにかく、それは私が今それにアプローチする方法です。

于 2009-06-07T00:20:27.397 に答える
18

これが私が結果を達成することができた方法です。

 $('#dialog-UserDetail').dialog({
            autoOpen: false,
            height: 318,
            width: 531,
            modal: true,
            resize: false,
            buttons: {
                DelUser:{ 
                    class: 'leftButton',
                    text: 'Delete User',
                    click : function (){
                        alert('delete here');
                    }
                },
                "Update User": function () {
                       alert('update here');
           },
                Close: function () {
                    $(this).dialog("close");
                }
            }
        });

次に、スタイルに！importantフラグを追加します。これは、クラスが最初に来て、jqueryによって上書きされるために必要です。

<style>
    .leftButton
    {
        margin-right: 170px !important;
    }
</style>
于 2012-10-27T19:15:30.860 に答える
13

私は次の解決策に行き着きました（TheCookの回答に基づく）。これには、他の回答に比べて（私にとって）多くの利点があります。

  • 純粋なHTML/CSS-JavaScriptなし
  • ダイアログに固定幅を設定する必要はありません（ユーザーがダイアログのサイズを変更した場合でも、ボタンは常に左端に揃えられます）
  • CSSに！importantフラグは必要ありません

私が使用したHTML（The Cookの回答から少し変更）：

$('#dialog-UserDetail').dialog({
        autoOpen: false,
        width: 'auto',
        modal: true,
        buttons: {
            DelUser:{ 
                class: 'leftButton',
                text: 'Delete User',
                click : function (){
                    alert('delete here');
                }
            },
            "Update User": function () {
                   alert('update here');
       },
            Close: function () {
                $(this).dialog("close");
            }
        }
    });

次に、次のCSSを使用しました。

.leftButton
{
    position: absolute;
    left:8px;
}

その結果、「leftButton」ボタンは常にダイアログの左端から8px離れた位置に固定され、他のボタンは右揃えになります。左揃えにする必要のあるボタンが複数ある場合は、左のパラメーターを前のボタンの幅に加えて、各ボタンに必要な間隔だけ増やす必要があります。これは、私の意見ではエレガントではありません。ただし、左揃えのボタンが1つしかない場合、これは魅力のように機能します。

于 2013-12-10T20:27:28.017 に答える
4

ダイアログ（ http://docs.jquery.com/UI/Dialog#option-dialogClass）にクラスを追加して、スタイルをローカライズすることもできます。

于 2009-10-28T21:20:32.617 に答える
4

まず、jquery-ui.cssで.ui-dialog-buttonsetの幅を100％に変更する必要があります

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { width: 100%;}

次に、モーダル宣言で、ボタンに対して、次のように明示的なことを行うことができます。

buttons: [
        {
           text: "Close",
           open: function(){
                        $(this).css('float','left');}, 
                  }
        }
             ]
于 2013-02-18T15:12:03.877 に答える
2

わかりました。@TheCookの回答として、このcssをスタイルタグで変更できます。別の方法で考えてください。ボタン内にスタイルを追加できます。cssはもう必要ありません。幸運を祈ります。

                      "Ok":{                                
                            style:"margin-right:640px",                                
                            click: function () {
                                //Your Code 
                            }
                        },
于 2016-11-18T08:31:36.940 に答える
1

同じ問題が発生しましたが、定義jquery uiダイアログフォームを作成するたびに、ボタンの順序を変更するか、フォームダイアログを閉じるという簡単な解決策を見つけました。

于 2011-05-26T09:00:14.353 に答える
1

選択したら、次のことを試してください。
.prependTo(".ui-dialog-buttonpane");

于 2012-03-27T18:53:46.883 に答える
1

.ui-dialog-buttonsetが幅なしで折りたたまれているので、左下と右下の隅に2つのボットンを配置するために、次のようにcssを追加しました。

.ui-dialog-buttonset {width:100%}
.ui-dialog-buttonset .ui-button:last-child {float:right !important;}

最初の行はボタンセットコンテナの幅を100％にし、2番目の行は右にある最後のボタンを押します。

于 2013-02-09T09:31:41.157 に答える
1 
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  float: none !important;
  text-align:right;
}

.ui-button-left {
  float: left;
}

これはデフォルトのボタンには影響しません。右側に表示されます。また、ボタンごとに特別な書式を設定しなくても、左側にボタンをいくつでも配置できます。左ボタンのクラスを設定するには、さまざまな方法があります。

ダイアログ定義の一部として：

$("#mydialog").dialog(
    {buttons: [
        {"class": "ui-button-left", "text": "Delete"},
        {"text": "Cancel"},
        {"text": "Save"}
    ]});

または、次のようなことを行うことができます。

$("#mydialog").dialog(
    {buttons: [
        {"id": "myDeleteButton", "text": "Delete"},
        {"text": "Cancel"},
        {"text": "Save"}
    ]});

その後、「myDeleteButton」オブジェクトのcssを左にフローティングとしてスタイル設定します。ダイアログを再作成せずにボタンを表示または非表示にする場合にも、ボタンIDを設定すると便利です。

Chrome、Safari、FF、IE11、jQueryUI1.10でテスト済み

于 2014-08-18T16:40:06.920 に答える
0 
$('#dialog-UserDetail').dialog({
            autoOpen: false,
            height: 318,
            width: 531,
            modal: true,
            resize: false,
            buttons: {
                DelUser:{ 
                    text  : 'Delete User',
                    click : function (){
                        alert('delete here');
                    }
                },
                space: { 
                    text  : '',
                    id : 'space',
                    width : '(the distance you want!)',
                },
                "Update User": function () {
                       alert('update here');
           },
                Close: function () {
                    $(this).dialog("close");
                }
            }
        });
$("#space").visibility("hidden");
于 2013-08-05T16:01:09.093 に答える
0

次のアプローチを使用して、最初のボタンのみを左揃えにします。これは、任意のダイアログ幅で機能します。

    open: function(event, ui) {
        var firstButton = $(this).parent().find('.ui-dialog-buttonpane button:first')
        var firstButtonPos = firstButton.position().left - 15;
        firstButton.css({ marginRight: firstButtonPos + 'px', color: 'red' });
    },
于 2020-02-06T22:11:52.210 に答える
0

私がしたのは、ボタンを中央に配置するためにCSSに以下を追加することだけでした。ここで重要なのは、幅を100％に設定することです。これは、ファイアバグでbcをチェックし、幅はボタンのサイズのみでした。

.ui-dialog-buttonset {
    width: 100%; 
    text-align: center
}
于 2021-01-22T20:48:21.210 に答える