JQuery + EasyUI to easily implement step-by-step effects, jqueryeasyui

JQuery + EasyUI to easily implement step-by-step effects, jqueryeasyui

EasyUI Introduction

Easyui is a collection of jQuery-based user interface plug-ins.

Easyui provides necessary functions for creating modern, interactive, and JavaScript applications.

You do not need to write a lot of code to use easyui. You only need to write some simple HTML tags to define the user interface.

Easyui is a complete framework that perfectly supports HTML5 web pages.

Easyui saves your webpage development time and scale.

Easyui is simple but powerful.

JQuery EasyUI provides easy-to-use components that allow Web developers to quickly create program pages on popular jQuery core and HTML5.

First, we will show you:

Project requirements: When we shop at ordinary times, we often take this step to place orders, pay for the goods, the seller delivers the goods, confirm the receipt, and evaluate. If you design a progress bar for ui, you can clearly see where you are and what steps are required.

Let's take a look at the front-end framework of our project, which uses EasyUI + MVC. I only need to write a few JS files and view files for interaction, I spent a day to see how the entire page is implemented. Basically, I reference an easyUI style, use AJAX to upload values, and call the methods in the controller in the background. Since I implement the dynamic effect of a front-end page, I will write the JQuery method in the previous step and next step to select a switch to activate and complete the node. Write a JS method to choose to control the display and hiding of the main page. I have written the view into several Divs, so my method is to redirect the display of several Divs.

Review JQuery's knowledge points:

1. The corresponding window. onload method is used for the form loading event.

2. There are many types of Button binding events

1) Use JS to write a function and place it on the onclick event of the button.

2) bind an anonymous function with JQuery $ ('# btnnext'). bind ('click', function (){});

3. add and delete classes removeclass and addclass. The difference between ID and class is that ID starts with # In JQuery.

4. The difference between js and JQuery is that the latter expresses the most meaning with the least code, and the latter is the encapsulation of the former with a higher layer.

5. Differences in the types of AJAX backend transmission methods POST and GET. get has a small amount of data to be transmitted, and user transmission is passed through URL requests. Form submission is required for post, which is highly secure.

Some code display:

// Click the next button + progress bar to bring a forward effect $ ('# btnnext '). bind ('click', function () {// determines whether the input boxes have been verified by if (InputValidate () = false) {return;} // based on the current title, determine what the next step is var currentTitle = $ ('# maincontent '). panel ('options '). title; if (currentTitle = 'fill in project information') {// click the next response scroll bar $ ("# li1 "). removeClass ("ui-step-active"); // remove the active node $ ("# li1 "). addClass ("ui-step-done"); // Add a completed node $ ("# li2 "). removeClass ("ui-step-line"); // remove a line $ ("# li2 "). a DdClass ("ui-step-active"); // Add an active node $ ('# newfile '). hide (); // hide the create button $ ('# BidInfo '). hide (); // hide basic information $. get ('/InviteBid/getinvitebididididid', {bidType: bidType}, function (data, status) {// assign a value to $ (' # invitebidid') in the tender project number text box '). val (data); $ ('# infodisplay '). show () ;}); $ ('# btnback '). show (); ControlContent ("# InfoDisplay"); // $ ('# btnArea '). show (); // change the title $ ('# maincontent '). panel ({title: 'generate tender No. '});} // if the current position is Enter the project information and click Next to submit the basic project information if (currentTitle = 'generate tender No. ') {// obtain the basic project information var BidProId = $ (' # invitebid '). val (); // obtain the bidding ID var BidProName = $ ('# bidproname '). val (); // obtain the name of the bidding project var PurchaseUnit = $ ('# PurchaseUnit '). val (); // obtain the InviteBidTypeId of the purchaser =$ ('# comboinvitebidtype '). combobox ('getvalue'); // obtain the bidding method Id ItemTypeId = $ ('# comboItemType '). combobox ('getvalue'); // obtain the object type Id var PurchaseAgency = $ ('# PurchaseAgency '). Val (); // obtain the purchase agent var BidOpenTime = $ ('# BidOpenTime '). datebox ('gettext'); // open time var BidGuaranteCash =$ ('# BidGuaranteCash '). val (); // tender deposit var SaleStartDate = $ ('# SaleStartDate '). datebox ('gettext'); // obtain the start time of the bidding file. var SaleEndDate = $ ('# SaleEndDate '). datebox ('gettext'); // obtain the release end time of the bidding documents // click the next response scroll bar $ ("# li2 "). removeClass ("ui-step-active"); // remove the active node $ ("# li2 "). addClass ("ui-step-done"); // Add a completed node $ ("# li3" ). RemoveClass ("ui-step-line"); // remove a line $ ("# li3 "). addClass ("ui-step-active"); // Add an active node $ ("# btnback "). show (); ControlContent ("# EvaluationBid"); // submit project information data to Controller $. ajax ({type: 'post', url: '/InviteBid/AddBidZRecord', contentType: 'application/json', // required, indicating the submitted data type data: json. stringify ({'bidzrecorder': [{'bidprojectid': BidProId, 'bidrecordname': BidProName, 'purchaseunit ': PurchaseUnit, 'Purchaseagency ': PurchaseAgency, 'salestartdate': SaleStartDate, 'saleenddate': SaleEndDate, 'bidopentime': BidOpenTime, 'region': interval, 'itemid': ItemTypeId, 'region ': inviteBidTypeId}]}), success: function (jsonResult) {$ ('# infodisplay '). hide (); // hide ID information $ ('# evaluationbid '). show (); // display the evaluation method area. // change the title of the main content area to set the evaluation method $ ('# maincontent '). panel ({title: 'bidding Evaluation Methods'}); // text of the first step of the Evaluation Method The font is set to red when ('{firststep'}.css ({color: 'red'})}, error: function (data) {$. messager. alert ('hprompt ',' failed to fill in project information! ', 'Warning'); return ;}}) ;}else if (currentTitle = 'bid evaluation method') {if ($ (' # comboevaluationmethod '). combobox ('gettext') = '') {return false;} if (saveFlag = false) {return ;} // obtain the Id var BidRecordId =$ ('# invitebidid') of the evaluation method '). val (); // obtain the bidding ID // click the scroll bar for the next response $ ("# li3 "). removeClass ("ui-step-active"); // remove the active node $ ("# li3 "). addClass ("ui-step-done"); // Add a completed node $ ("# li4 "). removeClass ("ui-step-line"); // remove Line $ ("# li4 "). addClass ("ui-step-active"); // Add an active node $ ("# btnback "). show (); ControlContent ('# FinishFile'); // submit the evaluation method $. ajax ({type: 'post', url: '/InviteBid/UpdateBidZRecord /? JudgeBidId = '+ JudgeBidId +' & BidRecordId = '+ BidRecordId, // data: JudgeBidId, success: function (jsonResult) {}, error: function (data. messager. alert ('hs', 'Evaluation method submission failed! ', 'Warning'); return ;}}); // submit the content in the table after the score is modified // obtain all rows in the table var allRows =$ ('# tg '). treegrid ('getots'); // obtain the number of rows var rowsCount = allRows. length; // declare an array var arrayJudgeItems = []; // cyclically traverse all rows and save the records of each row as an object in the array for (I = 0; I <rowsCount; I ++) {// obtain the line I record var Row = allRows [I]; var rowIndex = $ ('# tg '). treegrid ('getrowindex ', Row) + 2; // instantiate a scoring item object var BidJudgeTable = {RowIndex: rowIndex, JudgeItemName: Row. judgeItemName, JudgeItemContent: Row. judgeItemContent, Score: Row. score}; // Add the arrayJudgeItems object to the array. push (BidJudgeTable);} // submit data $. ajax ({type: 'post', async: false, url: '/InviteBid/receivebidjudgetable', contentType: 'application/json', // required, data: JSON. stringify (arrayJudgeItems), success: function (result) {// alert ("success") ;}, error: function (data) {// alert ("error") ;}}); $ ('# evaluationbid '). hide (); $ ('# btnnext '). hide (); $ ('# FinishFile '). show (); $ ('# maincontent '). panel ({title: 'generate bidding files'});} else if (currentTitle = 'generate bidding files '){}}); /** control the page conversion between the previous page and the next page --- Zhou --- June 13, November 15, 2015 * summary: control the display and hiding of the main page * param: parameter showid: id of the div of the page to be displayed, for example, "# BidInfo" */function ControlContent (showid) {// id Array var stepContents = new Array ("# BidInfo", "# InfoDisplay ", "# EvaluationBid", "# FinishFile"); // cyclically traverses the id value of the div in the array. If it is the current step, the page content is set to display, the rest are set to hide var contentIndex; // the index value of the elements in the array for (contentIndex in stepContents) {var stepContent = stepContents [contentIndex]; // obtain the element value if (showid = stepContent) {$ (stepContent ). show (); // display} else {$ (stepContent ). hide (); // hide} // click the previous button + progress bar effect --- Zhou -- November 15, 2015 $ ("# btnback "). bind ("click", function () {// determines the var currentTitle =$ ('# maincontent') in the previous step based on the current title '). panel ('options '). title; switch (currentTitle) {case "generate tender No.": $ ("# li2 "). removeClass ("ui-step-active"); $ ("# li2 "). addClass ("ui-step-line"); $ ("# li1 "). removeClass ("ui-step-done"); $ ("# li1 "). addClass ("ui-step-active"); $ ("# currentTitle "). text ("Enter project information"); ControlContent ('# BidInfo'); $ ("# btnback "). hide (); $ ('# btnnext '). show (); $ ('# maincontent '). panel ({title: 'fill in project information'}); break; case "set evaluation method": $ ("# li3 "). removeClass ("ui-step-active"); $ ("# li3 "). addClass ("ui-step-line"); $ ("# li2 "). removeClass ("ui-step-done"); $ ("# li2 "). addClass ("ui-step-active"); $ ("# currentTitle "). text ("generate tender No."); ControlContent ('# infodisplay'); $ (' # btnnext '). show (); $ ('# maincontent '). panel ({title: 'generate tender No. '}); break; case "generate tender file": $ ("# li4 "). removeClass ("ui-step-active"); $ ("# li4 "). addClass ("ui-step-line"); $ ("# li3 "). removeClass ("ui-step-done"); $ ("# li3 "). addClass ("ui-step-active"); $ ("# currentTitle "). text ("set evaluation method"); ControlContent ('# evaluationbid'); $ (' # btnnext '). show (); $ ('# maincontent '). panel ({title: 'set evaluation method'}); break; default :}});

Only the progress bar is displayed in the view section:

@ * Step * @ <div class = "row" style = "margin-top: 3% "> <div class =" col-md-2 "> </div> @ * Step bar area * @ <div class =" col-md-8 "> @ * Step * @ <ol class = "ui-step ui-step-4"> <li id = "li1" class = "ui-step-start ui-step-active"> <div class = "ui-step-line ">-</div> <div id =" d1 "class =" ui-step-icon "> <I class =" iconfont "> Break </I> <I class = "ui-step-number"> 1 </I> <span class = "ui-step-text"> enter project information </span> </div> </li> <li id = "li2" class = "ui-step-line"> <div class = "ui-step-line">-</div> <div class =" ui-step-icon "> <I class =" iconfont "> detail </I> <I class =" ui-step-number "> 2 </I> <span class = "ui-step-text"> Generate the tender id </span> </div> </li> <li id = "li3" class = "ui-step-line"> <div class = "ui-step-line">-</div> <div class = "ui-step-icon"> <I class = "iconfont"> Break </I> <I class = "ui-step-number"> 3 </I> <span class = "ui-step-text"> set the evaluation Evaluation Method </span> </div> </li> <li id = "li4" class = "ui-step-end"> <div class = "ui-step-line">-</div> <div class = "ui-step-icon"> <I class = "iconfont"> detail </I> <I class = "ui-step-number"> 4 </I> <span class = "ui-step-text"> Generate the bidding file </span> </div> </li> </ol> </div> <div class = "col-md-2"> </div>

Add the css style to be referenced in the progress bar:

@ * File to be referenced by the progress bar * @ * AliceUI basic style * @ <link href = ".. /.. /Content/base-master/src/base.css "rel =" stylesheet "/> @ * Step style * @ <link href = ".. /.. /Content/step-master/step.css "rel =" stylesheet "/> @ * AliceUI icon font * @ <link href = ".. /.. /Content/iconfont-master/index.css "rel =" stylesheet "/>

The above section describes how JQuery + EasyUI can easily implement step-by-step effects. I hope it will be helpful to you!

Articles you may be interested in:

• Example code of loaing effect in Jquery easyui
• Jquery easyui scroll bar settings
• Basic operations such as adding, modifying, deleting, and querying Jquery EasyUI
• Jquery easyui combobox fuzzy filtering (sample code)
• Jquery plugin easyUi Form Verification submission (sample code)
• How to clear the DataGrid result set in EasyUI component under Jquery
• The confirmation dialog box and sample code for Loading results are displayed in Jquery EasyUI.
• Simple Example of treegrid usage in jquery easyui
• Implementation of local paging using jQuery EasyUI datagrid
• Combobox in jQuery + easyui implements drop-down box Effects