基于BootStrap Metronic開發(fā)框架經(jīng)驗小結(jié)【四】Bootstrap圖標的提取和利用
在前面的一篇隨筆基于BootStrap Metronic開發(fā)框架經(jīng)驗小結(jié)【一】框架總覽及菜單模塊的處理,介紹了菜單模塊的處理，主要介紹如何動態(tài)從數(shù)據(jù)庫里面獲取記錄并構(gòu)建菜單列表。其中菜單信息的圖標樣式，也是從數(shù)據(jù)庫里面獲取的，因此要求我們能夠動態(tài)取得Bootstrap里面的各種圖標定義了。本篇主要介紹如何提取Bootstrap的圖標信息，存儲到數(shù)據(jù)庫里面為我所用。
1、菜單的顯示及各種Bootstrap圖標
我們從下圖可以看到，為了菜單的美觀，每個菜單項（這里分了三級菜單）都有一個圖標，雖然大小不同，我們利用Bootstrap的圖標，都是從Bootstrap圖標庫里面的內(nèi)容。
Bootstrap圖標庫里面分為了三類內(nèi)容：
Font Awesome：Bootstrap專用圖標字體，F(xiàn)ont Awesome 中包含的所有圖標都是矢量的，也就可以任意縮放，避免了一個圖標做多種尺寸的麻煩。CSS對字體可以設(shè)置的樣式也同樣能夠運用到這些圖標上了。
如下面是部分Font Awesome 的圖標：
Simple Icons：收集眾多網(wǎng)站的Logo，并提供高質(zhì)量、不同尺寸的png格式圖片給廣大網(wǎng)友，所有Icon版權(quán)歸其所屬公司。
如下面所示是Simple Icons的部分圖標：
Glyphicons:包括200個符號字體格式圖表集合，由Glyphicons提供，Glyphicons Halflings 一般是收費的，但是經(jīng)過Bootstrap和Glyphicons作者之間的協(xié)商，允許開發(fā)人員不需要支付費用即可使用。
如下是部分Glyphicons內(nèi)容：
利用這幾種圖標內(nèi)容，我們引入下面幾種樣式就可以了。
<link href="/Content/metronic/font-awesome/css/font-awesome.min.css" rel="stylesheet"/> <link href="/Content/metronic/simple-line-icons/simple-line-icons.min.css" rel="stylesheet"/> <link href="/Content/metronic/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
這幾種圖標，都是支持各種Bootstrap的主題化顯示的，如下面幾種效果所示。
或者也可以把圖標變大一些：
2、各種Bootstrap的圖標的提取
我們通過上面的介紹，估計對這幾種Bootstrap的圖標有了一定的了解，但是我們?nèi)绻軌蛟诓藛尉庉嬂锩孢x擇圖標，那么我們還是需要把這些信息提取到數(shù)據(jù)庫里面，然后展示出來給我進行選擇的，否則無法做到動態(tài)配置。
如上面的編輯界面，對菜單的Web圖標提供了動態(tài)的選擇，那么我們?nèi)绻麛?shù)據(jù)庫里面記錄了上面幾種圖標的集合，那么我們就可以把它在界面進行展示，并可以從中選擇合適的圖表了。
根據(jù)上面的幾個樣式文件，我們分析一下，如對于font-awesome.min.css的文件內(nèi)容，它對于圖標定義部分如下所示。
而對于simple-line-icons來說，它的樣式定義也差不多，如下所示。
對于Glyphicons來說，它的樣式定義也是很類似的，如下所示。
根據(jù)這幾種信息，我們就可以通過正則表達式匹配的方式，把我們所需要的信息提取出來，并存儲在數(shù)據(jù)庫里面即可實現(xiàn)圖標動態(tài)顯示和選擇的第一步了。
例如，我們定義部分變量和正則表達式來處理這些文件內(nèi)容：
string regex = "^\\.(?<name>.*?):before\\s*\\{";
List<string> filePathList = new List<string>()
{
"~/Content/themes/metronic/assets/global/plugins/bootstrap/css/bootstrap.css",
"~/Content/themes/metronic/assets/global/plugins/font-awesome/css/font-awesome.css",
"~/Content/themes/metronic/assets/global/plugins/simple-line-icons/simple-line-icons.css",
};
然后通過讀取文件內(nèi)容，并進行匹配記錄獲取即可提取出來集合內(nèi)容了。
string content = FileUtil.FileToString(realPath); List<string> matchList = CRegex.GetList(content, regex, 1);
最后我們把這些信息保存到數(shù)據(jù)庫表里面即可。
BootstrapIconInfo info = new BootstrapIconInfo()
{
DisplayName = item,
ClassName = prefix + item,
CreateTime = DateTime.Now,
SourceType = sourceType,
};
BLLFactory<BootstrapIcon>.Instance.Insert(info);
最后記錄存儲在數(shù)據(jù)庫里面，效果如下所示，里面已經(jīng)記錄我們所需的圖標信息了，這樣在實際使用的時候，就可以利用各個字段的信息，顯示出好看的界面了。
3、Bootstrap的圖標顯示和選擇
我們通過文件讀取并以正則表達式提取出內(nèi)容，然后保存到數(shù)據(jù)庫后，這些圖標信息就可以為我們使用了，可以在頁面里面分類顯示出來，每類的圖標進行分頁處理，方便查詢，如下所示。
這部分的顯示頁面代碼和常規(guī)的數(shù)據(jù)顯示差不多的，只是不需要表頭信息而已，我們來看看頁面代碼如下所示。
<div class="portlet box green-meadow">
<div class="portlet-title">
<div class="caption"> <i class="fa fa-filter"></i>
圖標信息
</div>
</div>
<div class="portlet-body flip-scroll">
<div>
<span>每頁顯示</span>
<select id="rows" onchange="ChangeRows()">
<option>50</option>
<option selected>100</option>
<option>200</option>
<option>1000</option>
</select>
<span>條記錄</span>
<span>共有記錄：</span><span id='totalCount' class="label label-success">0</span>條，總頁數(shù)：<span id='totalPageCount' class="label label-success">0</span>頁。
</div>
<hr />
<div class="row" style="padding-left:20px">
<div class="portlet-body" id="grid_body"></div>
<div class="paging-toolbar">
<ul id='grid_paging'></ul>
</div>
</div>
</div>
</div>
其中主要的圖標顯示內(nèi)容在上面這部分的HTML里面。
<div class="portlet-body" id="grid_body"></div>
動態(tài)獲取并生成HTML代碼顯示在界面上的處理腳本如下所示。
$.getJSON(iconUrl + "&" + condition, function (data) {
$("#icon_body").html("");
$.each(data.rows, function (i, item) {
var tr = "<a href=\"javascript:;\" onclick=\"GetIcon('" + item.ClassName + "')\" class=\"icon-btn\" title=\"" + item.DisplayName + "\">";
tr += " <i class=\"" + item.ClassName + " \" style=\"font-size: 2.2em\"></i>";//
//tr += "<div>" + item.DisplayName + "</div>";
tr += "</a>";
$("#icon_body").append(tr);
});
用戶選擇對應(yīng)的圖標后，我們可以通過腳本設(shè)置Span的樣式就可以顯示出來我們選中的圖標了，如下所示。
$("#i_WebIcon").attr("class", classname);
當然我們選擇圖標的時候，提供一個彈出的對話框顯示分類不同的圖標，讓用戶選擇后返回即可。
這樣我們就完成了，從圖標文件里面提取不同類型的圖表，然后存儲在數(shù)據(jù)庫里面，并在頁面里面顯示出來，可供我們動態(tài)選擇和設(shè)置了。
以上所述是小編給大家介紹的基于BootStrap Metronic開發(fā)框架經(jīng)驗小結(jié)【四】Bootstrap圖標的提取和利用 的相關(guān)知識，希望對大家有所幫助，如果大家想了解更多資訊，敬請關(guān)注腳本之家網(wǎng)站！
- Bootstrap Metronic完全響應(yīng)式管理模板之菜單欄學習筆記
- 基于BootStrap Metronic開發(fā)框架經(jīng)驗小結(jié)【七】數(shù)據(jù)的導入、導出及附件的查看處理
- 基于BootStrap Metronic開發(fā)框架經(jīng)驗小結(jié)【六】對話框及提示框的處理和優(yōu)化
- 基于BootStrap Metronic開發(fā)框架經(jīng)驗小結(jié)【三】下拉列表Select2插件的使用
- 基于BootStrap Metronic開發(fā)框架經(jīng)驗小結(jié)【一】框架總覽及菜單模塊的處理
- 基于Bootstrap的Metronic框架實現(xiàn)頁面鏈接收藏夾功能
相關(guān)文章
淺析webpack 如何優(yōu)雅的使用tree-shaking（搖樹優(yōu)化）
這篇文章主要介紹了webpack 如何使用tree-shaking（搖樹優(yōu)化）,本文介紹了什么是tree-shaking,commonJS 模塊,es6 模塊,怎么使用tree-shaking等,具體操作步驟大家可查看下文的詳細講解，感興趣的小伙伴們可以參考一下。2017-08-08
JS動態(tài)遍歷json中所有鍵值對的方法(不知道屬性名的情況)
這篇文章主要介紹了JS動態(tài)遍歷json中所有鍵值對的方法,實例分析了針對不知道屬性名的情況簡單遍歷json鍵值對的操作技巧,需要的朋友可以參考下2016-12-12
uni-app是一個使用 Vue.js 開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,可發(fā)布到iOS、Android、H5、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘）等多個平臺,這篇文章主要給大家介紹了關(guān)于利用uni-app生成微信小程序的踩坑記錄,需要的朋友可以參考下2022-04-04
本篇文章主要是對JS過濾url參數(shù)特殊字符的實現(xiàn)方法進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了js代碼規(guī)范之Eslint安裝與配置詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
基于VSCode調(diào)試網(wǎng)頁JavaScript代碼過程詳解
這篇文章主要介紹了基于VSCode調(diào)試網(wǎng)頁JavaScript代碼過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
微信小程序配置視圖層數(shù)據(jù)綁定相關(guān)示例
這篇文章主要為大家介紹了微信小程序配置視圖層數(shù)據(jù)綁定相關(guān)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪<BR>2022-04-04
這篇文章主要幫助大家深入理解JS綁定事件，介紹了六種JS綁定事件的情況，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了微信js-sdk地理位置接口用法,結(jié)合實例形式分析了js-sdk地理位置接口的定義與簡單使用方法,需要的朋友可以參考下2016-10-10
使用JavaScript實現(xiàn)一個靜態(tài)鏈表
這篇文章主要為大家詳細介紹了如何使用JavaScript實現(xiàn)一個靜態(tài)鏈表，文中的示例代碼講解詳細，具有一定的學習價值，感興趣的小伙伴可以跟隨小編一起了解一下2023-06-06