Summary of Development Framework experience based on BootStrap Metronic [6] dialog box and prompt box handling and optimization, bootstrapmetronic

Summary of Development Framework experience based on BootStrap Metronic [6] dialog box and prompt box handling and optimization, bootstrapmetronic

In various Web development processes, dialog box and prompt box processing is a very common interface processing technology. It is used well and can provide users with a good page experience, as is Bootstrap development, you can use the pop-up dialog box to display data on pages such as adding, editing, and viewing details. to delete the data, you may use a Prompt confirmation box. If the operation is successful, we can use richer prompt boxes for processing. This article mainly compares these technical points used in Bootstrap development.

1. Use the Bootstrap dialog box

The general Bootstrap has several types of dialog boxes, including the default small dialog box, medium-width dialog box, and full-size dialog box. The Bootstrap dialog box interface is very friendly, when we use the ESC key or click another blank space, the dialog box is automatically hidden.

They are defined as different classes. For example, the default dialog box code is as follows:

<! -------------------------- Dialog box for adding/modifying information> <div id = "add" class = "modal fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel "aria-hidden =" true "> <div class =" modal-dialog "> <div class =" modal-content "> <div class =" modal-header bg-primary "> <button type =" button "class =" close "data-dismiss =" modal "aria-hidden =" true "> </button> 

The general interface is as follows:

Note that the dialog box style code in the above Code is as follows:
<div class="modal-dialog">
For a database of the other two sizes, you only need to modify the following code:
<div class="modal-dialog modal-lg">
And
<div class="modal-dialog modal-full">
We can determine the size of the dialog box layer definition based on the layout of the interface elements, but their call methods are consistent.
The dialog box is displayed as follows:
// Select the customer $ ("# btnSelectCustomer"). show () for display ();
The closing dialog box is displayed as follows:
$("#add").modal("hide");
In general, the pop-up dialog box is a form that can be used to submit and save data. Therefore, you need to verify the data in the form. If there is an error, we may need to remind you on the interface, so during page initialization, We need to initialize form verification rules. below is our regular form initialization operation.
// Bind the related event function BindEvent () {// checks whether the form information has passed the verification $ ("# ffAdd "). validate ({meta: "validate", errorElement: 'span ', errorClass: 'help-block help-block-error', focusInvalid: false, highlight: function (element) {$ (element ). closest ('. form-group '). addClass ('has-error');}, success: function (label) {label. closest ('. form-group '). removeClass ('has-error'); label. remove () ;}, errorPlacement: function (error, Element) {element. parent ('div '). append (error) ;}, submitHandler: function (form) {$ ("# add "). modal ("hide"); // The constructor sends the parameter to var postData =$ ("# ffAdd") in the background "). serializeArray (); $. post (url, postData, function (json) {var data = $. parseJSON (json); if (data. success) {// Add a Portrait upload process $ ('# file-Portrait '). fileinput ('upload'); // saved successfully. close the pop-up layer, 2. refresh table data showTips ("saved successfully"); Refresh () ;}else {showError ("failed to save:" + data. err OrMessage, 3000) ;}). error (function () {showTips ("You are not authorized to use this function, please contact the administrator. ");});}});}
However, these codes are often repeated. Therefore, we can encapsulate functions and reuse some code to process code in a more concise manner.
// BindEvent () {// process formValidate ("ffAdd", function (form) {$ ("# add") for adding and editing a record "). modal ("hide"); // The constructor sends the parameter to var postData =$ ("# ffAdd") in the background "). serializeArray (); $. post (url, postData, function (json) {var data = $. parseJSON (json); if (data. success) {// saved successfully. close the pop-up layer, 2. refresh table data showTips ("saved successfully"); Refresh () ;}else {showError ("failed to save:" + data. errorMessage, 3000 );}}). error (function () {showTips ( "You are not authorized to use this function. Contact the administrator. ");});});}
2. Deletion confirmation dialog box Processing
1) Use of the bootbox plug-in
In addition to the general dialog box above, we often encounter a simple confirmation dialog box. Although the above Code can also be used to build a confirmation dialog box, it generally does not need to be so troublesome, you can use the confirmation dialog box of the plug-in bootbox for processing.
Bootbox. javaScript is a small JavaScript library that helps you quickly create a dialog box when using the bootstrap framework, manage or delete any required DOM elements or js event handlers.
Bootbox. js uses three methods to simulate some of their local JavaScript methods. Their exact method signature is flexible. Each one can take various parameter customization labels and specify the default value, but they are generally called the same:
Bootbox. alert (message, callback)
Bootbox. prompt (message, callback)
Bootbox. confirm (message, callback)
The only required parameter is that alert is message; callback is a required confirm and prompt call to determine the user's response. Even when calling the alert callback is determined when the user rejects the dialog box because our packaging method cannot block something like their native language is useful: they are asynchronous rather than synchronous.
These three methods call 1/4 public methods. You can also create them in your custom dialog box:
bootbox.dialog(options)
For more api help documentation see: http://bootboxjs.com/documentation.html
Alert
bootbox.alert("Hello world!", function() {Example.show("Hello world callback");});
Confirm
bootbox.confirm("Are you sure?", function(result) {Example.show("Confirm result: "+result);});
Or code:
Bootbox. confirm ("are you sure you want to delete the selected record? ", Function (result) {if (result) {// finally remove the last comma, ids = ids. substring (0, ids. length-1); // then send the asynchronous request information to the background to delete the data var postData = {Ids: ids}; $. get ("/Province/DeletebyIds", postData, function (json) {var data = $. parseJSON (json); if (data. success) {showTips ("successfully deleted selected records"); Refresh (); // Refresh page data} else {showTips (data. errorMessage );}});}});

Prompt
bootbox.prompt("What is your name?", function(result) {if (result === null) {  Example.show("Prompt dismissed");} else {  Example.show("Hi <b>"+result+"</b>");}});
Custom Dialog
The code and interface effects are as follows:
bootbox.dialog(…)
[2)
2) Use of the sweetalert plug-in
Although the above results are very consistent with the Bootstrap style, the interface is slightly monotonous. The above effect is not my favorite style. I met a more beautiful effect, as shown below.

This effect is implemented by introducing the plug-in sweetalert (http://t4t5.github.io/sweetalert.
Swal ({title: "Operation prompt", text: newtips, type: "warning", showCancelButton: true, confirmButtonColor: "# DD6B55", cancelButtonText: "cancel", confirmButtonText: "Yes, delete it! ", CloseOnConfirm: true}, function () {delFunction ();});
The implementation code of the interface above is similar:


Generally, the code in the pop-up box is simple, as shown below.

3. Handling of Information prompt boxes
The above two processes are implemented by using the pop-up dialog box, and the interface is blocked. In general, we will prompt the effect of the information, hoping that it will not affect our further operations, or at least provide a very short automatic disappearance effect.
Here we will introduce the jNotify plug-ins and toastr plug-ins.
1) Use of the jNotify prompt box
JNotify prompt box is an excellent jQuery result prompt box plug-in. After submitting the form, we use Ajax to return results in the background and display the returned information in the foreground. jNotify can display the operation results elegantly. JNotify is a jQuery-based Information reminder plug-in. It supports operation success, operation failure, and Operation reminder. The jNotify browser has excellent compatibility. You can change the prompt content, locate the prompt box, and configure plug-in parameters.
JSuccess (message, {option}); jError ("operation failed. Please try again !! "); Jpolicy (" Note: Please complete your <strong> personal information! </Strong> ");
Detailed configuration of jNotify parameters:
AutoHide: true, // whether to automatically hide the prompt bar clickOverlay: false, // whether to click the mask layer to close the prompt bar MinWidth: 200, // The minimum width of TimeShown: 1500, // display time: millisecond ShowTimeEffect: 200, // time required to display on the page: millisecond HideTimeEffect: 200, // time required to disappear from the page: millisecond LongTrip: 15, // HorizontalPosition: "right", // horizontal position: left, center, rightVerticalPosition: "bottom", // vertical position: top, center, bottomShowOverlay: true, // whether to display the ColorOverlay of the mask layer: "#000", // set the face of the Mask Layer Color OpacityOverlay: 0.3, // sets the transparency of the mask layer. onClosed: fn // closes the prompt box and executes the function. You can call other jNotify again. The preceding three commands are called in sequence.
The following is the ELE. Me public method encapsulated in the script class to display the prompt effect.
// Display error or prompt information (jymy related files need to be referenced) function showError (tips, TimeShown, autoHide) {jError (tips, {autoHide: autoHide | true, // added in v2.0 TimeShown: TimeShown | 1500, HorizontalPosition: 'center', VerticalPosition: 'top', ShowOverlay: true, ColorOverlay: '# 000', onCompleted: function () {// added in v2.0 // alert ('jnofity is completed! ') ;}}) ;}// Display the prompt information function showTips (tips, TimeShown, autoHide) {jSuccess (tips, {autoHide: autoHide | true, // added in v2.0 TimeShown: TimeShown | 1500, HorizontalPosition: 'center', VerticalPosition: 'top', ShowOverlay: true, ColorOverlay: '# 000', onCompleted: function () {// added in v2.0 // alert ('jnofity is completed! ');}});}
In this way, when using the Ajax POST method, we can prompt according to different needs.
Var postData = $ ("# ffAdd "). serializeArray (); $. post (url, postData, function (json) {var data = $. parseJSON (json); if (data. success) {// Add a Portrait upload process $ ('# file-Portrait '). fileinput ('upload'); // saved successfully. close the pop-up layer, 2. refresh table data showTips ("saved successfully"); Refresh () ;}else {showError ("failed to save:" + data. errorMessage, 3000 );}}). error (function () {showTips ("You are not authorized to use this function. Contact the administrator. ");});

2) Use of the toastr plug-in
Toastr is a Javascript library used to create non-blocking page message reminders in Gnome/Growl style ., Toastr supports four notification modes: Success, error, warning, and prompt. You can set the position and animation effect of the prompt window by number, on the official site, you can select parameters to generate JS, which is very convenient to use.
Plug-in address: http://codeseven.github.io/toastr/
It can create the following effects: warning, danger, success, and prompt dialog box information, the effect is as follows.

Its JS Code is as follows.
// Display a warning with no title toastr. warning ('My name is Inigo Montoya. You killed My father, prepare to die! ') // The title toastr. success ('Have fun storming the castle! ', 'Miracle Max Says') // display the error title toastr. error ('I do not think that word means what you think it means.', 'inconceivable! ') // Clear the current list toastr. clear ()
The parameter definitions of this plug-in are described as follows.
// Parameter settings. If you use the default value, you can omit the toastr. options = {"closeButton": false, // whether to display the close button "debug": false, // whether to use the debug mode "positionClass ": "toast-top-full-width", // The Position of the pop-up window "showDuration": "300", // The displayed animation time "hideDuration": "1000 ", // The animation time to disappear "timeOut": "5000", // display time "extendedTimeOut": "1000", // extend the display time "showEasing": "swing ", // specifies the animation buffer mode for display. "hideEasing": "linear", // specifies the animation buffer mode for disappearance. "showMethod": "fadeIn ", // display Animation Mode "hideMethod": "fadeOut" // animation mode when the video disappears}; // a message indicating binding $ ("# success") is displayed "). click (function () {toastr. success ("congratulations on your success ");})
The above is a summary of my experience in handling and optimizing the dialog box and prompt box in the project. I hope it will help you learn how to improve the Web interface. If you want more information, please stay tuned to the help House website!