0

以下のコードは、「OK」ボタンだけのアラートダイアログと「キャンセル」および「OK（送信）」ボタンのある確認ダイアログのいずれかを表示するためのものです。

ご覧のとおり、繰り返されるコードはたくさんありますが、できるだけ少ないコードが繰り返される（複数回書かれる）ようにこれを書く方法はないかと思いました。

私はjQueryをすぐに学んでいますが、これをより良く書く方法について立ち往生していますか？ヘルプや例は本当にありがたいですか？どうもありがとうございます

外部JS：

function alert() {
    var id = $('#dialog-alert');
    id.dialog({
        autoOpen: false,
        dialogClass: 'ui-alert',
        resizable: false,
        modal: true,
        width: 450,
        buttons: [{
            'text': 'OK',
            'class': 'btn btn-green',
            'click': function () { $(this).dialog('close'); }
        }]
    }).dialog('open');
    $('.ui-dialog :button').blur();
};

function confirm() {
    var id = $('#dialog-confirm');
    id.dialog({
        autoOpen: false,
        dialogClass: 'ui-alert',
        resizable: false,
        modal: true,
        width: 450,
        buttons: [{
            'text': 'Cancel',
            'class': 'btn btn-red',
            'click': function () { $(this).dialog('close'); }
        },
        {
            'text': 'OK',
            'class': 'btn btn-green',
            'click': function () { $('#completeform').submit(); }
        }]
    }).dialog('open');
    $('.ui-dialog :button').blur();
};
4

1 に答える 1

0

@Alnitakの助けを借りて、私は自分が望むところにたどり着きました。ダイアログを呼び出すことができる1つの関数が必要であり、それがアラートであるか確認であるかにかかわらず、1つまたは2つのボタンを表示します。私の解決策は、似たようなものを探している人のために以下にあります。パラメータと条件文の組み合わせ。

function dialog(id, btns) {
    var buttons = [{
        'text': 'OK',
        'class': 'btn btn-green',
        'click': function () { $(this).dialog('close'); }
    }]

    if (btns === confirm) {
        buttons = [{
            'text': 'Cancel',
            'class': 'btn btn-red',
            'click': function () { $(this).dialog('close'); }
        }, {
            'text': 'OK',
            'class': 'btn btn-green',
            'click': function () { $('#completeform').submit(); }
        }]
    };
    $('#dialog-' + id).dialog({
        autoOpen: false,
        dialogClass: 'ui-alert',
        resizable: false,
        modal: true,
        width: 450,
        buttons: buttons
    }).dialog('open');
    $('.ui-dialog :button').blur();
};

HTMLページの場合：

$(function() { dialog('alert', alert); }); 
// or
$(function() { dialog('confirm', confirm); });
于 2013-03-14T10:52:52.730 に答える