ZZCS/coding/js/navStep.js

var stepBar = {
	item : {},
	bar:{},
	itemCount : 0,
	itemWidth:0,
	step:0,
	init:function(id,index){
		this.bar = $("#" + id);
		if(index!=undefined){
			this.step = index;
		}
        this.item = this.bar.find(".ui-stepInfo");
        this.itemCount = this.item.length;
        this.stepInfoWidthFun();
        this.stepSequence();
        this.bar.show();
        
	},
	stepInfoWidthFun:function(){
		if(this.itemCount > 0){
			if(this.step>=this.itemCount-1){
				this.itemWidth = 1;
			}else{
				this.itemWidth = (this.step*2+1)/((this.itemCount-1)*2);
			}
			this.bar.find(".ui-stepBar").width((1-(1/(this.itemCount)))*100+'%');
			this.bar.find(".ui-stepBar").css("margin-left",(1/(this.itemCount))*50+'%');
            this.bar.find(".ui-stepProcess").width(this.itemWidth*100+'%');
            this.item.width(1/this.itemCount*100+'%');
        }
	},
	stepSequence:function(){
		var num  = (this.step<this.itemCount)?this.step:this.itemCount;
		for(var i=0;i<num;i++){
			this.bar.find(".ui-stepInfo").eq(i).find(".ui-stepSequence").addClass("ui-stepSequence-done");
			this.bar.find(".ui-stepInfo").eq(i).find(".ui-stepSequence").removeClass("ui-stepSequence-ing");
			this.bar.find(".ui-stepInfo").eq(i).find(".ui-stepSequence").removeClass("ui-stepSequence-not");
			this.bar.find(".ui-stepInfo").eq(i).find(".ui-stepSequence").html('<div class="ui-stepSequence-img"></div>');
		}
		this.bar.find(".ui-stepInfo").eq(num).find(".ui-stepSequence").addClass("ui-stepSequence-ing");
		this.bar.find(".ui-stepInfo").eq(num).find(".ui-stepSequence").removeClass("ui-stepSequence-done");
		this.bar.find(".ui-stepInfo").eq(num).find(".ui-stepSequence").removeClass("ui-stepSequence-not");
		for(var i=num+1;i<this.itemCount;i++){
			this.bar.find(".ui-stepInfo").eq(i).find(".ui-stepSequence").addClass("ui-stepSequence-not");
			this.bar.find(".ui-stepInfo").eq(i).find(".ui-stepSequence").removeClass("ui-stepSequence-done");
			this.bar.find(".ui-stepInfo").eq(i).find(".ui-stepSequence").removeClass("ui-stepSequence-ing");
		}
	}
}