web-dev-qa-db-ja.com

jQuery UIダイアログボタンの配置

JQuery UIからボタンを互いに別々に配置するにはどうすればよいですか。ボタンは同じ方向に並んでいます。一方のボタンを左に、もう一方のボタンを右に揃えたいです。出来ますか？

jqueryjquery-uimodal-dialog
29
turezky

Firebugでこれを見て...

Dialogコントロールは、_ui-dialog-buttonpane_と呼ばれるクラスを持つdivを作成するので、それを検索できます。

複数のボタンを扱う場合は、おそらく_:first_および_:last_属性が必要になります。

したがって、$(".ui-dialog-buttonpane button:first)は最初のボタンを取得するはずです。そして$(".ui-dialog-buttonpane button:last)は最後のボタンを取得するはずです。

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

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

30
Chris Brandsma

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

 $('#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>
16
The Cook

私は次の解決策を考案しました（The Cookの回答に基づく）。これには、他の回答よりも多くの利点があります（私にとって）。

  • 純粋な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」ボタンは常にダイアログの左端から8ピクセル離れた位置に固定され、他のボタンは右揃えになります。左揃えが必要なボタンが複数ある場合は、前のボタンの幅と各ボタンに必要な間隔だけ左パラメータを増やす必要がありますが、これは私の意見ではエレガントではありません。ただし、単一の左揃えボタンの場合、これは魅力のように機能します。

12
ibrewster

最初に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');}, 
                  }
        }
             ]
4
Angad

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

4
pashcan

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

                      "Ok":{                                
                            style:"margin-right:640px",                                
                            click: function () {
                                //Your Code 
                            }
                        },
2
Jze
.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、jQuery UI 1.10でテスト済み

1
spekary

選択した後、試してください：
.prependTo(".ui-dialog-buttonpane");

1
Falci

とにかく.ui-dialog-buttonsetが幅なしで折りたたまれているので、左下と右下に2つのボタンを配置すると、次のようなCSSが追加されます：

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

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

1
Shaun

私は同じ問題を抱えましたが、ボタンの順序を変更する簡単な解決策を見つけましたOkまたはjquery uiダイアログフォームを定義するたびにフォームダイアログを閉じます。

1
nvtthang
$('#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");
0
user2653803