国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開(kāi)APP
userphoto
未登錄

開(kāi)通VIP,暢享免費(fèi)電子書(shū)等14項(xiàng)超值服

開(kāi)通VIP
基于Metronic的Bootstrap開(kāi)發(fā)框架經(jīng)驗(yàn)總結(jié)(15)-- 更新使用Metronic 4.75版本

在基于Metronic的Bootstrap開(kāi)發(fā)框架中,一直都希望整合較新、較好的前端技術(shù),結(jié)合MVC的后端技術(shù)進(jìn)行項(xiàng)目的開(kāi)發(fā),隨著時(shí)間的推移,目前Metronic也更新到了4.75版本,因此著手對(duì)這個(gè)版本的內(nèi)容進(jìn)行一次更新調(diào)整,以期達(dá)到與時(shí)俱進(jìn)的目的。從最近這幾個(gè)版本來(lái)看,Metronic本身的目錄結(jié)構(gòu)以及功能沒(méi)有太多的變化,但增加了一些較為方便的功能,本篇隨筆對(duì)比它們進(jìn)行介紹。

1、Metronic版本更新

首先我們來(lái)對(duì)空白頁(yè)面進(jìn)行不同版本的對(duì)比,文件的對(duì)比首選Beyond Compare,兩個(gè)版本文件一對(duì)比,差異一目了然。

從對(duì)比差異內(nèi)容中可以看到,新版本的JS、CSS目錄結(jié)構(gòu)沒(méi)有變化,不過(guò)增加了幾個(gè)功能頁(yè)面,如下所示。

ui_metronic_grid.html、ui_sweetalert.html、components_bootstrap_multiselect_dropdown.html、components_clipboard.html、form_repeater.html、page_general_pricing_2.html,這幾個(gè)頁(yè)面的內(nèi)容如下所示。

 其中ui_metronic_grid.html主要是介紹Bootstrap柵格的各種使用方法。

ui_sweetalert.html頁(yè)面這是整合了一個(gè)非常美觀的彈出對(duì)話框控件,如下所示。

 components_bootstrap_multiselect_dropdown.html則是介紹下拉列表多選的一個(gè)新組件實(shí)現(xiàn)。

components_clipboard.html則是介紹使用粘貼復(fù)制的基本操作,方便在頁(yè)面中使用對(duì)控件、選定內(nèi)容進(jìn)行剪切板的處理。

 

另外增加了一個(gè)快速導(dǎo)航菜單的東西,頁(yè)面代碼增加如下部分,

頁(yè)面右側(cè)增加的導(dǎo)航菜單

展開(kāi)后效果如下所示。

 

 

2、框架插件的更新調(diào)整

隨著這個(gè)Metronic的模板的調(diào)整,同時(shí)也使用了各個(gè)新版本的插件,因此也同時(shí)需要對(duì)這些插件的使用進(jìn)行一個(gè)調(diào)整。

1)Select2插件的調(diào)整

這個(gè)插件是基于Select的擴(kuò)展插件,能夠提供更加豐富的功能和用戶體驗(yàn),它的github官網(wǎng)地址為:https://select2.github.io/,具體的使用案例,可以參考地址:https://select2.github.io/examples.html

以Select2插件的更新為例,原來(lái)我在隨筆《基于Metronic的Bootstrap開(kāi)發(fā)框架經(jīng)驗(yàn)總結(jié)(3)--下拉列表Select2插件的使用》中對(duì)它進(jìn)行了介紹,如下所示,很多下拉列表都使用這個(gè)Select2的插件進(jìn)行展示,比較方便美觀。

其中賦值部分原來(lái)為:

 $("#CustomerType").select2("val", info.CustomerType);

新版本統(tǒng)一了賦值的操作,和常規(guī)的控件賦值代碼保持一致,變更如下。

$("#CustomerType").val(info.CustomerType).trigger('change');

如果涉及下拉列表聯(lián)動(dòng)的話,代碼還是不變:

$("#City").trigger('change');//聯(lián)動(dòng)

初始化Select2的代碼也需要進(jìn)行一定的微調(diào),如下所示。

    var control = $('#' + ctrlName);    //設(shè)置Select2的處理    control.select2({        placeholder: "選擇" + dictTypeName, //設(shè)置顯示占位符        allowClear: true,        escapeMarkup: function (markup) { return markup; },        templateResult: formatResult,        templateSelection: formatSelection,        width: '100% !important', //設(shè)置自動(dòng)適應(yīng)的寬度    });

 

