Metronic-based Bootstrap development framework experience (10) -- optimizes Bootstrap icon management and metronicbootstrap

Metronic-based Bootstrap development framework experience (10) -- optimizes Bootstrap icon management and metronicbootstrap

In Bootstrap-based projects, colorful buttons and rich charts are very attractive. To maximize this feature, you can use the Bootstrap icon to extract it to the database, manage and use these icons on the page so that they can be easily applied to various page components, such as the menu module, button interface, and form input. In the previous article "Metronic-based Bootstrap development framework Experience Summary (4) -- Bootstrap icon extraction and utilization", I extracted the Bootstrap icon, A separate page is developed for chart management. This article describes how to optimize the page for more convenient use.

1. optimized the icon Management Interface

In the previous article, we introduced the extraction of icons and the icon management interface. Let's review the Bootstrap chart type. 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.

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.

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.

We extract the icon information from the style sheet and put it in the database. Then, we can easily manage and select and process the icons on the interface.

When I first introduced my Bootstrap framework, the icon management interface is shown below.

When selecting an icon, a pop-up dialog box is displayed, showing the icons with different categories. You can select the icon and return it.

Although these functional interfaces can reduce the process of searching for icons, it is inconvenient to find a specific icon, we need to flip a lot of pages to find the right ones and the efficiency is not high. By understanding the relationship between our own icon names and the displayed content, we still have a great relationship, therefore, we should provide a search with a display name to facilitate the query and select in the query list. This will greatly speed up searching for the Bootstrap icon.

This interface is much better than the original one. We can search by name and obtain the qualified icons in the database for pagination. If one of them is selected, We can display the icons and names on it, this makes it easy to use.

The query operation is similar to that of other pages. After AJax is used to obtain the data, the page is displayed on the interface.

<Div class = "form-group"> <label class = "control-label col-md-2"> icon display name </label> <div class = "input-icon col-md-3"> <div class = "input-group"> <div class = "input-icon"> <input id = "WHC_DisplayName" name = "WHC_DisplayName" type = "text" class = "form -control "placeholder =" display name... "> </div> <span class =" input-group-btn "> <button id =" btnSearch "class =" btn-success "type =" button "onclick = "SearchDisplayName () "> <I class =" glyphicon-list "> </I> query </button> </span> </div>

// Query the function SearchDisplayName () {var condition = "WHC_DisplayName =" + $ ("# WHC_DisplayName") by name "). val (); SearchCondition (currentPage, condition);} // query function Search (page) {var condition = "WHC_SourceType = SimpleLine"; // SimpleLine, FontAwesome, glyphicons SearchCondition (page, condition);} function SearchCondition (page, condition) {var iconUrl = "/BootstrapIcon/FindWithPager? Page = "+ page +" & rows = "+ rows; $. getJSON (iconUrl + "&" + condition, function (data) {$ ("# grid_body" ).html (""); $. each (data. rows, function (I, item) {var tr = "<a href = 'javascript:; 'onclick = \" SetIconClass ('"+ item. className + "') \" class = 'icon-btn' title = \ "" + item. displayName + "\"> "; tr + =" <I class = \ "" + item. className + "\" style = \ "font-size: 2.2em \"> </I> "; // tr + =" </a> "; $ ("# grid_body "). append (tr) ;}); var element =$ ('# grid_paging'); if (data. total> 0) {var options = {bootstrapMajorVersion: 3, currentPage: page, numberOfPages: rows, totalPages: Math. ceil (data. total/rows), onPageChanged: function (event, oldPage, newPage) {SearchCondition (newPage, condition) ;}} element. bootstrapPaginator (options);} else {element.html ("");}});}

In addition, we can also easily integrate the icon style for display, such as Primary Success Info Warning Danger and other classic styles. Of course, we can also set the color to make the icon more colorful.

The related interface code is as follows.

                                <div class="input-icon col-md-6">                                    <button type="button" class="btn btn-default" onclick="ChangeIconStyle('default')">Default</button>                                    <button type="button" class="btn btn-primary" onclick="ChangeIconStyle('primary')">Primary</button>                                    <button type="button" class="btn btn-success" onclick="ChangeIconStyle('success')">Success</button>                                    <button type="button" class="btn btn-info" onclick="ChangeIconStyle('info')">Info</button>                                    <button type="button" class="btn btn-warning" onclick="ChangeIconStyle('warning')">Warning</button>                                    <button type="button" class="btn btn-danger" onclick="ChangeIconStyle('danger')">Danger</button>                                </div>

<Script> // function ChangeIconStyle (style) {var icon =$ ("# WebIcon"). val (); if (style! = 'Default') {$ ("# I _WebIcon "). attr ("class", icon + "icon-state-" + style); $ ("# lbl_WebIcon "). attr ("class", "label-" + style); $ ("# lbl_WebIcon "). text (icon + "icon-state-" + style);} else {$ ("# I _WebIcon "). attr ("class", icon); $ ("# lbl_WebIcon "). attr ("class", ""); $ ("# lbl_WebIcon "). text (icon) ;}}</script>

 

2. Application scenarios of icons

With this convenient icon selection management interface, we can greatly improve our efficiency. We can use icons in menus, buttons, and other places to make the interface more beautiful.

Use the following in the menu interface.

Or you can use it in the left-side menu.

We can also use the icon on the functional buttons of the interface.

If you are interested in the Bootstrap development framework series, refer to the following articles. Thank you for reading.

Use dynamic and ExpandoObject In the MVC controller to implement data escape output

Metronic-based Bootstrap development framework Experience Summary (9) -- Implementation of Web Page Content print preview and save operations based on Metronic Bootstrap development framework Experience Summary (8) -- Introduction to Metronic-based Bootstrap development framework experience (7) -- Introduction to Metronic-based Bootstrap development framework experience (6) -- handling and optimization of dialog box and prompt box -- Metronic-based Bootstrap development framework Experience Summary (5) -- Bootstrap File Upload plug-in File Input use Metronic-based Bootstrap development framework Experience Summary (4) -- Bootstrap icon extraction and utilization -- Metronic-based Bootstrap development framework Experience Summary (3) -- drop-down list Select2 plug-in use Metronic-based Bootstrap development framework Experience Summary (2) -- list paging processing and JSTree use of plug-ins -- Metronic-based Bootstrap development framework Experience Summary (1)-framework overview and menu module processing