基於BootStrap Metronic開發架構經驗小結【六】對話方塊及提示框的處理和最佳化，bootstrapmetronic

基於BootStrap Metronic開發架構經驗小結【六】對話方塊及提示框的處理和最佳化，bootstrapmetronic

在各種Web開發過程中，對話方塊和提示框的處理是很常見的一種介面處理技術，用得好，可以給使用者很好的頁面體驗，Bootstrap開發也一樣，我們往往在頁面新增、編輯、查看詳細等介面使用彈出對話方塊層的方式進行顯示資料，刪除則可能使用一個提示確認框，如果操作成功，我們可以使用更豐富的提示框來處理，本篇主要對比說明在Bootstrap開發中用到的這些技術要點。

1、Bootstrap對話方塊的使用

常規的Bootstrap有幾種尺寸的對話方塊，包括預設狀態的小對話方塊，中等寬度的對話方塊，和全尺寸的對話方塊幾種，Bootstrap的對話方塊介面非常友好， 當我們使用ESC鍵或者按一下滑鼠其他空白處，則會自動隱藏對話方塊的。

它們的定義只是class不同，如下面是預設的小對話方塊介面代碼：

<!--------------------------添加/修改資訊的彈出層----------------------------><div id="add" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  <div class="modal-dialog">    <div class="modal-content">      <div class="modal-header bg-primary">        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>        <h4 class="modal-title">          <i class="icon-pencil"></i>          <span id="lblAddTitle" style="font-weight:bold">添加資訊</span>        </h4>      </div>      <form class="form-horizontal form-bordered form-row-strippe" id="ffAdd" action="" data-toggle="validator" enctype="multipart/form-data">        <div class="modal-body">          <div class="row">            <div class="col-md-12">              <div class="form-group">                <label class="control-label col-md-2">父ID</label>                <div class="col-md-10">                  <select id="PID" name="PID" type="text" class="form-control select2" placeholder="父ID..." ></select>                </div>              </div>            </div>            <div class="col-md-12">              <div class="form-group">                <label class="control-label col-md-2">名稱</label>                <div class="col-md-10">                  <input id="Name" name="Name" type="text" class="form-control" placeholder="名稱..." />                </div>              </div>            </div>            <div class="col-md-12">              <div class="form-group">                <label class="control-label col-md-2">備忘</label>                <div class="col-md-10">                  <textarea id="Note" name="Note" class="form-control" placeholder="備忘..."></textarea>                </div>              </div>            </div>          </div>        </div>        <div class="modal-footer bg-info">          <input type="hidden" id="ID" name="ID" />          <button type="submit" class="btn blue">確定</button>          <button type="button" class="btn green" data-dismiss="modal">取消</button>        </div>      </form>    </div>  </div></div>

大概的介面如下所示：

注意上面代碼裡面的對話方塊樣式代碼，如下：

<div class="modal-dialog">

如果是其他兩個尺寸的資料庫，也只需要修改這裡即可，如下所示兩種代碼分別是：

<div class="modal-dialog modal-lg">

以及

<div class="modal-dialog modal-full">

我們可以根據介面元素的布局，來決定採用哪個尺寸的對話方塊層定義，不過他們這幾個對話方塊的調用方式是一致的。

開啟對話方塊介面如下所示：

//顯示可以選擇客戶$("#btnSelectCustomer").show();

關閉對話方塊介面如下所示:

$("#add").modal("hide");

一般情況下，我們彈出的對話方塊就是一個表單，可以執行類似儲存資料的提交操作的，因此需要對錶單的資料進行驗證，如果有錯誤，我們可能需要在介面上提醒，因此在頁面初始化的時候，需要初始化表單的驗證規則，下面是我們常規的表單初始化操作。

//綁定相關事件    function BindEvent() {      //判斷表單的資訊是否通過驗證      $("#ffAdd").validate({        meta: "validate",        errorElement: 'span',        errorClass: 'help-block help-block-error',        focusInvalid: false,        highlight: function (element) {          $(element).closest('.form-group').addClass('has-error');        },        success: function (label) {          label.closest('.form-group').removeClass('has-error');          label.remove();        },        errorPlacement: function (error, element) {          element.parent('div').append(error);        },        submitHandler: function (form) {          $("#add").modal("hide");          //構造參數發送給後台          var postData = $("#ffAdd").serializeArray();          $.post(url, postData, function (json) {            var data = $.parseJSON(json);            if (data.Success) {              //增加肖像的上傳處理              $('#file-Portrait').fileinput('upload');              //儲存成功 1.關閉彈出層，2.重新整理表格式資料              showTips("儲存成功");              Refresh();            }            else {              showError("儲存失敗:" + data.ErrorMessage, 3000);            }          }).error(function () {            showTips("您未被授權使用該功能，請聯絡管理員進行處理。");          });        }      });    }

