Bootstrap之BootstrapDialog

Make use of Bootstrap's modal more monkey-friendly.

參考地址：http://nakupanda.github.io/bootstrap3-dialog/

模態彈框：

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body…</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Dialog彈出層：

        BootstrapDialog.alert('I want banana!');

Examples

Simplest

只提供信息顯示，並保持所有其他事情預設。

        BootstrapDialog.show({
            message: 'Hi Apple!'
        });

Dialog Title

        BootstrapDialog.show({
            title: 'Say-hello dialog',
            message: 'Hi Apple!'
        });

操作對話標題

        BootstrapDialog.show({
            title: 'Default Title',
            message: 'Click buttons below.',
            buttons: [{
                label: 'Title 1',
                action: function(dialog) {
                    dialog.setTitle('Title 1');
                }
            }, {
                label: 'Title 2',
                action: function(dialog) {
                    dialog.setTitle('Title 2');
                }
            }]
        });

操作對話信息

        BootstrapDialog.show({
            title: 'Default Title',
            message: 'Click buttons below.',
            buttons: [{
                label: 'Message 1',
                action: function(dialog) {
                    dialog.setMessage('Message 1');
                }
            }, {
                label: 'Message 2',
                action: function(dialog) {
                    dialog.setMessage('Message 2');
                }
            }]
        });

載入遠程頁面(1)

        BootstrapDialog.show({
            message: $('<div></div>').load('remote.html')
        });

載入遠程頁面 (2)

        BootstrapDialog.show({
            message: function(dialog) {
                var $message = $('<div></div>');
                var pageToLoad = dialog.getData('pageToLoad');
                $message.load(pageToLoad);
        
                return $message;
            },
            data: {
                'pageToLoad': 'remote.html'
            }
        });

Buttons

        BootstrapDialog.show({
            message: 'Hi Apple!',
            buttons: [{
                label: 'Button 1'
            }, {
                label: 'Button 2',
                cssClass: 'btn-primary',
                action: function(){
                    alert('Hi Orange!');
                }
            }, {
                icon: 'glyphicon glyphicon-ban-circle',
                label: 'Button 3',
                cssClass: 'btn-warning'
            }, {
                label: 'Close',
                action: function(dialogItself){
                    dialogItself.close();
                }
            }]
        });

操作Buttons

通過bootstrapdialog創建按鈕有一些額外的功能：
$button.toggleEnable(true|false);
$button.enable(); // 相當於 $button.toggleEnable(true);
$button.disable(); // 相當於  $button.toggleEnable(false);
$button.toggleSpin(true|false);
$button.spin(); // 相當於 $button.toggleSpin(true);
$button.stopSpin(); // 相當於  $button.toggleSpin(false);

        BootstrapDialog.show({
            title: 'Manipulating Buttons',
            message: function(dialog) {
                var $content = $('<div><button class="btn btn-success">Revert button status right now.</button></div>');
                var $footerButton = dialog.getButton('btn-1');
                $content.find('button').click({$footerButton: $footerButton}, function(event) {
                    event.data.$footerButton.enable();
                    event.data.$footerButton.stopSpin();
                    dialog.setClosable(true);
                });
                
                return $content;
            },
            buttons: [{
                id: 'btn-1',
                label: 'Click to disable and spin.',
                action: function(dialog) {
                    var $button = this; // 'this' here is a jQuery object that wrapping the <button> DOM element.
                    $button.disable();
                    $button.spin();
                    dialog.setClosable(false);
                }
            }]
        });

按鈕的熱鍵

試著按下麵的按鈕。
最後一個按鈕被禁用，所以沒有事情發生，當按下熱鍵。
請註意，如果您的對話框中有一些需要鍵盤操作的組件，可能會出現衝突，您可以嘗試下一個示例。

        BootstrapDialog.show({
            title: 'Button Hotkey',
            message: 'Try to press some keys...',
            onshow: function(dialog) {
                dialog.getButton('button-c').disable();
            },
            buttons: [{
                label: '(A) Button A',
                hotkey: 65, // Keycode of keyup event of key 'A' is 65.
                action: function() {
                    alert('Finally, you loved Button A.');
                }
            }, {
                label: '(B) Button B',
                hotkey: 66,
                action: function() {
                    alert('Hello, this is Button B!');
                }
            }, {
                id: 'button-c',
                label: '(C) Button C',
                hotkey: 67,
                action: function(){
                    alert('This is Button C but you won\'t see me dance.');
                }
            }]
        });

創建 dialog 實例

BootstrapDialog.show(...) 只是一個快捷方式，如果你需要對話框實例，用“新”。

        
        // Using init options
        var dialogInstance1 = new BootstrapDialog({
            title: 'Dialog instance 1',
            message: 'Hi Apple!'
        });
        dialogInstance1.open();
        
        // Construct by using setters
        var dialogInstance2 = new BootstrapDialog();
        dialogInstance2.setTitle('Dialog instance 2');
        dialogInstance2.setMessage('Hi Orange!');
        dialogInstance2.setType(BootstrapDialog.TYPE_SUCCESS);
        dialogInstance2.open();
        
        // Using chain callings
        var dialogInstance3 = new BootstrapDialog()
            .setTitle('Dialog instance 3')
            .setMessage('Hi Everybody!')
            .setType(BootstrapDialog.TYPE_INFO)
            .open();

