JQuery+EasyUI輕松實現(xiàn)步驟條效果

2019-11-20 10:32:19

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

EasyUI 簡介

easyui是一種基于jQuery的用戶界面插件集合。

easyui為創(chuàng)建現(xiàn)代化，互動，JavaScript應用程序，提供必要的功能。

使用easyui你不需要寫很多代碼，你只需要通過編寫一些簡單HTML標記，就可以定義用戶界面。

easyui是個完美支持HTML5網(wǎng)頁的完整框架。

easyui節(jié)省您網(wǎng)頁開發(fā)的時間和規(guī)模。

easyui很簡單但功能強大的。

jQuery EasyUI 提供易于使用的組件，它使 Web 開發(fā)人員能快速地在流行的 jQuery 核心和 HTML5 上建立程序頁面。

先給大家展示下效果圖：

　項目需求：在我們平時購物的時候，經(jīng)常是這樣一個步驟，下訂單，交貨款，賣家發(fā)貨，確認收貨，評價。那么如果UI設(shè)計上一個進度條，這樣用戶就可以很清楚的看到自己在哪個位置，需要進行哪些步驟了。

　　再來看看我們項目的前臺框架，采用的是EasyUI+MVC，我只需要去寫幾個JS和view進行互動就OK了，我用了一天的時間來看它整個頁面是怎么實現(xiàn)的，基本就是引用一個easyUI的樣式，用AJAX進行傳值，調(diào)用后臺的controller中的方法。既然我實現(xiàn)的是一個前臺頁面的動態(tài)效果，就在上一步和下一步上寫JQuery方法進行switch選擇進行節(jié)點的激活和完成。寫一個JS的方法來選擇控制主體頁面的顯示和隱藏，我把view寫成了幾個div,所以我的方法就是幾個div顯示的跳轉(zhuǎn)。

回顧JQuery的知識點：

　1.窗體加載事件相應的是window.onload的方法

　2.按鈕綁定事件有很多種

1）用JS，寫一個function放在按鈕的onclick的事件上。

2）用JQuery綁定一個匿名函數(shù) $('#btnnext').bind('click', function (){});

　3.增加類和刪除類 removeclass和addclass,其中ID和class的區(qū)別，在JQuery中ID有#開頭

　4.js和JQuery的區(qū)別在于，后者用最少的代碼表達了最多的意思，后者是前者了更高一層的封裝。

　5.AJAX后臺傳遞方法的類型區(qū)別 POST和GET，get相對傳輸?shù)臄?shù)據(jù)量小，通過URL請求來傳遞用戶的傳輸，post需要提交表單，安全度高。

部分代碼展示：