但是一般這些代碼都會重複很多，因此我們可以封裝函數的方式，重用部分代碼，從而使用更簡潔的處理代碼，但同樣能達到目的。

 //綁定相關事件    function BindEvent() {      //添加、編輯記錄的表單處理      formValidate("ffAdd", function (form) {        $("#add").modal("hide");        //構造參數發送給後台        var postData = $("#ffAdd").serializeArray();        $.post(url, postData, function (json) {          var data = $.parseJSON(json);          if (data.Success) {            //儲存成功 1.關閉彈出層，2.重新整理表格式資料            showTips("儲存成功");            Refresh();          }          else {            showError("儲存失敗:" + data.ErrorMessage, 3000);          }        }).error(function () {          showTips("您未被授權使用該功能，請聯絡管理員進行處理。");        });      });    } 

2、刪除確認的對話方塊處理

1）bootbox外掛程式的使用

除了上面的常規對話方塊，我們還經常碰到一種簡潔的確認對話方塊，雖然也可以使用上面的代碼來構建一個確認對話方塊，不過一般情況下不需要這麼麻煩的，可以使用外掛程式bootbox的確認對話方塊來進行處理。

Bootbox.js是一個小的JavaScript庫，它協助您在使用bootstrap架構的時候快速的建立一個對話方塊，也可以幫您建立，管理或刪除任何所需的DOM元素或js事件處理常式。

bootbox.js使用三方法設計模仿他們的本地JavaScript一些方法。他們確切的方法簽名是靈活的每個可以採取各種參數定製標籤和指定預設值，但它們通常被稱為一樣：

bootbox.alert(message, callback)

bootbox.prompt(message, callback)

bootbox.confirm(message, callback)

唯一需要的參數是alert是 message; callback是必需的 confirm 和 prompt 調用以確定使用者的響應。甚至當調用警報回調是確定當使用者 駁回對話方塊由於我們的封裝方法不能不要塊 像他們的母語是有用的：他們是非同步而非同步。

這三種方法調用四分之一個公用方法，你也可以使用你自己的自訂對話方塊建立 ：

bootbox.dialog(options)

更多api協助文檔請參見：http://bootboxjs.com/documentation.html

Alert

bootbox.alert("Hello world!", function() {Example.show("Hello world callback");});

Confirm

bootbox.confirm("Are you sure?", function(result) {Example.show("Confirm result: "+result);});

