基於Metronic的Bootstrap開發框架經驗總結(15)-- 更新使用Metronic 4.75版本
在基於Metronic的Bootstrap開發框架中,一直都希望整合較新、較好的前端技術,結合MVC的後端技術進行專案的開發,隨著時間的推移,目前Metronic也更新到了4.75版本,因此著手對這個版本的內容進行一次更新調整,以期達到與時俱進的目的。從最近這幾個版本來看,Metronic本身的目錄結構以及功能沒有太多的變化,但增加了一些較為方便的功能,本篇隨筆對比它們進行介紹。
1、Metronic版本更新
首先我們來對空白頁面進行不同版本的對比,檔案的對比首選Beyond Compare,兩個版本檔案一對比,差異一目瞭然。
從對比差異內容中可以看到,新版本的JS、CSS目錄結構沒有變化,不過增加了幾個功能頁面,如下所示。
ui_metronic_grid.html、ui_sweetalert.html、components_bootstrap_multiselect_dropdown.html、components_clipboard.html、form_repeater.html、page_general_pricing_2.html,這幾個頁面的內容如下所示。
其中ui_metronic_grid.html主要是介紹Bootstrap柵格的各種使用方法。
ui_sweetalert.html頁面這是整合了一個非常美觀的彈出對話方塊控制元件,如下所示。
components_bootstrap_multiselect_dropdown.html則是介紹下拉列表多選的一個新元件實現。
components_clipboard.html則是介紹使用貼上複製的基本操作,方便在頁面中使用對控制元件、選定內容進行剪下板的處理。
另外增加了一個快速導航選單的東西,頁面程式碼增加如下部分,
頁面右側增加的導航選單
展開後效果如下所示。
2、框架外掛的更新調整
隨著這個Metronic的模板的調整,同時也使用了各個新版本的外掛,因此也同時需要對這些外掛的使用進行一個調整。
1)Select2外掛的調整
其中賦值部分原來為:
$("#CustomerType").select2("val", info.CustomerType);
新版本統一了賦值的操作,和常規的控制元件賦值程式碼保持一致,變更如下。
$("#CustomerType").val(info.CustomerType).trigger('change');
如果涉及下拉列表聯動的話,程式碼還是不變:
$("#City").trigger('change');//聯動
初始化Select2的程式碼也需要進行一定的微調,如下所示。
var control = $('#' + ctrlName); //設定Select2的處理 control.select2({ placeholder: "選擇" + dictTypeName, //設定顯示佔位符 allowClear: true, escapeMarkup: function (markup) { return markup; }, templateResult: formatResult, templateSelection: formatSelection, width: '100% !important', //設定自動適應的寬度 });
2)SweetAlert對話方塊
這個在Metronic的早一點版本是沒有的,我在隨筆《基於Metronic的Bootstrap開發框架經驗總結(6)--對話方塊及提示框的處理和優化》介紹單獨採用這個外掛來做刪除確認的操作的,目前這個版本已經整合在Metronic裡面了,那麼我們就直接引用它的即可了。
調整CSS和JS的引用地址,使用程式碼完全一樣,就完成了這個SweetAlert對話方塊的更新處理了。
//刪除操作的確認 function showDelete(delFunction, tips) { var newtips = arguments[1] || "您確認刪除選定的記錄嗎?" var result = false; swal({ title: "操作提示", text: newtips, type: "warning", showCancelButton: true, //confirmButtonColor: "#DD6B55", confirmButtonClass: "btn-danger", cancelButtonText: "取消", confirmButtonText: "是的,執行刪除!", closeOnConfirm: true }, function () { delFunction(); }); return result; }
相關主題文章如下所示:
相關推薦
基於Metronic的Bootstrap開發框架經驗總結(15)-- 更新使用Metronic 4.75版本
在基於Metronic的Bootstrap開發框架中,一直都希望整合較新、較好的前端技術,結合MVC的後端技術進行專案的開發,隨著時間的推移,目前Metronic也更新到了4.75版本,因此著手對這個版本的內容進行一次更新調整,以期達到與時俱進的目的。從最近這幾個版本來看,Metronic本身的目錄結構以及功
(轉)基於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開發框架經驗總結(2)- 使用EasyUI的樹控件構建Web界面
set 應用 get ember trim ase str zab ble http://www.cnblogs.com/wuhuacong/p/3669575.html 最近花了不少時間在重構和進一步提煉我的Web開發框架上,力求在用戶體驗和界面設計方面,和Winfor
(轉)基於MVC4+EasyUI的Web開發框架經驗總結(6)--在頁面中應用下拉列表的處理
ica new web開發 don ext images 如果 bob 獲取 http://www.cnblogs.com/wuhuacong/p/3840321.html 在很多Web界面中,我們都可以看到很多下拉列表的元素,有些是固定的,有些是動態的;有些是字典內容,
(轉)基於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開發框架經驗總結(1)-框架總覽及選單模組的處理
最近一直很多事情,部落格停下來好久沒寫了,整理下思路,把最近研究的基於Metronic的Bootstrap開發框架進行經驗的總結出來和大家分享下,同時也記錄自己對Bootstrap開發的學習研究的點點滴滴,希望在開一個《基於MVC4+EasyUI的Web開發框架經驗總結》的系列文章,逐步介紹這個響應式框架的點
基於Metronic的Bootstrap開發框架經驗總結(6)--對話方塊及提示框的處理和優化
在各種Web開發過程中,對話方塊和提示框的處理是很常見的一種介面處理技術,用得好,可以給使用者很好的頁面體驗,Bootstrap開發也一樣,我們往往在頁面新增、編輯、檢視詳細等介面使用彈出對話方塊層的方式進行顯示資料,刪除則可能使用一個提示確認框,如果操作成功,我們可以使用更豐富的提示框來處理,本篇主要對比說
基於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開發框架經驗總結(2)- 使用EasyUI的樹控制元件構建Web介面
最近花了不少時間在重構和進一步提煉我的Web開發框架上,力求在使用者體驗和介面設計方面,和Winform開發框架保持一致,而在Web上,我主要採用EasyUI的前端介面處理技術,走MVC的技術路線,在重構完善過程中,很多細節花費不少時間進行研究和提煉,一步步走過來,也積累了不少經驗,本系列將主要介紹我在進一步
基於MVC4+EasyUI的Web開發框架經驗總結(7)--實現省份、城市、行政區三者聯動
為了提高客戶體驗和進行一些技術探索,現在正準備把我自己的客戶關係管理系統CRM在做一個Web的版本,因此對基於MVC的Web介面繼續進行一些研究和優化,力求在功能和介面上保持和Winform一致,本文主要介紹在我的CRM系統中用到的全國省份、城市、行政區三者的兩種效果,在Winform上實現沒問題,在Web上
基於Metronic的Bootstrap開發框架經驗總結(9)--實現Web頁面內容的列印預覽和儲存操作
在前面介紹了很多篇相關的《Bootstrap開發框架》的系列文章,這些內容基本上覆蓋到了我這個Bootstrap框架的各個主要方面的內容,總體來說基本達到了一個穩定的狀態,隨著時間的推移可以會引入一些更好更新的內容進行完善,本篇繼續這個系列,主要介紹如何實現Web頁面內容的列印預覽和儲存操作。 1、Web頁
基於Metronic的Bootstrap開發框架經驗總結(8)--框架功能總體介面介紹
在前面介紹了一系列的《基於Metronic的Bootstrap開發框架經驗總結》的隨筆文章,隨筆主要是介紹各個知識點的內容,對框架的總體性介面沒有很好的闡述,本篇隨筆主要介紹這個Bootstrap框架的總體性功能介面,介紹其中用到的知識點和整體性的介面。希望讀者對框架有一個更加直觀、真實的認識瞭解,介面設計以
基於Metronic的Bootstrap開發框架經驗總結(16)-- 使用外掛bootstrap-table實現表格記錄的查詢、分頁、排序等處理
在業務系統開發中,對錶格記錄的查詢、分頁、排序等處理是非常常見的,在Web開發中,可以採用很多功能強大的外掛來滿足要求,且能極大的提高開發效率,本隨筆介紹這個bootstrap-table是一款非常有名的開源表格外掛,在很多專案中廣泛的應用。Bootstrap-table外掛提供了非常豐富的屬性設定,可以實現