基于BootStrap Metronic開(kāi)發(fā)框架經(jīng)驗(yàn)小結(jié)【六】對(duì)話框及提示框的處理和優(yōu)化

更新時(shí)間：2016年05月12日 11:45:11 作者：伍華聰

這篇文章主要介紹了基于BootStrap Metronic開(kāi)發(fā)框架經(jīng)驗(yàn)小結(jié)【六】對(duì)話框及提示框的處理和優(yōu)化的相關(guān)知識(shí)，主要對(duì)比說(shuō)明在Bootstrap開(kāi)發(fā)中用到的這些技術(shù)要點(diǎn)，對(duì)此文感興趣的朋友一起學(xué)習(xí)吧

在各種Web開(kāi)發(fā)過(guò)程中，對(duì)話框和提示框的處理是很常見(jiàn)的一種界面處理技術(shù)，用得好，可以給用戶很好的頁(yè)面體驗(yàn)，Bootstrap開(kāi)發(fā)也一樣，我們往往在頁(yè)面新增、編輯、查看詳細(xì)等界面使用彈出對(duì)話框?qū)拥姆绞竭M(jìn)行顯示數(shù)據(jù)，刪除則可能使用一個(gè)提示確認(rèn)框，如果操作成功，我們可以使用更豐富的提示框來(lái)處理，本篇主要對(duì)比說(shuō)明在Bootstrap開(kāi)發(fā)中用到的這些技術(shù)要點(diǎn)。

1、Bootstrap對(duì)話框的使用

常規(guī)的Bootstrap有幾種尺寸的對(duì)話框，包括默認(rèn)狀態(tài)的小對(duì)話框，中等寬度的對(duì)話框，和全尺寸的對(duì)話框幾種，Bootstrap的對(duì)話框界面非常友好，當(dāng)我們使用ESC鍵或者鼠標(biāo)單擊其他空白處，則會(huì)自動(dòng)隱藏對(duì)話框的。

它們的定義只是class不同，如下面是默認(rèn)的小對(duì)話框界面代碼：

<!--------------------------添加/修改信息的彈出層---------------------------->
<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>

大概的界面如下所示：

注意上面代碼里面的對(duì)話框樣式代碼，如下：

<div class="modal-dialog">

如果是其他兩個(gè)尺寸的數(shù)據(jù)庫(kù)，也只需要修改這里即可，如下所示兩種代碼分別是：

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

以及

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

我們可以根據(jù)界面元素的布局，來(lái)決定采用哪個(gè)尺寸的對(duì)話框?qū)佣x，不過(guò)他們這幾個(gè)對(duì)話框的調(diào)用方式是一致的。

打開(kāi)對(duì)話框界面如下所示：

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

關(guān)閉對(duì)話框界面如下所示:

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

一般情況下，我們彈出的對(duì)話框就是一個(gè)表單，可以執(zhí)行類似保存數(shù)據(jù)的提交操作的，因此需要對(duì)表單的數(shù)據(jù)進(jìn)行驗(yàn)證，如果有錯(cuò)誤，我們可能需要在界面上提醒，因此在頁(yè)面初始化的時(shí)候，需要初始化表單的驗(yàn)證規(guī)則，下面是我們常規(guī)的表單初始化操作。

//綁定相關(guān)事件
    function BindEvent() {
      //判斷表單的信息是否通過(guò)驗(yàn)證
      $("#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");
          //構(gòu)造參數(shù)發(fā)送給后臺(tái)
          var postData = $("#ffAdd").serializeArray();
          $.post(url, postData, function (json) {
            var data = $.parseJSON(json);
            if (data.Success) {
              //增加肖像的上傳處理
              $('#file-Portrait').fileinput('upload');
              //保存成功 1.關(guān)閉彈出層，2.刷新表格數(shù)據(jù)
              showTips("保存成功");
              Refresh();
            }
            else {
              showError("保存失敗:" + data.ErrorMessage, 3000);
            }
          }).error(function () {
            showTips("您未被授權(quán)使用該功能，請(qǐng)聯(lián)系管理員進(jìn)行處理。");
          });
        }
      });
    }

但是一般這些代碼都會(huì)重復(fù)很多，因此我們可以封裝函數(shù)的方式，重用部分代碼，從而使用更簡(jiǎn)潔的處理代碼，但同樣能達(dá)到目的。

 //綁定相關(guān)事件
    function BindEvent() {
      //添加、編輯記錄的窗體處理
      formValidate("ffAdd", function (form) {
        $("#add").modal("hide");
        //構(gòu)造參數(shù)發(fā)送給后臺(tái)
        var postData = $("#ffAdd").serializeArray();
        $.post(url, postData, function (json) {
          var data = $.parseJSON(json);
          if (data.Success) {
            //保存成功 1.關(guān)閉彈出層，2.刷新表格數(shù)據(jù)
            showTips("保存成功");
            Refresh();
          }
          else {
            showError("保存失敗:" + data.ErrorMessage, 3000);
          }
        }).error(function () {
          showTips("您未被授權(quán)使用該功能，請(qǐng)聯(lián)系管理員進(jìn)行處理。");
        });
      });
    }

2、刪除確認(rèn)的對(duì)話框處理

1）bootbox插件的使用

除了上面的常規(guī)對(duì)話框，我們還經(jīng)常碰到一種簡(jiǎn)潔的確認(rèn)對(duì)話框，雖然也可以使用上面的代碼來(lái)構(gòu)建一個(gè)確認(rèn)對(duì)話框，不過(guò)一般情況下不需要這么麻煩的，可以使用插件bootbox的確認(rèn)對(duì)話框來(lái)進(jìn)行處理。

