1

ここに画像の説明を入力してくださいクエリUI1.8.7.custom.min.jsでjqueryダイアログを使用しています

ダイアログのボタンと、ダイアログに表示される場所をカスタマイズする必要があります。ほとんどの場合、ダイアログボックスをカスタマイズすることができましたが、ボタンとその場所をカスタマイズすることは、これまでのところ難しいCookieでした。以下のスクリーンショットとコードを見つけてください

HTML:

<style>
.ui-dialog, .ui-dialog-content {
 border:1px solid #cde68c;
 border-bottom:0px;
 background-color: white !important;
 color: #333;
 font: 12px/180% Arial, Helvetica, sans-serif;
}
.ui-dialog-titlebar {
 display:none;
}
#ui-dialog-title-dialog {
 color: yellow !important;
 text-shadow: none;
}
.ui-dialog-buttonpane {
 border:1px solid #cde68c;
 border-top:0px;
 margin-bottom: 1%;
}

</style>
        <div id="dialog">
            <p><span id="emailNotice"></span></p>
        </div>

Javascript:

$j(document).ready(function() {

    $j('#dialog').dialog('open');
    $j('#emailNotice').html('show some notice text abcd');  

    $j('#dialog').dialog({
        modal:true,
        autoOpen: false,
        width: 600,
        buttons: {
            "Ok": function() {
                $j(this).dialog("close");
            },
            "Cancel": function() {
                className: 'cancelButtonClass',
                $j(this).dialog("close");
            }
        }
    });
});

ボタンを左、右、上/下などに配置できるようにしたい

4

3 に答える 3

2

プロパティにはいつでも空のオブジェクトを渡すことができbuttonsます。次に、ボタンを「ダイアログ」divに直接追加します。もちろん、これはボタンクリックイベントを手動で処理する必要があることを意味します。

大まかな例：

<div id="dialog">
  <p><span id="emailNotice"></span></p>
  <button id="myButton">Submit</button>
</div>

Javascript：

$j('#dialog').dialog({
    modal:true,
    autoOpen: false,
    width: 600,
    buttons: {}
    }
});
于 2012-07-05T23:30:28.540 に答える
2 
    <!-- language: lang-js -->
buttons: [
       {

            text: "Delete that",
            className: 'deleteButtonClass',
            click: function() {
                alert('foobar');                
            }
        }
于 2013-05-17T08:24:05.547 に答える
1

jquery-ui-1.10.0.custom.cssで次のクラスを見つけて、削除しますfloat: right;

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
float: right;
}

jquery-ui-1.8.7.custom.cssではなくjquery-ui-1.10.0.custom.cssでテスト済み

于 2013-10-25T10:25:30.147 に答える