JQuery+EasyUI輕松實(shí)現(xiàn)步驟條效果
更新時(shí)間：2016年02月22日 16:12:30 作者：十一期-周洲
jQuery EasyUI 提供易于使用的組件，它使 Web 開發(fā)人員能快速地在流行的 jQuery 核心和 HTML5 上建立程序頁面。通過本文給大家介紹JQuery+EasyUI輕松實(shí)現(xiàn)步驟條效果，需要的朋友參考下
EasyUI 簡(jiǎn)介
easyui是一種基于jQuery的用戶界面插件集合。
easyui為創(chuàng)建現(xiàn)代化，互動(dòng)，JavaScript應(yīng)用程序，提供必要的功能。
使用easyui你不需要寫很多代碼，你只需要通過編寫一些簡(jiǎn)單HTML標(biāo)記，就可以定義用戶界面。
easyui是個(gè)完美支持HTML5網(wǎng)頁的完整框架。
easyui節(jié)省您網(wǎng)頁開發(fā)的時(shí)間和規(guī)模。
easyui很簡(jiǎn)單但功能強(qiáng)大的。
jQuery EasyUI 提供易于使用的組件，它使 Web 開發(fā)人員能快速地在流行的 jQuery 核心和 HTML5 上建立程序頁面 。
先給大家展示下效果圖：
項(xiàng)目需求：在我們平時(shí)購(gòu)物的時(shí)候，經(jīng)常是這樣一個(gè)步驟，下訂單，交貨款，賣家發(fā)貨，確認(rèn)收貨，評(píng)價(jià)。那么如果UI設(shè)計(jì)上一個(gè)進(jìn)度條，這樣用戶就可以很清楚的看到自己在哪個(gè)位置，需要進(jìn)行哪些步驟了。
再來看看我們項(xiàng)目的前臺(tái)框架，采用的是EasyUI+MVC，我只需要去寫幾個(gè)JS和view進(jìn)行互動(dòng)就OK了，我用了一天的時(shí)間來看它整個(gè)頁面是怎么實(shí)現(xiàn)的，基本就是引用一個(gè)easyUI的樣式，用AJAX進(jìn)行傳值，調(diào)用后臺(tái)的controller中的方法。既然我實(shí)現(xiàn)的是一個(gè)前臺(tái)頁面的動(dòng)態(tài)效果，就在上一步和下一步上寫JQuery方法進(jìn)行switch選擇進(jìn)行節(jié)點(diǎn)的激活和完成。寫一個(gè)JS的方法來選擇控制主體頁面的顯示和隱藏，我把view寫成了幾個(gè)div,所以我的方法就是幾個(gè)div顯示的跳轉(zhuǎn)。
回顧JQuery的知識(shí)點(diǎn)：
1.窗體加載事件相應(yīng)的是window.onload的方法
2.按鈕綁定事件有很多種
1）用JS，寫一個(gè)function放在按鈕的onclick的事件上。
2）用JQuery綁定一個(gè)匿名函數(shù) $('#btnnext').bind('click', function (){});
3.增加類和刪除類 removeclass和addclass,其中ID和class的區(qū)別，在JQuery中ID有#開頭
4.js和JQuery的區(qū)別在于，后者用最少的代碼表達(dá)了最多的意思，后者是前者了更高一層的封裝。
5.AJAX后臺(tái)傳遞方法的類型區(qū)別 POST和GET，get相對(duì)傳輸?shù)臄?shù)據(jù)量小，通過URL請(qǐng)求來傳遞用戶的傳輸，post需要提交表單，安全度高。
部分代碼展示：
//點(diǎn)擊下一步按鈕+進(jìn)度條前進(jìn)一個(gè)的效果
$('#btnnext').bind('click', function () {
//判斷各個(gè)輸入框是否驗(yàn)證通過
if (InputValidate() == false) {
return;
}
//根據(jù)當(dāng)前標(biāo)題，決定下一步是什么
var currentTitle = $('#MainContent').panel('options').title;
if (currentTitle == '填寫項(xiàng)目信息') {
//點(diǎn)擊下一步響應(yīng)滾動(dòng)條
$("#li1").removeClass("ui-step-active"); //將活動(dòng)節(jié)點(diǎn)移除
$("#li1").addClass("ui-step-done"); //增加一個(gè)完成的節(jié)點(diǎn)
$("#li2").removeClass("ui-step-line"); //移除一個(gè)線
$("#li2").addClass("ui-step-active"); //增加一個(gè)活躍著的節(jié)點(diǎn)
$('#NewFile').hide();//制作按鈕隱藏
$('#BidInfo').hide();//基本信息隱藏
$.get('/InviteBid/GetInviteBidId', { bidType: bidType }, function (data, status) {
//在招標(biāo)項(xiàng)目編號(hào)文本框中賦值
$('#InviteBidId').val(data);
$('#InfoDisplay').show();
});
$('#btnback').show();
ControlContent("#InfoDisplay");
//$('#btnArea').show();
//更改標(biāo)題
$('#MainContent').panel({
title: '生成招標(biāo)編號(hào)'
});
}
//如果當(dāng)前位置為填寫項(xiàng)目信息，點(diǎn)擊下一步時(shí)提交項(xiàng)目基本信息
if (currentTitle == '生成招標(biāo)編號(hào)') {
//獲得項(xiàng)目基本信息
var BidProId = $('#InviteBidId').val(); //獲得招標(biāo)編號(hào)
var BidProName = $('#BidProName').val();//獲得招標(biāo)項(xiàng)目名稱
var PurchaseUnit = $('#PurchaseUnit').val();//獲得采購(gòu)單位
InviteBidTypeId = $('#comboInviteBidType').combobox('getValue');//獲得招標(biāo)方式Id
ItemTypeId = $('#comboItemType').combobox('getValue'); //獲得品目類型Id
var PurchaseAgency = $('#PurchaseAgency').val();//獲得采購(gòu)代理
var BidOpenTime = $('#BidOpenTime').datebox('getText');//開標(biāo)時(shí)間
var BidGuaranteCash = $('#BidGuaranteCash').val();//投標(biāo)保證金
var SaleStartDate = $('#SaleStartDate').datebox('getText');//獲得招標(biāo)文件發(fā)售起始時(shí)間
var SaleEndDate = $('#SaleEndDate').datebox('getText');//獲得招標(biāo)文件發(fā)售終止時(shí)間
//點(diǎn)擊下一步響應(yīng)滾動(dòng)條
$("#li2").removeClass("ui-step-active"); //將活動(dòng)節(jié)點(diǎn)移除
$("#li2").addClass("ui-step-done"); //增加一個(gè)完成的節(jié)點(diǎn)
$("#li3").removeClass("ui-step-line"); //移除一個(gè)線
$("#li3").addClass("ui-step-active"); //增加一個(gè)活躍著的節(jié)點(diǎn)
$("#btnback").show();
ControlContent("#EvaluationBid");
//提交項(xiàng)目信息數(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();//編號(hào)信息隱藏
$('#EvaluationBid').show();//評(píng)標(biāo)方法區(qū)域顯示
//主內(nèi)容區(qū)域標(biāo)題改為設(shè)置評(píng)標(biāo)辦法
$('#MainContent').panel({
title: '設(shè)置評(píng)標(biāo)辦法'
});
//評(píng)標(biāo)辦法的第一步的文字字體設(shè)為紅色
$('#firstStep').css({ color: 'red' })
},
error: function (data) {
$.messager.alert('提示', '填寫項(xiàng)目信息失敗！', 'warning');
return;
}
});
}
else if (currentTitle == '設(shè)置評(píng)標(biāo)辦法') {
if ($('#comboEvaluationMethod').combobox('getText') == '') {
return false;
}
if (saveFlag == false) {
return;
}
//獲得評(píng)標(biāo)辦法的Id
var BidRecordId = $('#InviteBidId').val(); //獲得招標(biāo)編號(hào)
//點(diǎn)擊下一步響應(yīng)滾動(dòng)條
$("#li3").removeClass("ui-step-active"); //將活動(dòng)節(jié)點(diǎn)移除
$("#li3").addClass("ui-step-done"); //增加一個(gè)完成的節(jié)點(diǎn)
$("#li4").removeClass("ui-step-line"); //移除一個(gè)線
$("#li4").addClass("ui-step-active"); //增加一個(gè)活躍著的節(jié)點(diǎn)
$("#btnback").show();
ControlContent('#FinishFile');
//提交評(píng)標(biāo)辦法
$.ajax({
type: 'POST',
url: '/InviteBid/UpdateBidZRecord/?JudgeBidId=' + JudgeBidId + '&BidRecordId=' + BidRecordId,
//data: JudgeBidId,
success: function (jsonResult) {
},
error: function (data) {
$.messager.alert('提示', '評(píng)標(biāo)辦法提交失??！', 'warning');
return;
}
});
//提交修改分值后的表格中的內(nèi)容
//獲得表格中的所有行
var allRows = $('#tg').treegrid('getRoots');
//獲得行數(shù)
var rowsCount = allRows.length;
//聲明一個(gè)數(shù)組
var arrayJudgeItems = [];
//循環(huán)遍歷所有行，把每一行的記錄作為一個(gè)對(duì)象存到數(shù)組中
for (i = 0; i < rowsCount; i++) {
//獲得第i行記錄
var Row = allRows[i];
var rowIndex = $('#tg').treegrid('getRowIndex', Row) + 2;
//實(shí)例化一個(gè)評(píng)分項(xiàng)目對(duì)象
var BidJudgeTable = {
RowIndex: rowIndex,
JudgeItemName: Row.JudgeItemName,
JudgeItemContent: Row.JudgeItemContent,
Score: Row.Score
};
//在數(shù)組中添加對(duì)象
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: '生成招標(biāo)文件'
});
}
else if (currentTitle == '生成招標(biāo)文件') {
}
});
/*
*用來控制上一頁和下一頁的頁面轉(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值，如果為當(dāng)前步驟，則將頁面內(nèi)容設(shè)為顯示，其余設(shè)為隱藏
var contentIndex;//數(shù)組中元素的索引值
for (contentIndex in stepContents) {
var stepContent = stepContents[contentIndex];//獲得元素的值
if (showid == stepContent) {
$(stepContent).show();//顯示
}
else {
$(stepContent).hide();//隱藏
}
}
}
//點(diǎn)擊上一步按鈕+進(jìn)度條效果---周洲--2015年11月15日
$("#btnback").bind("click", function () {
//根據(jù)當(dāng)前標(biāo)題，決定上一步是什么
var currentTitle = $('#MainContent').panel('options').title;
switch (currentTitle) {
case "生成招標(biāo)編號(hào)":
$("#li2").removeClass("ui-step-active");
$("#li2").addClass("ui-step-line");
$("#li1").removeClass("ui-step-done");
$("#li1").addClass("ui-step-active");
$("#currentTitle").text("填寫項(xiàng)目信息");
ControlContent('#BidInfo');
$("#btnback").hide();
$('#btnnext').show();
$('#MainContent').panel({
title: '填寫項(xiàng)目信息'
});
break;
case "設(shè)置評(píng)標(biāo)方法":
$("#li3").removeClass("ui-step-active");
$("#li3").addClass("ui-step-line");
$("#li2").removeClass("ui-step-done");
$("#li2").addClass("ui-step-active");
$("#currentTitle").text("生成招標(biāo)編號(hào)");
ControlContent('#InfoDisplay');
$('#btnnext').show();
$('#MainContent').panel({
title: '生成招標(biāo)編號(hào)'
});
break;
case "生成招標(biāo)文件":
$("#li4").removeClass("ui-step-active");
$("#li4").addClass("ui-step-line");
$("#li3").removeClass("ui-step-done");
$("#li3").addClass("ui-step-active");
$("#currentTitle").text("設(shè)置評(píng)標(biāo)方法");
ControlContent('#EvaluationBid');
$('#btnnext').show();
$('#MainContent').panel({
title: '設(shè)置評(píng)標(biāo)方法'
});
break;
default:
}
});
視圖部分我只展示進(jìn)度條：
@*步驟條*@ <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">填寫項(xiàng)目信息</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">生成招標(biāo)編號(hào)</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è)置評(píng)標(biāo)方法</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">生成招標(biāo)文件</span> </div> </li> </ol> </div> <div class="col-md-2"></div> </div>
添加進(jìn)度條需要引用的css樣式：
@*進(jìn)度條需要引用的文件*@ @* AliceUI基礎(chǔ)樣式 *@ <link href="../../Content/base-master/src/base.css" rel="stylesheet" /> @* 步驟條樣式 *@ <link href="../../Content/step-master/step.css" rel="stylesheet" /> @*AliceUI圖標(biāo)字體*@ <link href="../../Content/iconfont-master/index.css" rel="stylesheet" />
以上所述是小逼給大家介紹JQuery+EasyUI輕松實(shí)現(xiàn)步驟條效果，希望對(duì)大家有所幫助！
相關(guān)文章
這篇文章主要介紹了jQuery與JS加載事件用法,結(jié)合實(shí)例形式分析了jQuery與JS加載事件的執(zhí)行順序與使用技巧,需要的朋友可以參考下2016-09-09
最簡(jiǎn)單的jQuery程序 入門者學(xué)習(xí)
用jQuery寫的一個(gè)簡(jiǎn)單的程序,用于入門練習(xí),發(fā)給大家,希望初學(xué)者有用.2009-07-07
最近在做一個(gè)網(wǎng)站，遇到需要給網(wǎng)站內(nèi)所有的文章加關(guān)鍵字鏈接的問題，我們?cè)跒g覽一些網(wǎng)站的文章的時(shí)候，會(huì)發(fā)現(xiàn)文章里面的某些關(guān)鍵字是加了鏈接的，并且高亮顯示。2010-10-10
這篇文章主要介紹了jquery獲取當(dāng)前日期的方法,涉及針對(duì)日期時(shí)間的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
JQuery給元素添加/刪除節(jié)點(diǎn)比如select
本教程詳細(xì)介紹下jQuery添加/刪除Select的Option項(xiàng)，感興趣的各位可以參考下哈2013-04-04
對(duì)博客系統(tǒng)已經(jīng)做到了博客評(píng)論模塊部分了，對(duì)單篇博文進(jìn)行靜態(tài)化的同時(shí)對(duì)博文的評(píng)論部分采取AJAX的方式去讀取。2009-11-11
這篇文章主要介紹了jQuery判斷自定義屬性data-val用法,結(jié)合實(shí)例形式分析了jQuery自定義屬性的定義與簡(jiǎn)單使用技巧,需要的朋友可以參考下2019-01-01
jquery表單驗(yàn)證需要做些什么，大家知道嗎？其實(shí)很簡(jiǎn)單只要做四件事情就可以順利完成表單驗(yàn)證，想知道哪四件事情嗎，請(qǐng)仔細(xì)閱讀下文。2015-11-11
jQuery實(shí)現(xiàn)的淡入淡出二級(jí)菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的淡入淡出二級(jí)菜單效果代碼,涉及jQuery中fadeIn及fadeOut的相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
jQuery 加上最后自己的驗(yàn)證 這段代碼可以添加自定義的 jquery驗(yàn)證，而不必單一的依靠在標(biāo)簽中寫 validation="{}", 或者是代碼方式寫驗(yàn)證規(guī)則，那樣都會(huì)在要驗(yàn)證的控件后面寫出錯(cuò)誤信息。2009-11-11