jQuery电子商城动态生成订单进度步骤代码例子
2014-11-25 13:45:11 By: shinyuu
本例子将给大家讲述怎么实现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的留言板)
感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