Metronic-based Bootstrap development framework Experience Summary (4) -- Bootstrap icon extraction and utilization, metronicbootstrap

Metronic-based Bootstrap development framework Experience Summary (4) -- Bootstrap icon extraction and utilization, metronicbootstrap

In the previous article, "Metronic-based Bootstrap development framework Experience Summary (1)-framework overview and menu module processing" describes how to process the menu module, this section describes how to Dynamically Retrieve records from the database and build a menu list. The icon style of the menu information is also obtained from the database, so we need to be able to dynamically obtain various icon definitions in Bootstrap. This article describes how to extract the Bootstrap icon information and store it in the database for my use.

1. menu display and various Bootstrap icons

We can see that for the sake of menu appearance, each menu item (which is divided into three levels here) has an icon. Although the size is different, we use the Bootstrap icon, are all from the content in the Bootstrap icon library.

The Bootstrap icon library contains three types of content:

Font Awesome: Dedicated Bootstrap icon Font. All icons contained in Font Awesome are vector and can be scaled at will, avoiding the trouble of creating multiple sizes for one icon. CSS can also apply the styles that can be set for fonts to these icons.

Below are some of the Font Awesome icons:

Simple Icons: Collects the logos of many websites and provides high-quality png images of different sizes to the majority of users. All icons are copyrighted by the company.

Some Icons of Simple Icons are shown below:

Glyphicons: Including a set of 200 symbol font format charts, which are provided by Glyphicons. Glyphicons Halflings is generally charged, but it is negotiated by the authors of Bootstrap and Glyphicons, developers are allowed to use the service without any payment.

Some Glyphicons contents are as follows:

 

With these icons, we can introduce the following styles.

<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"/>

These icons support topic display of various Bootstrap functions, as shown in the following figure.

You can also enlarge the icon:

 

2. extract various Bootstrap icons

Through the above introduction, we may have some knowledge about these Bootstrap icons, but if we want to be able to select the icon in the menu editing, we still need to extract the information to the database and then show it to me for selection. Otherwise, dynamic configuration cannot be implemented.

The editing interface above provides a dynamic choice for the Web icon of the menu. If we record the set of the above icons in the database, we can display them on the interface, you can select a chart.

For example, the content of the font-awesome.min.css file. The definition of the icon is as follows.

For simple-line-icons, its style definition is similar, as shown below.

For Glyphicons, its style definition is similar, as shown below.

Based on these types of information, we can extract the information we need through regular expression matching, and stored in the database to achieve the first step of dynamic icon display and selection.

For example, we define some variables and regular expressions to process the file content:

            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",            };

Then, you can extract the set content by reading the file content and obtaining matching records.

    string content = FileUtil.FileToString(realPath);    List<string> matchList = CRegex.GetList(content, regex, 1);

Finally, we can save the information to the database table.

    BootstrapIconInfo info = new BootstrapIconInfo()    {        DisplayName = item,        ClassName = prefix + item,        CreateTime = DateTime.Now,        SourceType = sourceType,    };    BLLFactory<BootstrapIcon>.Instance.Insert(info);

Finally, the record is stored in the database. The result is as follows: the required icon information has been recorded in the record. In this way, the information of each field can be used in actual use, A nice interface is displayed.

 

3. Display and select the Bootstrap icon

We read the data from the file and extract the content using a regular expression. After saving the data to the database, the icon information can be used for us and displayed in categories on the page, the icons of each type are processed by page to facilitate query, as shown below.

This part of the display Page code is similar to the regular data display, but the header information is not required. Let's take a look at the page Code as follows.

<Div class = "portlet box green-meadow"> <div class = "portlet-title"> <div class = "caption"> <I class = "fa-filter"> </I> icon Information </div> <div class = "portlet-body flip-scroll"> <div> <span> display on each page </span> <select id = "rows" onchange = "ChangeRows () "> <option> 50 </option> <option selected> 100 </option> <option> 200 </option> <option> 1000 </option> </select> <span> records </span> & nbsp; & nbsp; <span> total records: </span> <span id = 'Totalcount' class = "label-success"> 0 </span>, total page number: <span id = 'totalpagecount' class = "label-success"> 0 </span> page. </Div> 
The main icons are displayed in the HTML above.
<div class="portlet-body" id="grid_body"></div>
The processing script for dynamically obtaining and generating HTML code displayed on the interface is as follows.
            $.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);                });
After selecting the corresponding icon, we can set the Span style through the script to display the selected icon, as shown below.
$("#i_WebIcon").attr("class", classname);
Of course, when selecting the icon, a pop-up dialog box is provided to display the icon with different categories, so that the user can select the icon and return it.

In this way, we can extract different types of charts from the icon file, store them in the database, and display them on the page for dynamic selection and setting.
 
If you are interested, you can continue to refer to the series of articles:
Metronic-based Bootstrap development framework Experience Summary (1)-framework overview and menu module processing
Metronic-based Bootstrap development framework Experience Summary (2) -- list paging processing and use of the plug-in JSTree
Metronic-based Bootstrap development framework experience (3) -- Use of Select2 plug-in the drop-down list
Metronic-based Bootstrap development framework experience (4) -- extraction and utilization of Bootstrap icons