或者代碼：

 bootbox.confirm("您確認刪除選定的記錄嗎？", function (result) {          if (result) {            //最後去掉最後的逗號,            ids = ids.substring(0, ids.length - 1);            //然後發送非同步請求的資訊到後台刪除資料            var postData = { Ids: ids };            $.get("/Province/DeletebyIds", postData, function (json) {              var data = $.parseJSON(json);              if (data.Success) {                showTips("刪除選定的記錄成功");                Refresh();//重新整理頁面資料              }              else {                showTips(data.ErrorMessage);              }            });          }        });

Prompt

bootbox.prompt("What is your name?", function(result) {if (result === null) {  Example.show("Prompt dismissed");} else {  Example.show("Hi <b>"+result+"</b>");}});

Custom Dialog

使用代碼和介面效果如下所示：

bootbox.dialog(…)

[2）

2）sweetalert外掛程式的使用

雖然上面的效果非常符合Bootstrap的風格，不過介面略顯單調。上面的效果不是我很喜歡這種風格，我遇到一個看起來更加美觀的效果，如下所示。

這個效果是引入外掛程式sweetalert（http://t4t5.github.io/sweetalert/）實現的。

 swal({    title: "操作提示",    text: newtips,    type: "warning", showCancelButton: true,    confirmButtonColor: "#DD6B55",    cancelButtonText: "取消",    confirmButtonText: "是的，執行刪除！",    closeOnConfirm: true  }, function () {    delFunction();  });

上面的介面效果類似的實現代碼如下所示：

一般它的彈出框代碼可以做的很簡單，如下所示。

3、資訊氣球的處理

上面兩種處理，都是利用彈出對話方塊進行實現的，而且對介面有阻塞的，一般情況下，我們做資訊提示效果，希望它不要影響我們進一步的操作，或者至少提供一個很短的自動消失效果。

那麼這裡我們就來介紹下jNotify外掛程式和toastr外掛程式了。

1）jNotify提示框的使用

jNotify提示框，一款優秀的jQuery結果提示框外掛程式。我們在提交表單後，通過Ajax響應後台返回結果，並在前台顯示返回資訊，jNotify能非常優雅的顯示操作結果資訊。jNotify是一款基於jQuery的資訊提示外掛程式，它支援操作成功、操作失敗和操作提醒三種資訊提示方式。jNotify瀏覽器安全色性非常好，支援變更提示內容，支援定位提示框的位置，可配置外掛程式參數。

jSuccess(message,{option});jError("操作失敗，請重試!!");jNotify("注意：請完善你的<strong>設定檔！</strong>");

jNotify的參數詳細配置：

autoHide : true,        // 是否自動隱藏提示條clickOverlay : false,      // 是否單擊遮罩層才關閉提示條MinWidth : 200,          // 最小寬度TimeShown : 1500,         // 顯示時間：毫秒ShowTimeEffect : 200,       // 顯示到頁面上所需時間：毫秒HideTimeEffect : 200,       // 從頁面上消失所需時間：毫秒LongTrip : 15,          // 當提示條顯示和隱藏時的位移HorizontalPosition : "right",   // 水平位置:left, center, rightVerticalPosition : "bottom",   // 垂直位置：top, center, bottomShowOverlay : true,        // 是否顯示遮罩層ColorOverlay : "#000",      // 設定遮罩層的顏色OpacityOverlay : 0.3,      // 設定遮罩層的透明度onClosed:fn      //關閉提示框後執行函數，可以再次調用其他jNotify。如上面的三個依次調用。

下面是我在指令碼類裡面封裝的餓公用方法，用來實現提示效果的顯示的。

//顯示錯誤或提示資訊（需要引用jNotify相關檔案）function showError(tips, TimeShown, autoHide) {  jError(   tips,   {     autoHide: autoHide || true, // added in v2.0     TimeShown: TimeShown || 1500,     HorizontalPosition: 'center',     VerticalPosition: 'top',     ShowOverlay: true,     ColorOverlay: '#000',     onCompleted: function () { // added in v2.0       //alert('jNofity is completed !');     }   }  );}//顯示提示資訊function showTips(tips, TimeShown, autoHide) {  jSuccess(   tips,   {     autoHide: autoHide || true, // added in v2.0     TimeShown: TimeShown || 1500,     HorizontalPosition: 'center',     VerticalPosition: 'top',     ShowOverlay: true,     ColorOverlay: '#000',     onCompleted: function () { // added in v2.0       //alert('jNofity is completed !');     }   }  );}

這樣我們在使用Ajax的POST方法的時候，我們可以根據不同的需要進行提示。

  var postData = $("#ffAdd").serializeArray();          $.post(url, postData, function (json) {            var data = $.parseJSON(json);            if (data.Success) {              //增加肖像的上傳處理              $('#file-Portrait').fileinput('upload');              //儲存成功 1.關閉彈出層，2.重新整理表格式資料              showTips("儲存成功");              Refresh();            }            else {              showError("儲存失敗:" + data.ErrorMessage, 3000);            }          }).error(function () {            showTips("您未被授權使用該功能，請聯絡管理員進行處理。");          });

2）toastr外掛程式的使用

toastr是一個Javascript庫用於建立Gnome/Growl風格，非阻塞的頁面訊息提醒。，toastr可設定四種通知模式：成功，出錯，警告，提示，而提示視窗的位置，動畫效果都可以通過能數來設定，在官方站可以通過勾選參數來產生JS，非常的方便使用。

外掛程式地址是：http://codeseven.github.io/toastr/

它可以分別建立如下幾種效果：警告、危險、成功、提示的對話方塊資訊，效果如下所示。

它的使用JS代碼如下所示。

//顯示一個警告,沒有標題toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!')//顯示一個成功,標題toastr.success('Have fun storming the castle!', 'Miracle Max Says')//顯示錯誤標題toastr.error('I do not think that word means what you think it means.', 'Inconceivable!')//清除當前的列表toastr.clear() 

這個外掛程式的參數定義說明如下所示。

//參數設定，若用預設值可以省略以下面代  toastr.options = {    "closeButton": false, //是否顯示關閉按鈕    "debug": false, //是否使用debug模式    "positionClass": "toast-top-full-width",//彈出窗的位置    "showDuration": "300",//顯示的動畫時間    "hideDuration": "1000",//消失的動畫時間    "timeOut": "5000", //展現時間    "extendedTimeOut": "1000",//加長展示時間    "showEasing": "swing",//顯示時的動畫緩衝方式    "hideEasing": "linear",//消失時的動畫緩衝方式    "showMethod": "fadeIn",//顯示時的動畫方式    "hideMethod": "fadeOut" //消失時的動畫方式    };    //成功提示綁定    $("#success").click(function(){    toastr.success("祝賀你成功了");    })

以上就是我在項目裡面，對對話方塊及提示框的處理和最佳化的經驗總結，希望對大家學習改進Web介面有協助。如果大家想瞭解更多資訊敬請關注幫客之家網站！