对话框 / Dialog

优质

小牛编辑

126浏览

2023-12-01

普通窗口

<button>普通青年(呃，普通窗口)</button>

require(['jquery', 'moye/Dialog'], function ($, Dialog) {

    var dialog = new Dialog({
        content: ''
            + '<h3>普通青年背古诗...</h3>'
            + '<br>'
            + '君不见孤雁关外发，酸嘶度扬越。<br> '
            + '空城客子心肠断，幽闺思妇气欲绝。<br>'
            + '凝霜夜下拂罗衣，浮云中断开明月。<br>'
            + '夜夜遥遥徒相思，年年望望情不歇。<br>'
            + '寄我匣中青铜镜，倩人为君除白发。<br>'
            + '行路难，行路难，<br>'
            + '夜闻南城汉使度，使我流泪忆长安！<br>',
        title: '普通青年有一个普通标题'
    }).render();
  
    // 给按钮绑定事件，并触发窗口的显示
    $('#newDialog').on('click', $.proxy(dialog.show, dialog)).click();
});

会自毁的窗口

<button>会自毁的窗口</button>

require(['jquery', 'moye/Dialog'], function ($, Dialog) {

    var i = 0;

    var button = $('#auto-dispose');
    
    button.on('click', function () {

        new Dialog({
            content: '会自毁的窗口' + (++i),
            title: '会自毁的窗口',
            hideDispose: true
        }).render().show();

    });
    
    // 触发窗口显示
    button.click();
    
});

带按钮的窗口

通过我们提供buttons参数. 通过这个参数, 可以很方便地添加脚注中的按钮

<button>带按钮的窗口</button>

require(['jquery', 'moye/Dialog', 'moye/Button'], function ($, Dialog) {

  var dialog = new Dialog({
    content: '设定`buttons`参数来添加脚注中的按钮',
    title: '带按钮的窗口',
    buttons: [{
      text: '好',
      part: 'big',
      skin: 'mini'
    }]
  })
  .on('big', function (e) {
    this.hide();
  })
  .render();

  $('#footer-buttons').on('click', $.proxy(dialog.show, dialog)).click();
    
});

还可以通过设定 footer 的值, 来构建自定义脚注, 自行添加按钮

<button>
    通过footer来添加按钮，点我看效果~
</button>

require(['jquery', 'moye/Dialog', 'moye/Button'], function ($, Dialog) {

  var dialog = new Dialog({
    content: '带按钮的窗口',
    title: '带按钮的窗口',
    footer: '<button data-action="close">ok</button>'
  }).render();

  $('#footer').on('click', $.proxy(dialog.show, dialog)).click();
    
});

这里可以给Dialog中任意的DOM元素添加data-action属性。在用户点击了一个带有data-action的元素时，Dialog会根据data-action所指定的动作来释放事件。比如上边例子里，我们给脚注中的按钮添加了close的动作标识。Dialog中有一个默认的动作处理动作close。所有带有 close动作标识的元素，被点击之后，Dialog都会自动关闭哟。

注意: footer与buttons的优先级. 如果, footer与buttons同时存在, 那么footer会覆盖buttons.

是不是觉得自己拼按钮很麻烦呢? 来, 我们内置一些常用的带按钮的窗口~

内置的窗口们

内置的窗口们的特性

对于警告窗口和确认窗口，它们属于用户必须响应的交互，而且这种响应一定有固定的结果。因此，我们把它们的返回结果进行了 Promise封装。也就是说，Dialog.alert()和Dialog.confirm()会返回promise. 即这两个操作是异步的, 会返回预期结果. 用户只能在我们限定的选项中做出一个选择. 当promise被resolved或rejected, 会带有按钮的标识part.
都是没有关闭按钮的. 原因是关闭按钮在这里是多余的. 关闭按钮在alert中表达的确认, 与确认按钮一致; 在confirm中表达的意图是取消, 与取消按钮一致. 因此, 关闭按钮是重复的, 不展现这个按钮. 这也与window.alert()和window.confirm()的交互相一致.
都是会自毁的. 这与window.alert()和window.confirm()是一致的.
Dialog.alert()产生的窗口带有样式类.skin-alert-dialog, 也可以添加其他的skin来丰富样式效果.
Dialog.confirm()产生的窗口带有样式类.skin-confirm-dialog, 也可以添加其他的skin来丰富样式效果.
点击mask不会关闭窗口, 原因与2一致.

警告窗口 `Dialog.alert()`

<button>
    点我显示警告
</button>

require(['jquery', 'moye/Dialog', 'moye/Button'], function ($, Dialog) {

    var i = 0;

    $('#alert').on('click', function () {

        var me = this;

        Dialog.alert({
            title: 'WARNING',
            content: '狼来啦, 大王快跑呀~!',
            buttons: [{
                text: '傻呀, 当然跑啊'
            }]
        }).then(function () {
            me.innerHTML = '狼来啦~' + (++i) + '次';
        });

    });
    
    // 显示 demo 中的警告框
    $('#alert').click();
    
});

确认窗口 `Dialog.confirm()`

<button>狼来啦~</button>

require(['jquery', 'moye/Dialog', 'moye/Button'], function ($, Dialog) {

    var i = 0;
    var j = 0;

    $('#confirm-dialog').on('click', function () {

        var me = this;

        Dialog.confirm({
            title: '确认', // 小trick, 有标题, 但是没有字...
            content: '大王, 狼来了, 约吗? 啊不, 跑吗~!?',
            buttons: [{
                text: '约约约'
            }, {
                text: '约你妹'
            }]
        }).then(function () {
            me.innerHTML = '狼来啦~约了' + (++i) + '次, 不约' + j + '次';
        }, function () {
            me.innerHTML = '狼来啦~约了' + i + '次, 不约' + (++j) + '次';
        });

    });
    
    // 触发 demo 中的确认框
    $('#confirm-dialog').click();
    
});