Metronic-based Bootstrap development framework Experience Summary (15) -- updated and used Metronic 4.75 and bootstrapmetronic

Metronic-based Bootstrap development framework Experience Summary (15) -- updated and used Metronic 4.75 and bootstrapmetronic

In the Metronic-based Bootstrap development framework, we always want to integrate newer and better front-end technologies and MVC backend technologies for project development. Over time, currently, Metronic has been updated to version 4.75. Therefore, we must update and adjust the content of this version to keep pace with the times. In recent versions, the directory structure and functions of Metronic have not changed much, but some more convenient functions have been added. In this article, we will compare them in detail.

1. Metronic version update

First, we will Compare the blank pages with different versions. Beyond Compare is the preferred choice for file comparison. The comparison between the two versions is clear at a glance.

From the differences, we can see that the structure of the new JS and CSS directories has not changed, but several functional pages are added, as shown below.

The content of these pages is as follows.

Among them, ui_metronic_grid.html mainly introduces various usage methods of Bootstrap raster.

The ui_sweetalert.html page integrates a very beautiful pop-up dialog box control, as shown below.

Components_bootstrap_multiselect_dropdown.html is a new implementation of multiple components in the drop-down list.

Components_clipboard.html is the basic operation of pasting and copying, which facilitates the processing of the clipboard for controls and selected content on the page.

 

In addition, a quick navigation menu is added, and the page code is added as follows,

Navigation menu added to the right of the page

The following figure shows the effect.

 

 

2. Update and adjustment of framework plug-ins

With the adjustment of the Metronic template, new versions of the plug-ins are also used, so you also need to adjust the use of these plug-ins.

1) Adjustment of Select2 plug-in

This plug-in is a Select-based extension that provides richer features and user experience. Its github official website address is: release.

Taking the update of the Select2 plug-in as an example, I introduced it in the essay "Metronic-based Bootstrap development framework Experience Summary (3) -- Use of the Select2 plug-in the drop-down list", as shown below, many drop-down lists use the Select2 plug-in for display, which is more convenient and beautiful.

The assignment part is originally:

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

The new version unifies the assignment operation, which is consistent with the normal control assignment code. The change is as follows.

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

If the pull-down list is involved, the Code remains unchanged:

$ ("# City"). trigger ('change'); // Linkage

The code for initializing Select2 also needs to be fine-tuned, as shown below.

Var control = $ ('#' + ctrlName); // sets the control for processing Select2. select2 ({placeholder: "select" + dictTypeName, // set the placeholder allowClear: true, escapeMarkup: function (markup) {return markup ;},TemplateResult: FormatResult,TemplateSelection: FormatSelection, width: '100! Important ', // set the auto-adaptive width });

 

2) SweetAlert dialog box

This was not available in Metronic earlier versions. I wrote a summary of Metronic-based Bootstrap development framework experience (6) -- Dialog Box and prompt box handling and optimization: this plug-in is used separately for deletion confirmation. Currently, this version has been integrated into Metronic, then we can directly reference it.

The plug-in address is: http://lipis.github.io/bootstrap-sweetalert/

Adjust the reference address of CSS and JS and use the same code to update the SweetAlert dialog box.

// Confirmation function showDelete (delFunction, tips) {var newtips = arguments [1] | "are you sure you want to delete the selected record? "Var result = false; swal ({title:" Operation prompt ", text: newtips, type:" warning ", showCancelButton: true, // confirmButtonColor:" # DD6B55 ", confirmButtonClass: "btn-danger", cancelButtonText: "cancel", confirmButtonText: "Yes, delete it! ", CloseOnConfirm: true}, function () {delFunction () ;}); return result ;}