事實上BootstrapDialog.show(...) 也將返回創建的對話框實例。

        
        // You can use dialogInstance later.
        var dialogInstance = BootstrapDialog.show({
            message: 'Hello Banana!'
        });

Button with identifier

        
        var dialog = new BootstrapDialog({
            message: 'Hi Apple!',
            buttons: [{
                id: 'btn-1',
                label: 'Button 1'
            }]
        });
        dialog.realize();
        var btn1 = dialog.getButton('btn-1');
        btn1.click({'name': 'Apple'}, function(event){
            alert('Hi, ' + event.data.name);
        });
        dialog.open();

較大的對話框

預設情況下，對話框的大小是 'size-normal' 或 BootstrapDialog.SIZE_NORMAL, 但你可以通過設置選項的 'size' 的'size-large' 或BootstrapDialog.SIZE_LARGE.

        
        BootstrapDialog.show({
            size: BootstrapDialog.SIZE_LARGE,
            message: 'Hi Apple!',
            buttons: [{
                label: 'Button 1'
            }, {
                label: 'Button 2',
                cssClass: 'btn-primary',
                action: function(){
                    alert('Hi Orange!');
                }
            }, {
                icon: 'glyphicon glyphicon-ban-circle',
                label: 'Button 3',
                cssClass: 'btn-warning'
            }, {
                label: 'Close',
                action: function(dialogItself){
                    dialogItself.close();
                }
            }]
        });

More dialog sizes

Please note that specifying BootstrapDialog.SIZE_WIDE is equal to using css class 'modal-lg' on Bootstrap Modal.

        
        BootstrapDialog.show({
            title: 'More dialog sizes',
            message: 'Hi Apple!',
            buttons: [{
                label: 'Normal',
                action: function(dialog){
                    dialog.setTitle('Normal');
                    dialog.setSize(BootstrapDialog.SIZE_NORMAL);
                }
            }, {
                label: 'Small',
                action: function(dialog){
                    dialog.setTitle('Small');
                    dialog.setSize(BootstrapDialog.SIZE_SMALL);
                }
            }, {
                label: 'Wide',
                action: function(dialog){
                    dialog.setTitle('Wide');
                    dialog.setSize(BootstrapDialog.SIZE_WIDE);
                }
            }, {
                label: 'Large',
                action: function(dialog){
                    dialog.setTitle('Large');
                    dialog.setSize(BootstrapDialog.SIZE_LARGE);
                }
            }]
        });

更多信息

bootstrapdialog支持顯示豐富的內容，所以你甚至可以使用一個視頻剪輯你的對話框中的消息。

        
        var $textAndPic = $('<div></div>');
        $textAndPic.append('Who\'s this? <br />');
        $textAndPic.append('<img src="./images/pig.ico" />');
        
        BootstrapDialog.show({
            title: 'Guess who that is',
            message: $textAndPic,
            buttons: [{
                label: 'Acky',
                action: function(dialogRef){
                    dialogRef.close();
                }
            }, {
                label: 'Robert',
                action: function(dialogRef){
                    dialogRef.close();
                }
            }]
        });

Dialog closable / unclosable

If option 'closable' is set to false, the default closing behaviors will be disabled, but you can still close the dialog by using dialog.close().

        
        BootstrapDialog.show({
            message: 'Hi Apple!',
            closable: false,
            buttons: [{
                label: 'Dialog CLOSABLE!',
                cssClass: 'btn-success',
                action: function(dialogRef){
                    dialogRef.setClosable(true);
                }
            }, {
                label: 'Dialog UNCLOSABLE!',
                cssClass: 'btn-warning',
                action: function(dialogRef){
                    dialogRef.setClosable(false);
                }
            }, {
                label: 'Close the dialog',
                action: function(dialogRef){
                    dialogRef.close();
                }
            }]
        });

關閉對話框的更多控制項

預設情況下，當選擇 'closable' 設置為true，對話框可以通過這些方式關閉：點擊在對話框中，按ESC鍵，點擊對話框標題右側的關閉圖標。

如果你想讓你的對話框關閉時，對話框標題的關閉圖標被點擊，可以設置的選項 'closeByBackdrop' and 'closeByKeyboard' 為 false.

        
        BootstrapDialog.show({
            message: 'Hi Apple!',
            message: 'You can not close this dialog by clicking outside and pressing ESC key.',
            closable: true,
            closeByBackdrop: false,
            closeByKeyboard: false,
            buttons: [{
                label: 'Close the dialog',
                action: function(dialogRef){
                    dialogRef.close();
                }
            }]
        });

Confirm

　　BootstrapDialog.confirm('Hi Apple, are you sure?');

Confirm with callback

        BootstrapDialog.confirm('Hi Apple, are you sure?', function(result){
            if(result) {
                alert('Yup.');
            }else {
                alert('Nope.');
            }
        });

Available options

Please note that all options described below are optional, but you will have a weird dialog if you don't even give it a message to display.
Most options can be set via init options or property setters.

BootstrapDialog.show({
    title: 'Say-hello dialog',
    message: 'Hello world!',
    buttons: [{
        id: 'btn-ok',   
        icon: 'glyphicon glyphicon-check',       
        label: 'OK',
        cssClass: 'btn-primary', 
        autospin: false,
        action: function(dialogRef){    
            dialogRef.close();
        }
    }]
});

Available methods