基於Metronic的Bootstrap開發框架經驗總結(6)--對話方塊及提示框的處理和優化
在各種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)
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)sweetalert外掛的使用
雖然上面的效果非常符合Bootstrap的風格,不過介面略顯單調。上面的效果不是我很喜歡這種風格,我遇到一個看起來更加美觀的效果,如下所示。
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, right VerticalPosition : "bottom", // 垂直位置:top, center, bottom ShowOverlay : 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,非常的方便使用。
它可以分別建立如下幾種效果:警告、危險、成功、提示的對話方塊資訊,效果如下所示。
它的使用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介面有幫助。
如果有興趣,可以繼續參考系列文章:
如果有興趣,可以繼續參考系列文章:
相關推薦
基於Metronic的Bootstrap開發框架經驗總結(6)--對話方塊及提示框的處理和優化
在各種Web開發過程中,對話方塊和提示框的處理是很常見的一種介面處理技術,用得好,可以給使用者很好的頁面體驗,Bootstrap開發也一樣,我們往往在頁面新增、編輯、檢視詳細等介面使用彈出對話方塊層的方式進行顯示資料,刪除則可能使用一個提示確認框,如果操作成功,我們可以使用更豐富的提示框來處理,本篇主要對比說
(轉)基於MVC4+EasyUI的Web開發框架經驗總結(6)--在頁面中應用下拉列表的處理
ica new web開發 don ext images 如果 bob 獲取 http://www.cnblogs.com/wuhuacong/p/3840321.html 在很多Web界面中,我們都可以看到很多下拉列表的元素,有些是固定的,有些是動態的;有些是字典內容,
基於MVC4+EasyUI的Web開發框架經驗總結(6)--在頁面中應用下拉列表的處理
在很多Web介面中,我們都可以看到很多下拉列表的元素,有些是固定的,有些是動態的;有些是字典內容,有些是其他表裡面的名稱欄位;有時候引用的是外來鍵ID,有時候引用的是名稱文字內容;正確快速使用下拉列表的處理,可以提高我們程式介面的美觀性和友好型,本文主要介紹在我的Web開發框架以及相關的擴充套件Web應用中用
(轉)基於MVC4+EasyUI的Web開發框架經驗總結(5)--使用HTML編輯控件CKEditor和CKFinder
err config 兩個 腳本 web開發 upload asp 正常 初始 http://www.cnblogs.com/wuhuacong/p/3780356.html Web開發上有很多HTML的編輯控件,如CKEditor、kindeditor等等,很多都做的很
基於MVC4+EasyUI的Web開發框架經驗總結(5)--使用HTML編輯控制元件CKEditor和CKFinder
Web開發上有很多HTML的編輯控制元件,如CKEditor、kindeditor等等,很多都做的很好,本文主要介紹在MVC介面裡面,CKEditor的配置和使用。CKEditor的前身是FCKEditor,隨著它的更新,上傳圖片的功能被分離出去了,現在如果需要實現上傳圖片,要麼自己寫程式碼或者採用其他上傳控
(轉)基於MVC4+EasyUI的Web開發框架經驗總結(2)- 使用EasyUI的樹控件構建Web界面
set 應用 get ember trim ase str zab ble http://www.cnblogs.com/wuhuacong/p/3669575.html 最近花了不少時間在重構和進一步提煉我的Web開發框架上,力求在用戶體驗和界面設計方面,和Winfor
(轉)基於MVC4+EasyUI的Web開發框架經驗總結(8)--實現Office文檔的預覽
討論 off info code .cn viewer 存在 nco app http://www.cnblogs.com/wuhuacong/p/3871991.html 基於MVC4+EasyUI的Web開發框架經驗總結(8)--實現Office文檔的預覽
基於Metronic的Bootstrap開發框架經驗總結(17)-- 使用 summernote插件實現HTML文檔的編輯和圖片插入操作
系統 cat 寫入 視頻 編寫 查看 absolute upload form 在很多場合,我們需要在線編輯HTML內容,然後在頁面上或者其他終端上(如小程序、APP應用等)顯示,編輯HTML內容的插件有很多,本篇介紹基於Bootstrap的 summernote插件實現H
基於Metronic的Bootstrap開發框架經驗總結(18)-- 在代碼生成工具Database2Sharp中集成對Bootstrap-table插件的分頁及排序支持
關註 基礎 表頭 數據 database 一定的 處理 tree的使用 適合 在我們開發系統界面,包括Web和Winform的都一樣,主要的界面就是列表展示主界面,編輯查看界面,以及一些輔助性的如導入界面,選擇界面等,其中列表展示主界面是綜合性的數據展示界面,一般往往需要對
基於MVC4+EasyUI的Web開發框架經驗總結(1)-利用jQuery Tags Input 外掛顯示選擇記錄
最近花了不少時間在重構和進一步提煉我的Web開發框架上,力求在使用者體驗和介面設計方面,和Winform開發框架保持一致,而在Web上,我主要採用EasyUI的前端介面處理技術,走MVC的技術路線,在重構完善過程中,很多細節花費不少時間進行研究和提煉,一步步走過來,也積累了不
基於Metronic的Bootstrap開發框架經驗總結(5)--Bootstrap檔案上傳外掛File Input的使用
Bootstrap檔案上傳外掛File Input是一個不錯的檔案上傳控制元件,但是搜尋使用到的案例不多,使用的時候,也是一步一個腳印一樣摸著石頭過河,這個控制元件在介面呈現上,叫我之前使用過的Uploadify 好看一些,功能也強大些,本文主要基於我自己的框架程式碼案例,介紹其中檔案上傳外掛File Inp
基於Metronic的Bootstrap開發框架經驗總結(4)--Bootstrap圖示的提取和利用
在前面的一篇隨筆《基於Metronic的Bootstrap開發框架經驗總結(1)-框架總覽及選單模組的處理》介紹了選單模組的處理,主要介紹如何動態從資料庫裡面獲取記錄並構建選單列表。其中選單資訊的圖示樣式,也是從資料庫裡面獲取的,因此要求我們能夠動態取得Bootstrap裡面的各種圖示定義了。本篇主要介紹如何
基於Metronic的Bootstrap開發框架經驗總結(1)-框架總覽及選單模組的處理
最近一直很多事情,部落格停下來好久沒寫了,整理下思路,把最近研究的基於Metronic的Bootstrap開發框架進行經驗的總結出來和大家分享下,同時也記錄自己對Bootstrap開發的學習研究的點點滴滴,希望在開一個《基於MVC4+EasyUI的Web開發框架經驗總結》的系列文章,逐步介紹這個響應式框架的點
基於Metronic的Bootstrap開發框架經驗總結(2)--列表分頁處理和外掛JSTree的使用
在上篇《基於Metronic的Bootstrap開發框架經驗總結(1)-框架總覽及選單模組的處理》介紹了Bootstrap開發框架的一些基礎性概括,包括總體介面效果,以及佈局、選單等內容,本篇繼續這一主題,介紹頁面內容常用到的資料分頁處理,以及Bootstrap外掛JSTree的使用。在資料的介面顯示當中,表
基於MVC4+EasyUI的Web開發框架經驗總結(3)- 使用Json實體類構建選單資料
最近花了不少時間在重構和進一步提煉我的Web開發框架上,力求在使用者體驗和介面設計方面,和Winform開發框架保持一致,而在Web上,我主要採用EasyUI的前端介面處理技術,走MVC的技術路線,在重構完善過程中,很多細節花費不少時間進行研究和提煉,一步步走過來,也積累了不少經驗,本系列將主要介紹我在進一步
基於MVC4+EasyUI的Web開發框架經驗總結(13)--DataGrid控制元件實現自動適應寬頻高度
在預設情況下,EasyUI的DataGrid好像都沒有具備自動寬度的適應功能,一般是指定畫素寬度的,但是使用的人員計算機的螢幕解析度可能不一樣,因此導致有些地方顯示太大或者太小,總是不能達到好的預期效果,如果DataGrid能夠根據視窗尺寸進行伸縮,效果應該好很多。本文主要介紹DataGrid控制元件實現自動
基於Metronic的Bootstrap開發框架經驗總結(3)--下拉列表Select2外掛的使用
在上篇《基於Metronic的Bootstrap開發框架經驗總結(2)--列表分頁處理和外掛JSTree的使用》介紹了資料的分頁處理,使用了Bootstrap Paginator外掛,另外對樹形列表,採用了JSTree外掛,本篇繼續介紹在編輯頁面中常用到的控制元件Select2,這個控制元件可以更加豐富傳統的
基於MVC4+EasyUI的Web開發框架經驗總結(4)--使用圖表控制元件Highcharts
在我們做各種應用的時候,我們可能都會使用到圖表統計,以前接觸過一些不同的圖表控制元件,在無意中發現了圖表控制元件Highcharts,其強大的功能和豐富的互動效果,令人難以忘懷。本篇主要介紹在Web開發中使用圖表控制元件Highcharts,以及對其進行統一漢化等操作,讓我們的程式功能更加豐富,內容更加美觀。
基於MVC4+EasyUI的Web開發框架經驗總結(2)- 使用EasyUI的樹控制元件構建Web介面
最近花了不少時間在重構和進一步提煉我的Web開發框架上,力求在使用者體驗和介面設計方面,和Winform開發框架保持一致,而在Web上,我主要採用EasyUI的前端介面處理技術,走MVC的技術路線,在重構完善過程中,很多細節花費不少時間進行研究和提煉,一步步走過來,也積累了不少經驗,本系列將主要介紹我在進一步
基於MVC4+EasyUI的Web開發框架經驗總結(7)--實現省份、城市、行政區三者聯動
為了提高客戶體驗和進行一些技術探索,現在正準備把我自己的客戶關係管理系統CRM在做一個Web的版本,因此對基於MVC的Web介面繼續進行一些研究和優化,力求在功能和介面上保持和Winform一致,本文主要介紹在我的CRM系統中用到的全國省份、城市、行政區三者的兩種效果,在Winform上實現沒問題,在Web上