Bootbox.js是一個(gè)小的JavaScript庫(kù)，它幫助您在使用bootstrap框架的時(shí)候快速的創(chuàng)建一個(gè)對(duì)話框，也可以幫您創(chuàng)建，管理或刪除任何所需的DOM元素或js事件處理程序。

bootbox.js使用三方法設(shè)計(jì)模仿他們的本地JavaScript一些方法。他們確切的方法簽名是靈活的每個(gè)可以采取各種參數(shù)定制標(biāo)簽和指定缺省值，但它們通常被稱為一樣：

bootbox.alert(message, callback)

bootbox.prompt(message, callback)

bootbox.confirm(message, callback)

唯一需要的參數(shù)是alert是 message; callback是必需的 confirm 和 prompt 調(diào)用以確定用戶的響應(yīng)。甚至當(dāng)調(diào)用警報(bào)回調(diào)是確定當(dāng)用戶駁回對(duì)話框由于我們的包裝方法不能不要塊像他們的母語(yǔ)是有用的：他們是異步而非同步。

這三種方法調(diào)用四分之一個(gè)公共方法，你也可以使用你自己的自定義對(duì)話框創(chuàng)建：

bootbox.dialog(options)

更多api幫助文檔請(qǐng)參見(jiàn)：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("您確認(rèn)刪除選定的記錄嗎？", function (result) {
          if (result) {
            //最后去掉最后的逗號(hào),
            ids = ids.substring(0, ids.length - 1);
            //然后發(fā)送異步請(qǐng)求的信息到后臺(tái)刪除數(shù)據(jù)
            var postData = { Ids: ids };
            $.get("/Province/DeletebyIds", postData, function (json) {
              var data = $.parseJSON(json);
              if (data.Success) {
                showTips("刪除選定的記錄成功");
                Refresh();//刷新頁(yè)面數(shù)據(jù)
              }
              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的風(fēng)格，不過(guò)界面略顯單調(diào)。上面的效果不是我很喜歡這種風(fēng)格，我遇到一個(gè)看起來(lái)更加美觀的效果，如下所示。

這個(gè)效果是引入插件sweetalert（http://t4t5.github.io/sweetalert/）實(shí)現(xiàn)的。

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

上面的界面效果類似的實(shí)現(xiàn)代碼如下所示：

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

3、信息提示框的處理

上面兩種處理，都是利用彈出對(duì)話框進(jìn)行實(shí)現(xiàn)的，而且對(duì)界面有阻塞的，一般情況下，我們做信息提示效果，希望它不要影響我們進(jìn)一步的操作，或者至少提供一個(gè)很短的自動(dòng)消失效果。

那么這里我們就來(lái)介紹下jNotify插件和toastr插件了。

1）jNotify提示框的使用

jNotify提示框，一款優(yōu)秀的jQuery結(jié)果提示框插件。我們?cè)谔峤槐韱魏?，通過(guò)Ajax響應(yīng)后臺(tái)返回結(jié)果，并在前臺(tái)顯示返回信息，jNotify能非常優(yōu)雅的顯示操作結(jié)果信息。jNotify是一款基于jQuery的信息提示插件，它支持操作成功、操作失敗和操作提醒三種信息提示方式。jNotify瀏覽器兼容性非常好，支持更改提示內(nèi)容，支持定位提示框的位置，可配置插件參數(shù)。

jSuccess(message,{option});
jError("操作失敗，請(qǐng)重試!!");
jNotify("注意：請(qǐng)完善你的<strong>個(gè)人資料！</strong>");

jNotify的參數(shù)詳細(xì)配置：

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

下面是我在腳本類里面封裝的餓公用方法，用來(lái)實(shí)現(xiàn)提示效果的顯示的。

//顯示錯(cuò)誤或提示信息（需要引用jNotify相關(guān)文件）
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 !');
     }
   }
  );
}

這樣我們?cè)谑褂肁jax的POST方法的時(shí)候，我們可以根據(jù)不同的需要進(jìn)行提示。

  var postData = $("#ffAdd").serializeArray();
          $.post(url, postData, function (json) {
            var data = $.parseJSON(json);
            if (data.Success) {
              //增加肖像的上傳處理
              $('#file-Portrait').fileinput('upload');
              //保存成功 1.關(guān)閉彈出層，2.刷新表格數(shù)據(jù)
              showTips("保存成功");
              Refresh();
            }
            else {
              showError("保存失敗:" + data.ErrorMessage, 3000);
            }
          }).error(function () {
            showTips("您未被授權(quán)使用該功能，請(qǐng)聯(lián)系管理員進(jìn)行處理。");
          });

2）toastr插件的使用

toastr是一個(gè)Javascript庫(kù)用于創(chuàng)建Gnome/Growl風(fēng)格，非阻塞的頁(yè)面消息提醒。，toastr可設(shè)定四種通知模式：成功，出錯(cuò)，警告，提示，而提示窗口的位置，動(dòng)畫效果都可以通過(guò)能數(shù)來(lái)設(shè)置，在官方站可以通過(guò)勾選參數(shù)來(lái)生成JS，非常的方便使用。

插件地址是：http://codeseven.github.io/toastr/

它可以分別創(chuàng)建如下幾種效果：警告、危險(xiǎn)、成功、提示的對(duì)話框信息，效果如下所示。

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

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

這個(gè)插件的參數(shù)定義說(shuō)明如下所示。

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

以上就是我在項(xiàng)目里面，對(duì)對(duì)話框及提示框的處理和優(yōu)化的經(jīng)驗(yàn)總結(jié)，希望對(duì)大家學(xué)習(xí)改進(jìn)Web界面有幫助。如果大家想了解更多資訊敬請(qǐng)關(guān)注腳本之家網(wǎng)站！

您可能感興趣的文章: