invite是什么意思ite在线翻译读音例句

JQuery+EasyUI轻松实现步骤条效果

EasyUI简介

easyui是⼀种基于jQuery的⽤户界⾯插件集合。

easyui为创建现代化，互动，JavaScript应⽤程序，提供必要的功能。

使⽤easyui你不需要写很多代码，你只需要通过编写⼀些简单HTML标记，就可以定义⽤户界⾯。

easyui是个完美⽀持HTML5⽹页的完整框架。

easyui节省您⽹页开发的时间和规模。

easyui很简单但功能强⼤的。

jQueryEasyUI提供易于使⽤的组件，它使Web开发⼈员能快速地在流⾏的jQuery核⼼和HTML5上建⽴程序页⾯。

先给⼤家展⽰下效果图：

项⽬需求：在我们平时购物的时候，经常是这样⼀个步骤，下订单，交货款，卖家发货，确认收货，评价。那么如果UI设计上⼀个进度条，这样⽤户就可以很清楚的看到⾃⼰在哪个位置，需要进⾏哪

些步骤了。

再来看看我们项⽬的前台框架，采⽤的是EasyUI+MVC，我只需要去写⼏个JS和v坐山观虎斗的意思 iew进⾏互动就OK了，我⽤了⼀天的时间来看它整个页⾯是怎么实现的，基本就是引⽤⼀个easyUI的样式，⽤AJAX

进⾏传值，调⽤后台的controller中的⽅法。既然我实现的是⼀个前台页⾯的动态效果，就在上⼀步和下⼀步上写JQuery⽅法进⾏switch选择进⾏节点的激活和完成。写⼀个JS的⽅法来选择控制主体页⾯

的显⽰和隐藏，我把view写成了⼏个div,所以我的⽅法就是⼏个div显⽰的跳转。

回顾JQuery的知识点：

1.窗体加载事件相应的是的⽅法

2.按钮绑定事件有很多种

1）⽤JS，写⼀个function放在按钮的onclick的事件上。

2）⽤JQuery绑定⼀个匿名函数$(\'#btnnext\').bind(\'click\',function(){});

3.增加类和删除类removeclass和addclass,其中ID和class的区别，在JQuery中ID有#开头

和JQuery的区别在于，后者⽤最少的代码表达了最多的意思，后者是前者了更⾼⼀层的封装。

后台传递⽅法的类型区别POST和GET，get相对传输的数据量⼩，通过URL请求来传递⽤户的传输，post需要提交表单，安全度⾼。

部分代码展⽰：

//点击下⼀步按钮+进度条前进⼀个的效果

$(\'#btnnext\').bind(\'click\',function(){

//判断各个输⼊框是否验证通过

if(InputValidate()==false){

return;

}

//根据当前标题，决定下⼀步是什么

varcurrentTitle=$(\'#MainContent\').panel(\'options\').title;

if(currentTitle==\'填写项⽬信息\'){

//点击下⼀步响应滚动条

$(\"#li1\").removeClass(\"ui-step-active\");//将活动节点移除

$(\"#li1\").addClass(\"ui-step-done\");//增加⼀个完成的节点

$(\"#li2\").rem清明上河图全图原版 oveClass(\"ui-step-line\");//移除⼀个线

$(\"#li2\").addClass(\"ui-step-active\");//增加⼀个活跃着的节点

$(\'#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==\'⽣成招标编号\'){

//获得项⽬基本信息

varBidProId=$(\'#InviteBidId\').val();//获得招标编号

varBidProName=$(\'#BidProName\').val();//获得招标项⽬名称

varPurchaseUnit=$(\'#PurchaseUnit\').val();//获得采购单位

InviteBidTypeId=$(\'#comboInviteBidType\').combobox(\'getValue\');//获得李白诗句摘抄大全 招标⽅式Id

ItemTypeId=$(\'#comboItemType\').combobox(\'getValue\');//获得品⽬类型Id

varPurchaseAgency=$(\'#PurchaseAgency\').val();//获得采购代理

varBidOpenTime=$(\'#BidOpenTime\').datebox(\'getText\');//开标时间

varBidGuaranteCash=$(\'#BidGuaranteCash\').val();//投标保证⾦

varSaleStartDate=$(\'#SaleStartDate\').datebox(\'getText\');//获得招标⽂件发售起始时间

varSaleEndDate=$(\'#SaleEndDate\').datebox(\'getText\');//获得招标⽂件发售终⽌时间

//点击下⼀步响应滚动条

$(\"#li2\").removeClass(\"ui-step-active\");//将活动节点移除

$(\"#li2\").addClass(\"ui-step-done\");//增加⼀个完成的节点

$(\"#li3\").removeClass(\"ui-step-line\");//移除⼀个线

$(\"#li3\").addClass(\"ui-step-active\");//增加⼀个活跃着的节点

$(\"#btnback\").show();

ControlContent(\"#EvaluationBid\");

//提交项⽬信息数据到Controller

$.ajax({

type:\'POST\',

url:\'/InviteBid/AddBidZRecord\',

contentType:\'application/json\',//必须有,表⽰提交的数据类型

data:ify({

\'BidZRecorder\':

[{\'BidProjectId\':BidProId,\'BidRecordName\':BidProName,\'PurchaseUnit\':PurchaseUnit,\'PurchaseAgency\':PurchaseAgency,\'SaleStartDate\':SaleStartDate,\'SaleEndDate\':SaleEndDate,\'BidOpenTime\':BidOpenTime,\'BidGuaranteCash\':BidGuaran

}),

success:function(jsonResult){

$(\'#InfoDisplay\').hide();//编号信息隐藏

$(\'#EvaluationBid\').show();//评标⽅法区域显⽰

//主内容区域标题改为设置评标办法

$(\'#MainContent\').panel({

title:\'设置评标办法\'

});

//评标办法的第⼀步的⽂字字体设为红⾊

$(\'#firstStep\').css({color:\'red\'})

},

error:function(data){

$.(\'提⽰\',\'填写项⽬信息失败！\',\'warning\');

return;

}

});

}

elseif(currentTitle==\'设置评标办法\'){

if($(\'#comboEval十年生死两茫茫不思量自难忘什么意思 uationMethod\').combobox(\'getText\')==\'\'){

returnfalse;

}

if(saveFlag==false){

return;

}

//获得评标办法的Id

varBidRecordId=$(\'#I古诗原文翻译 nviteBidId\').val();//获得招标编号

//点击下⼀步响应滚动条

$(\"#li3\").removeClass(\"ui-step-active\");//将活动节点移除

$(\"#li3\").addClass(\"ui-step-done\");//增加⼀个完成的节点

$(\"#li4\").removeClass(\"ui-step-line\");//移除⼀个线

$(\"#li4\").addClass(\"ui-step-active\");//增加⼀个活跃着的节点

$(\"#btnback\").show();

ControlContent(\'#FinishFile\');

//提交评标办法

$.ajax({

type:\'POST\',

url:\'/InviteBid/UpdateBidZRecord/?JudgeBidId=\'+JudgeBidId+\'&BidRecordId=\'+BidRecordId,

//data:JudgeBidId,

success:function(jsonResult){

},

error:function(data){

$.(\'提⽰\',\'评标办法提交失败！\',\'warning\');

return;

}

});

//提交修改分值后的表格中的内容

//获得表格中的所有⾏

varallRows=$(\'#tg\').treegrid(\'getRoots\');

//获得⾏数

varrowsCount=;

//声明⼀个数组

vararrayJudgeItems=[];

//循环遍历所有⾏，把每⼀⾏的记录作为⼀个对象存到数组中

for(i=0;i

//获得第i⾏记录

varRow=allRows[i];

varrowI曹植的诗词著名诗句 ndex=$(\'#tg\').treegrid(\'getRowIndex\',Row)+2;

//实例化⼀个评分项⽬对象

varBidJudgeTable={

RowIndex:rowIndex,

JudgeItemName:temName,

JudgeItemContent:temContent,

Score:

};

//在数组中添加对象

(BidJudgeTable);

}

//提交数据

$.ajax({

type:\'POST\',

async:false,

url:\'/InviteBid/ReceiveBidJudgeTable\',

contentType:\'application/json\',//必须有,表⽰提交的数据类型

data:ify(arrayJudgeItems),

success:function(result){

//alert(\"success\");

},

error:function(data){

//alert(\"error\");

}

});

$(\'#EvaluationBid\').hide();

$(\'#btnnext\').hide();

$(\'#FinishFile\').show();

$(\'#MainContent\').panel({

title:\'⽣成招标⽂件\'

});

}

elseif(currentTitle==\'⽣成招标⽂件\'){

}

});

/*

*⽤来控制上⼀页和下⼀页的页⾯转换---周洲---2015年11⽉15⽇

*summary：控制主体页⾯的显⽰和隐藏

*param：参数showid：要显⽰的页⾯的div的id，如\"#BidInfo\"

*/

functionControlContent(showid){

//主体内容页⾯的id数组

varstepContents=newArray(\"#BidInfo\",\"#InfoDisplay\",\"#EvaluationBid\",\"#FinishFile\");

//循环遍历数组中的div的id值，如果为当前步骤，则将页⾯内容设为显⽰，其余设为隐藏

varcontentIndex;//数组中元素的索引值

for(contentIndexinstepContents){

varstepContent=stepContents[contentIndex];//获得元素的值

if(showid==stepContent){

$(stepContent).show();//显⽰

}

else{

$(stepContent).hide();//隐藏

}

}

}

//点击上⼀步按钮+进度条效果---周洲--2015年11⽉15⽇

$(\"#btnback\").bind(\"click\",function(){

//根据当前标题，决定上⼀步是什么

varcurrentTitle=$(\'#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\"设置评标⽅法\":

$(\"#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(\"设置评标⽅法\");

ControlContent(\'#EvaluationBid\');

$(\'#btnnext\').show();

$(\'#MainContent\').panel({

title:\'设置评标⽅法\'

});

break;

default:

}

});

视图部分我只展⽰进度条：

@*步骤条*@