Jquery+easyui Easy implementation of step bar effect _jquery

Easyui Introduction

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

Easyui provides the necessary functionality for creating modern, interactive, JavaScript applications.

With Easyui you don't have to write a lot of code, you just have to write some simple HTML tags to define the user interface.

Easyui is a perfect framework for supporting HTML5 Web pages.

Easyui saves you the time and scale of your web development.

Easyui is simple but powerful.

The jquery Easyui provides Easy-to-use components that enable WEB developers to quickly build program pages on popular jQuery cores and HTML5.

First to show you the effect of the picture:

Project requirements: In our usual shopping time, is often such a step, place orders, pay, sellers shipments, confirm receipt, evaluation. So if the UI is designing a progress bar, then the user can see exactly where they are and what steps they need to take.

Then look at the foreground frame of our project, using is EASYUI+MVC, I just need to write a few JS and view to interact on OK, I spent a day to see how it is the whole page is how to achieve the basic is to refer to a Easyui style, with Ajax for the transfer value, Invokes the method in the controller in the background. Now that I'm implementing the dynamic effect of a foreground page, write the jquery method on the previous step and next to the switch selection for node activation and completion. Write a JS method to choose the control of the main page display and hide, I wrote a few div view, so my method is a few div show jump.

Review the knowledge points of jquery:

1. Form loading events corresponding to the Window.onload method

2. There are many kinds of button binding events

1 using JS, write a function on the button's onclick event.

2 use jquery to bind an anonymous function $ (' #btnnext '). Bind (' click ', Function () {});

3. Add class and delete class Removeclass and addclass, where ID and class difference, in jquery ID has # opening

The difference between 4.js and jquery is that the latter uses the least amount of code to express the most meaning, the latter being a higher layer of encapsulation.

The type of 5.AJAX background delivery method is different from post and get,get relative to the amount of data transmitted by the URL request to pass the user's transmission, post needs to submit forms, security is high.

Part of the Code show:

Click Next button + progress bar to advance an effect of $ (' #btnnext '). Bind (' click ', function () {//To determine whether each input box verifies through if (inputvalidate () = = False) {return; 
///Depending on the current title, decide what the next step is var Currenttitle = $ (' #MainContent '). Panel (' Options '). title; if (Currenttitle = = ' Fill in Project Info ') {//Click 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"). AddClass ("ui-step-active"); Add an active node $ (' #NewFile '). Hide ()//Make button hides $ (' #BidInfo '). Hide ()/basic information Hidden $.get ('/invitebid/getinvitebidid ', { 
Bidtype:bidtype}, function (data, status) {//Assign value in the Tender Item Number text box (' #InviteBidId '). val (data); 
$ (' #InfoDisplay '). Show (); 
}); 
$ (' #btnback '). Show (); 
Controlcontent ("#InfoDisplay"); 
$ (' #btnArea '). Show (); 
Change the title $ (' #MainContent '). Panel ({title: ' Generate bid number '}); //If the current position is to fill in the project information, click Next to submit the project basic information if (Currenttitle = = ' Generate bid number ') {//Get project basic information var bidproid = $ (' #InviteBidId '). Val (); Get the bid number var bidproname = $ (' #BidProName '). Val ()//Get the name of the bidding project
var purchaseunit = $ (' #PurchaseUnit '). Val ()//Get purchase Unit Invitebidtypeid = $ (' #comboInviteBidType '). ComboBox (' GetValue ') //Get the tender Way id Itemtypeid = $ (' #comboItemType '). ComboBox (' GetValue '); Get heading type id var purchaseagency = $ (' #PurchaseAgency '). Val ()//Get sourcing agent var bidopentime = $ (' #BidOpenTime '). Datebox (' GetText ');//Bid Opening time var Bidguarantecash = $ (' #BidGuaranteCash '). Val ()//bid margin var salestartdate = $ (' #SaleStartDate '). Datebox (' getText ')//obtain tender documents for sale starting time var saleenddate = $ (' #SaleEndDate '). Datebox (' getText ')//obtain tender documents for sale Click Next to respond to the scroll bar $ ("#li2"). Removeclass ("ui-step-active"); Removes 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 ',//must have, table Shows the data type data:JSON.stringify ({' Bidzrecorder ': [{' Bidprojectid ': bidproid, 'Bidrecordname ': bidproname, ' purchaseunit ': purchaseunit, ' purchaseagency ': purchaseagency, ' SaleStartDate ': Salestartdate, ' saleenddate ': saleenddate, ' bidopentime ': bidopentime, ' Bidguarantecash ': Bidguarantecash, ' ItemId ': Itemtypeid, ' Invitebidid ': Invitebidtypeid}]}, Success:function (Jsonresult) {$ (' #InfoDisplay '). Hide ();//number information hidden $ 
(' #EvaluationBid '). Show ()///Bid Evaluation Method area Display//main content area title change to set up bid evaluation Scheme $ (' #MainContent '). Panel ({title: ' Set up bid evaluation method '}); The first step of the bid evaluation method is to set the text font to Red $ (' #firstStep '). CSS ({color: ' Red '})}, Error:function (data) {$.messager.alert (' hint ', ' fill in the project information failed ！ 
', ' warning '); 
Return 
} 
}); 
else if (Currenttitle = ' Set Evaluation method ') {if ($ (' #comboEvaluationMethod '). ComboBox (' getText ') = = ') {return false; 
} if (Saveflag = = False) {return; The id var bidrecordid = $ (' #InviteBidId ') of the bid evaluation method. val (); Get bid number//Click Next response scroll bar $ ("#li3"). Removeclass ("ui-step-active"); Removes the active node $ ("#li3"). AddClass ("Ui-step-done"); Add a Completed node $ ("#li4"). Removeclass ("Ui-step-line"); Remove a line $ ("#li4"). AddClass ("ui-step-active"); 
Add an active node $ ("#btnback"). Show (); 
Controlcontent (' #FinishFile '); Submission of bid evaluation method $.ajax ({type: ' POST ', url: '/invitebid/updatebidzrecord/? 
Judgebidid= ' + judgebidid + ' &bidrecordid= ' + Bidrecordid,//data:judgebidid, Success:function (JsonResult) {}, Error:function (data) {$.messager.alert (' hint ', ' bid evaluation method submitted failed! 
', ' warning '); 
Return 
} 
}); 
Submit the contents of the table after the modified score//Get all rows in the table var allrows = $ (' #tg '). Treegrid (' getroots '); 
Get line number var rowscount = allrows.length; 
Declares an array of var arrayjudgeitems = []; 
Loops through all rows and saves the records of each row as an object in the array for (i = 0; i < Rowscount; i++) {//Get the line I record var row = allrows[i]; 
var RowIndex = $ (' #tg '). Treegrid (' Getrowindex ', Row) + 2; Instantiate a score Item object var bidjudgetable = {Rowindex:rowindex, JudgeItemName:Row.JudgeItemName, JudgeItemContent:Row.JudgeI 
Temcontent, Score:Row.Score}; 
Adds an object to the array Arrayjudgeitems.push (bidjudgetable); }//Submit data $.ajax ({type: ' POST ', Async:false, url: '/invitebid/receivebidjudgetablE ', ContentType: ' Application/json ',//must have, indicating the type of data submitted Data:JSON.stringify (Arrayjudgeitems), success:function (Result) 
{//alert ("success"); 
}, Error:function (data) {//alert ("error"); 
} 
}); 
$ (' #EvaluationBid '). Hide (); 
$ (' #btnnext '). Hide (); 
$ (' #FinishFile '). Show (); 
$ (' #MainContent '). Panel ({title: ' Generate Tender Documents '}); 
else if (currenttitle = = ' Generate Tender file ') {}});  * * To control the page conversion of the previous and next pages---Zhou---November 15, 2015 *summary: Control the display and hide of the main page *param: parameter showid: The ID of the div of the page to display, such as the "#BidInfo"/function Controlcontent (SHOWID) {//main content page ID array var stepcontents = new Array ("#BidInfo", "#InfoDisplay", "#EvaluationBid", "#Fin 
Ishfile "); Loops through the ID values of the div in the array, and, if the current step, sets the page content to display, with the rest set to the index value of the element in the hidden var contentindex;//array for (ContentIndex in stepcontents) {var stepc Ontent = stepcontents[contentindex];//Gets the value of the element if (Showid = = stepcontent) {$ (stepcontent). Show ()//display} else {$ (stepc ontent). Hide ();//Hide}}//Click on the Previous button + progress bar effect---Zhou-November 15, 2015 $ ("#btnback"). Bind ("click", Function () {////According to the current title, decide the previous stepWhat is var currenttitle = $ (' #MainContent '). Panel (' Options '). title; 
Switch (currenttitle) {case "Generate bid number": $ ("#li2"). Removeclass ("ui-step-active"); 
$ ("#li2"). AddClass ("Ui-step-line"); 
$ ("#li1"). Removeclass ("Ui-step-done"); 
$ ("#li1"). AddClass ("ui-step-active"); 
$ ("#currentTitle"). Text ("Fill in the project Information"); 
Controlcontent (' #BidInfo '); 
$ ("#btnback"). Hide (); 
$ (' #btnnext '). Show (); 
$ (' #MainContent '). Panel ({title: ' Fill Out Project information '}); 
Break 
Case "Set the bid 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 bid number"); 
Controlcontent (' #InfoDisplay '); 
$ (' #btnnext '). Show (); 
$ (' #MainContent '). Panel ({title: ' Generate bid number '}); 
Break 
Case "Generate Tender Document": $ ("#li4"). Removeclass ("ui-step-active"); 
$ ("#li4"). AddClass ("Ui-step-line"); 
$ ("#li3"). Removeclass ("Ui-step-done"); 
$ ("#li3"). AddClass ("ui-step-active"); 
$ ("#currentTitle"). Text ("Set the bid evaluation method"); Controlcontent (' #EvaluationBid '); 
$ (' #btnnext '). Show (); 
$ (' #MainContent '). Panel ({title: ' Set Bid evaluation method '}); 
Break  Default:}});

View section I only show progress bars:

@* the Step bar *@ <div class= "Row" style= "margin-top:3%" > <div class= "col-md-2" ></div> @* the area *@ <div  class= "col-md-8" > @* step bar *@ <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" ;</i> <i class= "Ui-step-number" >1</i> <span class= "Ui-step-text" > Fill in Project Information </span> </ div> </li> <li id= "Li2" class= "Ui-step-line" > <div class= "ui-step-line" >-</div> <div CLA ss= "Ui-step-icon" > <i class= "iconfont" ></i> <i class= "Ui-step-number" >2</i> <span class= "Ui-step-text" > Generate tender Number </span> </div> </li> <li id= "Li3" class= "Ui-step-line" > < 
Div class= "Ui-step-line" >-</div> <div class= "Ui-step-icon" > <i class= "Iconfont" ></i> <i class= "Ui-step-number" >3</i> &Lt;span class= "Ui-step-text" > Setting Bid 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" ></i > <i class= "ui-step-number" >4</i> <span class= "Ui-step-text" > Generate tender Documents </span> </div> &  lt;/li> </ol> </div> <div class= "col-md-2" ></div> </div>

To add a progress bar you need to reference the CSS style:

The @* progress bar needs to refer to the file *@ 
@* aliceui base style *@ <link 
"... /.. /content/base-master/src/base.css "rel=" stylesheet "/> 
@* Step bar style *@ <link href= 
". /.. /content/step-master/step.css "rel=" stylesheet "/> 
@*aliceui icon font *@ <link 
" ... /.. /content/iconfont-master/index.css "rel=" stylesheet "/>

The above mentioned is a small force to introduce Jquery+easyui easy to achieve the effect of steps, I hope to help you!