jQuery电子商城动态生成订单进度步骤代码例子
2014-11-25 13:45:11  By: shinyuu

• shinyuu
• JQuery教程
• 0
• 11561
• 6

本例子将给大家讲述怎么实现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

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