//點擊下一步按鈕+進度條前進一個的效果$('#btnnext').bind('click', function () { //判斷各個輸入框是否驗證通過 if (InputValidate() == false) { return; } //根據(jù)當前標題，決定下一步是什么 var currentTitle = $('#MainContent').panel('options').title; if (currentTitle == '填寫項目信息') { //點擊下一步響應滾動條 $("#li1").removeClass("ui-step-active"); //將活動節(jié)點移除 $("#li1").addClass("ui-step-done"); //增加一個完成的節(jié)點 $("#li2").removeClass("ui-step-line"); //移除一個線 $("#li2").addClass("ui-step-active"); //增加一個活躍著的節(jié)點 $('#NewFile').hide();//制作按鈕隱藏 $('#BidInfo').hide();//基本信息隱藏 $.get('/InviteBid/GetInviteBidId', { bidType: bidType }, function (data, status) { //在招標項目編號文本框中賦值 $('#InviteBidId').val(data); $('#InfoDisplay').show(); }); $('#btnback').show(); ControlContent("#InfoDisplay"); //$('#btnArea').show(); //更改標題 $('#MainContent').panel({ title: '生成招標編號' }); } //如果當前位置為填寫項目信息，點擊下一步時提交項目基本信息 if (currentTitle == '生成招標編號') { //獲得項目基本信息 var BidProId = $('#InviteBidId').val(); //獲得招標編號 var BidProName = $('#BidProName').val();//獲得招標項目名稱 var PurchaseUnit = $('#PurchaseUnit').val();//獲得采購單位 InviteBidTypeId = $('#comboInviteBidType').combobox('getValue');//獲得招標方式Id ItemTypeId = $('#comboItemType').combobox('getValue'); //獲得品目類型Id var PurchaseAgency = $('#PurchaseAgency').val();//獲得采購代理 var BidOpenTime = $('#BidOpenTime').datebox('getText');//開標時間 var BidGuaranteCash = $('#BidGuaranteCash').val();//投標保證金 var SaleStartDate = $('#SaleStartDate').datebox('getText');//獲得招標文件發(fā)售起始時間 var SaleEndDate = $('#SaleEndDate').datebox('getText');//獲得招標文件發(fā)售終止時間 //點擊下一步響應滾動條 $("#li2").removeClass("ui-step-active"); //將活動節(jié)點移除 $("#li2").addClass("ui-step-done"); //增加一個完成的節(jié)點 $("#li3").removeClass("ui-step-line"); //移除一個線 $("#li3").addClass("ui-step-active"); //增加一個活躍著的節(jié)點 $("#btnback").show(); ControlContent("#EvaluationBid"); //提交項目信息數(shù)據(jù)到Controller $.ajax({ type: 'POST', url: '/InviteBid/AddBidZRecord', contentType: 'application/json', //必須有,表示提交的數(shù)據(jù)類型 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();//編號信息隱藏 $('#EvaluationBid').show();//評標方法區(qū)域顯示 //主內(nèi)容區(qū)域標題改為設(shè)置評標辦法 $('#MainContent').panel({ title: '設(shè)置評標辦法' }); //評標辦法的第一步的文字字體設(shè)為紅色 $('#firstStep').css({ color: 'red' }) }, error: function (data) { $.messager.alert('提示', '填寫項目信息失??！', 'warning'); return; } }); } else if (currentTitle == '設(shè)置評標辦法') { if ($('#comboEvaluationMethod').combobox('getText') == '') { return false; } if (saveFlag == false) { return; } //獲得評標辦法的Id var BidRecordId = $('#InviteBidId').val(); //獲得招標編號 //點擊下一步響應滾動條 $("#li3").removeClass("ui-step-active"); //將活動節(jié)點移除 $("#li3").addClass("ui-step-done"); //增加一個完成的節(jié)點 $("#li4").removeClass("ui-step-line"); //移除一個線 $("#li4").addClass("ui-step-active"); //增加一個活躍著的節(jié)點 $("#btnback").show(); ControlContent('#FinishFile'); //提交評標辦法 $.ajax({ type: 'POST', url: '/InviteBid/UpdateBidZRecord/?JudgeBidId=' + JudgeBidId + '&BidRecordId=' + BidRecordId, //data: JudgeBidId, success: function (jsonResult) { }, error: function (data) { $.messager.alert('提示', '評標辦法提交失??！', 'warning'); return; } }); //提交修改分值后的表格中的內(nèi)容 //獲得表格中的所有行 var allRows = $('#tg').treegrid('getRoots'); //獲得行數(shù) var rowsCount = allRows.length; //聲明一個數(shù)組 var arrayJudgeItems = []; //循環(huán)遍歷所有行，把每一行的記錄作為一個對象存到數(shù)組中 for (i = 0; i < rowsCount; i++) { //獲得第i行記錄 var Row = allRows[i]; var rowIndex = $('#tg').treegrid('getRowIndex', Row) + 2; //實例化一個評分項目對象 var BidJudgeTable = { RowIndex: rowIndex, JudgeItemName: Row.JudgeItemName, JudgeItemContent: Row.JudgeItemContent, Score: Row.Score }; //在數(shù)組中添加對象 arrayJudgeItems.push(BidJudgeTable); } //提交數(shù)據(jù) $.ajax({ type: 'POST', async: false, url: '/InviteBid/ReceiveBidJudgeTable', contentType: 'application/json', //必須有,表示提交的數(shù)據(jù)類型 data: JSON.stringify(arrayJudgeItems), success: function (result) { //alert("success"); }, error: function (data) { //alert("error"); } }); $('#EvaluationBid').hide(); $('#btnnext').hide(); $('#FinishFile').show(); $('#MainContent').panel({ title: '生成招標文件' }); } else if (currentTitle == '生成招標文件') { } }); /* *用來控制上一頁和下一頁的頁面轉(zhuǎn)換---周洲---2015年11月15日 *summary：控制主體頁面的顯示和隱藏 *param： 參數(shù)showid：要顯示的頁面的div的id，如"#BidInfo" */ function ControlContent(showid) { //主體內(nèi)容頁面的id數(shù)組 var stepContents = new Array("#BidInfo", "#InfoDisplay", "#EvaluationBid", "#FinishFile"); //循環(huán)遍歷數(shù)組中的div的id值，如果為當前步驟，則將頁面內(nèi)容設(shè)為顯示，其余設(shè)為隱藏 var contentIndex;//數(shù)組中元素的索引值 for (contentIndex in stepContents) { var stepContent = stepContents[contentIndex];//獲得元素的值 if (showid == stepContent) { $(stepContent).show();//顯示 } else { $(stepContent).hide();//隱藏 } } } //點擊上一步按鈕+進度條效果---周洲--2015年11月15日 $("#btnback").bind("click", function () { //根據(jù)當前標題，決定上一步是什么 var currentTitle = $('#MainContent').panel('options').title; switch (currentTitle) { case "生成招標編號": $("#li2").removeClass("ui-step-active"); $("#li2").addClass("ui-step-line"); $("#li1").removeClass("ui-step-done"); $("#li1").addClass("ui-step-active"); $("#currentTitle").text("填寫項目信息"); ControlContent('#BidInfo'); $("#btnback").hide(); $('#btnnext').show(); $('#MainContent').panel({ title: '填寫項目信息' }); break; case "設(shè)置評標方法": $("#li3").removeClass("ui-step-active"); $("#li3").addClass("ui-step-line"); $("#li2").removeClass("ui-step-done"); $("#li2").addClass("ui-step-active"); $("#currentTitle").text("生成招標編號"); ControlContent('#InfoDisplay'); $('#btnnext').show(); $('#MainContent').panel({ title: '生成招標編號' }); break; case "生成招標文件": $("#li4").removeClass("ui-step-active"); $("#li4").addClass("ui-step-line"); $("#li3").removeClass("ui-step-done"); $("#li3").addClass("ui-step-active"); $("#currentTitle").text("設(shè)置評標方法"); ControlContent('#EvaluationBid'); $('#btnnext').show(); $('#MainContent').panel({ title: '設(shè)置評標方法' }); break; default: } });

視圖部分我只展示進度條：

@*步驟條*@ <div class="row" style="margin-top:3%"> <div class="col-md-2" ></div> @* 步驟條所在區(qū)域*@ <div class="col-md-8"> @*步驟條*@ <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">填寫項目信息</span> </div> </li> <li id="li2" class="ui-step-line"> <div class="ui-step-line">-</div> <div class="ui-step-icon"> <i class="iconfont"></i> <i class="ui-step-number">2</i> <span class="ui-step-text">生成招標編號</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> <span class="ui-step-text">設(shè)置評標方法</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">生成招標文件</span> </div> </li> </ol> </div> <div class="col-md-2"></div> </div>

添加進度條需要引用的css樣式：

@*進度條需要引用的文件*@ @* AliceUI基礎(chǔ)樣式 *@ <link href="../../Content/base-master/src/base.css" rel="stylesheet" /> @* 步驟條樣式 *@ <link href="../../Content/step-master/step.css" rel="stylesheet" /> @*AliceUI圖標字體*@ <link href="../../Content/iconfont-master/index.css" rel="stylesheet" />

以上所述是小逼給大家介紹JQuery+EasyUI輕松實現(xiàn)步驟條效果，希望對大家有所幫助！

上一篇：Javascript技術(shù)棧中的四種依賴注入詳解

下一篇：全面解析Bootstrap布局組件應用