Summary on the experience of Bootstrap metronic development framework the extraction and utilization of "four" bootstrap icons _javascript techniques

In the previous essay based on Bootstrap Metronic development Framework Experience Summary of "one" Framework Overview and Menu module processing, introduced the menu module processing, mainly describes how to dynamically get records from the database and Build menu list. The menu information icon style is also obtained from the database, so we are required to dynamically obtain bootstrap inside the various icon definitions. This article mainly describes how to extract bootstrap icon information, stored in the database for my use.

1, menu display and a variety of bootstrap icons

We can see from the following figure, for the beauty of the menu, each menu item (here three level menu) has an icon, although the size is different, we use bootstrap icon, are from the bootstrap icon library inside the content.

Bootstrap icon Library is divided into three types of content:

Font awesome:bootstrap special icon fonts, font Awesome contains all the icons are vector, you can zoom any, avoid an icon to do a variety of dimensions of trouble. CSS can also be applied to these icons in a style that is set to a font.

The following are the icons for some of the font Awesome:

Simple Icons: Collection of numerous website logo, and provide high-quality, different sizes of PNG format pictures to the vast number of netizens, all icon copyright belongs to its own company.

As shown below is a partial icon for simple icons:

Glyphicons: A collection of 200 symbolic font formats, provided by Glyphicons, Glyphicons Halflings is generally charged, but after consultation between bootstrap and glyphicons authors, Allows developers to use them without paying fees.

The following are part of the glyphicons content:

With these kinds of icon content, we can introduce the following several 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 are all supported by a variety of bootstrap display, as shown in the following several effects.

Or you can make the icons larger:

2, a variety of bootstrap icon extraction

We through the above introduction, estimates of these several bootstrap icons have a certain understanding, but if we want to be able to select the icon in the menu editor, then we still need to extract this information into the database, and then show it to me to choose, otherwise can not do dynamic configuration.

As the above editing interface, the menu of the Web icon provides a dynamic choice, then we if the database records the above several icons of the collection, then we can display it in the interface, and we can select the appropriate chart.

Based on the above several style files, we analyze, for example, the contents of the Font-awesome.min.css file, which is as follows for the icon definition section.

For Simple-line-icons, it has a similar style definition, as shown below.

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

According to these kinds of information, we can through regular expression matching way, we need to extract the information, and stored in the database can be implemented icon dynamic display and selection of the first step.

For example, we define partial variables and regular expressions to handle the contents of these files:

 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, the contents of the collection can be extracted by reading the contents of the files and obtaining the matching records.

String content = Fileutil.filetostring (realpath);
  list<string> matchlist = cregex.getlist (content, regex, 1);

Finally, we can save this information in the database table.

 Bootstrapiconinfo info = new Bootstrapiconinfo ()
  {
    DisplayName = Item,
    ClassName = prefix + Item,
    Createtime = DateTime.Now,
    sourcetype = SourceType,
  };
  Bllfactory<bootstrapicon>. Instance.insert (info);

The final record is stored in the database, the effect is as follows, which has been recorded in the information we need, so in the actual use, you can use the information of each field, showing a good interface.

3, bootstrap icon display and selection

We read through the file and the regular expression to extract the content, and then saved to the database, these icon information can be used for us, can be categorized in the page display, each type of icons for paging processing, easy to query, as shown below.

This section of the display page code and regular data display is similar, just do not need the header information, let's look at the page code as shown below.

<div class= "portlet box Green-meadow" > <div class= "portlet-title" > <div class= "caption" > <i class= "FA fa-filter" ></i> icon information </div> </div> <div class= "Portl Et-body flip-scroll "> <div> <span> per page show </span> <select id=" Rows "Onchan
            Ge= "Changerows ()" > <option>50</option> <option selected>100</option>
          <option>200</option> <option>1000</option> </select> <span> Records </span>   <span> Common records: </span><span id= ' totalcount ' class= ' label
        Label-success ">0</span>, total Pages: <span id= ' totalpagecount ' class= ' label label-success ' >0</span> page. </div>  

The main icon shows the content in the HTML above this section.

<div class= "Portlet-body" id= "Grid_body" ></div>

dynamically fetching and generating HTML code to display the processing script on the interface is shown below.

 $.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 the user selects the corresponding icon, we can set the span style through the script to show the icon we selected, as shown below.

$ ("#i_WebIcon"). attr ("class", classname);

Of course, when we select the icon, provide a pop-up dialog box to display the different categories of icons, so that users can choose to return.

So we finished, from the icon file to extract different types of charts, and then stored in the database, and displayed in the page, for us to dynamically select and set.

The above is a small set to introduce the Bootstrap Metronic development framework based on the experience of "four" bootstrap icon extraction and use of relevant knowledge, hope to help everyone, if you want to learn more information, please pay attention to cloud Habitat community website!