Bootbox詳解

一、介紹

Bootbox是一個基於Bootstrap的，簡單易用的對話框插件。它提供了一系列常見的對話框，如警告框、確認框、提示框等，同時還可以自定義的設置對話框的大小、位置、按鈕等。

在使用Bootbox之前，需要引入Bootstrap和jQuery的相關文件。

二、警告框

警告框是常見的彈出框之一，用於提醒用戶當前的操作可能會造成不良後果。使用Bootbox可以輕鬆創建警告框，代碼示例如下：

    bootbox.alert({
        message: "這是一個警告框！",
        backdrop: true,
        size: 'small'
    });

Alert 方法只有一個按鈕，按照默認設置，按鈕的文字為”OK”。在代碼中設置了message參數用於顯示信息，backdrop參數為true時，點擊模態框後模態框將自動關閉。

三、確認框

確認框是另一個常見的對話框，用於提示用戶確認某個操作或者選擇是否執行某個操作。可使用以下代碼創建確認框：

    bootbox.confirm({
        message: "您確定要執行此操作嗎？",
        backdrop: true,
        size: 'small',
        callback: function(result){
            console.log(result); // 點擊OK，console輸出true；點擊Cancel，console輸出false
        }
    });

Confirm 方法將生成兩個按鈕：「取消」和「確定」。可以通過callback函數來獲取用戶的選擇結果，如果點擊了”OK”返回true，否則返回false。

四、提示框

提示框可以向用戶展示一些提示信息，成功、失敗等信息。以下代碼可用於創建提示框：

    bootbox.alert({
        message: "
操作成功！",        backdrop: true,        size: 'small'    });

Alert和confirm方法只允許傳一個message參數，所以我們需要把HTML標籤和樣式放進去。

五、自定義對話框

除了上面三種默認的對話框之外，我們還可以創建自定義的對話框。Bootstrap中的模態框給了我們很好的可操作性，Bootbox的自定義對話框其實是對Bootstrap模態框的封裝。以下是一個自定義模態框的示例代碼：

    bootbox.dialog({
        message: '<div class="row">' +
            '<div class="col-md-12"><label>姓名:</label><input type="text" class="form-control"></div>' +
            '<div class="col-md-12"><label>年齡:</label><input type="text" class="form-control"></div>' +
            '<div class="col-md-12 form-group"><label>性別:</label>' + 
            '<input type="radio" id="male"><label for="male">男</label>' + 
            '<input type="radio" id="female"><label for="female">女</label>' +
            '</div></div>',
        title: '請填寫以下信息',
        buttons: {
            cancel: {
                label: "取消",
                className: 'btn-cancel'
            },
            ok: {
                label: "確定",
                className: 'btn-primary',
                callback: function () {
                    console.log("您輸入的信息是：" + $('input:eq(0)').val() + '，' + $('input:eq(1)').val() + '，' + $('input:checked').val());
                }
            }
        }
    });

dialog方法可以讓我們自定義一些對話框的元素，如title、message和buttons等。在這個例子里，我們通過∠div∠和∠label∠標籤定義了對話框里的HTML元素，使用了Bootstrap的class樣式來排版。

buttons的定義方式和confirm方法類似，可以自定義按鈕的樣式和回調函數。以上代碼使用了三個對象cancel、ok和callback。cancel和ok對象用來定義按鈕的文字和樣式；callback函數則在用戶點擊”OK”後獲取輸入框的數據並列印在console裡面。

六、總結

Bootbox是一個非常實用的對話框插件，可以為我們的前端應用增添不少交互性、友好度。從本篇文章的介紹可以看出，Bootbox支持的對話框種類很多，並且還可以方便的自定義對話框的外觀和功能。它的使用也非常簡單，只需要引入相關文件，配置對話框參數，即可輕鬆生成所需的對話框。