jQuery电子商城动态生成订单进度步骤代码例子

本例子将给大家讲述怎么实现jQuery动态生成订单进度的步骤和代码分享、这种功能一般都将被应用在电子商城等网站、主要用来显示订单的状态、jQuery动态生成订单进度步骤代码、提取后台传输到页面的数据、根据数据进行进度的变更、默认设置初始值进行进度的变更

这个demo主要利用了延时加载的效果、也就是说0.1秒后展示结果、因为HTML加载顺序、先加载脚本 样式、再加载body内容、下面先看下程序的运行效果吧

HTML代码

<div class="stepInfo">
	<ul>
		<li></li>
		<li></li>
	</ul>
	<div class="stepIco stepIco1" id="create">1
		<div class="stepText" id="createText">创建订单</div>
	</div>
	<div class="stepIco stepIco2" id="check">2
		<div class="stepText" id="checkText">审核订单</div>
	</div>
	<div class="stepIco stepIco3" id="produce">3
		<div class="stepText" id="produceText">生产</div>
	</div>
	<div class="stepIco stepIco4" id="delivery">4
		<div class="stepText" id="deliveryText">配送</div>
	</div>
	<div class="stepIco stepIco5" id="received">5
		<div class="stepText" id="receivedText">签收</div>
	</div>
</div>

jQuery代码

$(function() {
	setTimeout("changeDivStyle();", 100);
});

function changeDivStyle(){
	//获取隐藏框值
	//var o_status = $("#o_status").val();	
	var o_status = 4;
	if(o_status==0){
		$(´#create´).css(´background´, ´#DD0000´);
		$(´#createText´).css(´color´, ´#DD0000´);
	}else if(o_status==1||o_status==2){
		$(´#check´).css(´background´, ´#DD0000´);
		$(´#checkText´).css(´color´, ´#DD0000´);
	}else if(o_status==3){
		$(´#produce´).css(´background´, ´#DD0000´);
		$(´#produceText´).css(´color´, ´#DD0000´);
	}else if(o_status==4){
		$(´#delivery´).css(´background´, ´#DD0000´);
		$(´#deliveryText´).css(´color´, ´#DD0000´);
	}else if(o_status>=5){
		$(´#received´).css(´background´, ´#DD0000´);
		$(´#receivedText´).css(´color´, ´#DD0000´);
	}
}

这样一个非常炫酷的订单状态跟踪就做好了、下面给大家贴上源代码的下载地址

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1bn5yrRD 密码: qb55