2)SweetAlert對(duì)話框

這個(gè)在Metronic的早一點(diǎn)版本是沒(méi)有的,我在隨筆《基于Metronic的Bootstrap開(kāi)發(fā)框架經(jīng)驗(yàn)總結(jié)(6)--對(duì)話框及提示框的處理和優(yōu)化》介紹單獨(dú)采用這個(gè)插件來(lái)做刪除確認(rèn)的操作的,目前這個(gè)版本已經(jīng)整合在Metronic里面了,那么我們就直接引用它的即可了。

插件的地址是:http://lipis.github.io/bootstrap-sweetalert/

調(diào)整CSS和JS的引用地址,使用代碼完全一樣,就完成了這個(gè)SweetAlert對(duì)話框的更新處理了。

//刪除操作的確認(rèn)function showDelete(delFunction, tips) {    var newtips = arguments[1] || "您確認(rèn)刪除選定的記錄嗎?"    var result = false;    swal({        title: "操作提示",        text: newtips,        type: "warning", showCancelButton: true,        //confirmButtonColor: "#DD6B55",        confirmButtonClass: "btn-danger",        cancelButtonText: "取消",        confirmButtonText: "是的,執(zhí)行刪除!",        closeOnConfirm: true    }, function () {        delFunction();    });    return result;}

 

 相關(guān)主題文章如下所示:

從開(kāi)發(fā)框架提高開(kāi)發(fā)效率說(shuō)起 

基于Metronic的Bootstrap開(kāi)發(fā)框架經(jīng)驗(yàn)總結(jié)(14)--條碼和二維碼的生成及打印處理

基于Metronic的Bootstrap開(kāi)發(fā)框架經(jīng)驗(yàn)總結(jié)(13)--頁(yè)面鏈接收藏夾功能的實(shí)現(xiàn)2

基于Metronic的Bootstrap開(kāi)發(fā)框架經(jīng)驗(yàn)總結(jié)(12)--頁(yè)面鏈接收藏夾功能的實(shí)現(xiàn)

基于Metronic的Bootstrap開(kāi)發(fā)框架經(jīng)驗(yàn)總結(jié)(11)--頁(yè)面菜單的幾種呈現(xiàn)方式 

基于Metronic的Bootstrap開(kāi)發(fā)框架經(jīng)驗(yàn)總結(jié)(10)--優(yōu)化Bootstrap圖標(biāo)管理 

在MVC控制器里面使用dynamic和ExpandoObject,實(shí)現(xiàn)數(shù)據(jù)轉(zhuǎn)義的輸出

基于Metronic的Bootstrap開(kāi)發(fā)框架經(jīng)驗(yàn)總結(jié)(9)--實(shí)現(xiàn)Web頁(yè)面內(nèi)容的打印預(yù)覽和保存操作

基于Metronic的Bootstrap開(kāi)發(fā)框架經(jīng)驗(yàn)總結(jié)(8)--框架功能總體界面介紹

基于Metronic的Bootstrap開(kāi)發(fā)框架經(jīng)驗(yàn)總結(jié)(7)--數(shù)據(jù)的導(dǎo)入、導(dǎo)出及附件的查看處理 

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

基于Metronic的Bootstrap開(kāi)發(fā)框架經(jīng)驗(yàn)總結(jié)(5)--Bootstrap文件上傳插件File Input的使用

基于Metronic的Bootstrap開(kāi)發(fā)框架經(jīng)驗(yàn)總結(jié)(4)--Bootstrap圖標(biāo)的提取和利用

基于Metronic的Bootstrap開(kāi)發(fā)框架經(jīng)驗(yàn)總結(jié)(3)--下拉列表Select2插件的使用 

基于Metronic的Bootstrap開(kāi)發(fā)框架經(jīng)驗(yàn)總結(jié)(2)--列表分頁(yè)處理和插件JSTree的使用

基于Metronic的Bootstrap開(kāi)發(fā)框架經(jīng)驗(yàn)總結(jié)(1)-框架總覽及菜單模塊的處理 

本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)。
打開(kāi)APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
基于Metronic的Bootstrap開(kāi)發(fā)框架經(jīng)驗(yàn)總結(jié)(1)-框架總覽及菜單模塊的處理
后臺(tái)管理UI的選擇
B
基于Metronic的Bootstrap開(kāi)發(fā)框架經(jīng)驗(yàn)總結(jié)(10)
Metronic干貨系列-介紹和目錄結(jié)構(gòu)
Bootstrap 5 入門(mén)教程
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服