dhtabstrip.js

自己实现一个实用的商店应用系统

function dhtabStrip(){
	//author:dh20156;
	this.rid = "dhtabstrip1";
	this.width = 400;
	this.height = 300;
	this.tabwidth = 76;

	var dhts = this;
	var tabsplit = null;
	var tabcontent = null;
	var splitObj = [];
	var length = 0;
	var currenttab = 0;
	var currentlist = [];
	var showmore = false;

	var lb = document.createElement("BUTTON");
	lb.innerHTML = " ";
	lb.className = "dhtbvlbtn";
	lb.style.width = "18px";
	lb.style.height = "18px";
	lb.style.fontSize = "12px";
	lb.onclick = function(){viewpre();}

	var rb = document.createElement("BUTTON");
	rb.innerHTML = " ";
	rb.className = "dhtbvrbtn";
	rb.style.width = "18px";
	rb.style.height = "18px";
	rb.style.fontSize = "12px";
	rb.onclick = function(){viewnext();}

	var mb = document.createElement("LI");
	mb.style.styleFloat = "left";
	mb.style.cssFloat = "left";
	mb.style.position = "relative";
	mb.style.left = "2px";
	mb.style.padding = "0px";
	mb.style.background = "transparent";
	mb.style.border = "none";
	mb.style.width = "36px";
	mb.style.height = "20px";

	mb.appendChild(lb);
	mb.appendChild(rb);

	this.showTab = function(index){
		if(0<=index && length>0){
			splitObj[currenttab].ts.style.top = "0px";
			splitObj[currenttab].ts.style.left = "2px";
			splitObj[currenttab].ts.style.zIndex = "0";
			splitObj[currenttab].ts.style.textIndent = "5px";
			splitObj[currenttab].ts.className = "dhtabsplit";
			splitObj[currenttab].ts.onmouseover = function(){this.className = "dhtabsplitover";}
			splitObj[currenttab].ts.onmouseout = function(){this.className = "dhtabsplit";}

			if(index!=currenttab){
				tabcontent.innerHTML = splitObj[index].tc;
			}

			splitObj[index].ts.style.textIndent = "7px";
			splitObj[index].ts.style.top = "-1px";
			splitObj[index].ts.style.left = "0px";
			splitObj[index].ts.style.zIndex = "3";
			splitObj[index].ts.className = "dhtabsplitcurrent";
			splitObj[index].ts.onmouseover = function(){}
			splitObj[index].ts.onmouseout = function(){}

			currenttab = index;
		}
	}

	function viewpre(){
		var cl = parseInt(currentlist.length);
		if(currentlist[0]!=0){
			var tcl = currentlist;
			currentlist = [];
			for(var i=0;i<cl;i++){
				var ni = parseInt(tcl[i])-1;
				tabsplit.replaceChild(splitObj[ni].ts,tabsplit.childNodes[i]);
				currentlist.push(ni);
			}
			rb.removeAttribute("disabled");
			if(currentlist[0]==0){
				lb.setAttribute("disabled","true");
			}
		}
	}

	function viewnext(){
		var cl = parseInt(currentlist.length);
		if(currentlist[cl-1]!=parseInt(length)-1){
			var tcl = currentlist;
			currentlist = [];
			for(var i=cl-1;i>-1;i--){
				var ni = parseInt(tcl[i])+1;
				tabsplit.replaceChild(splitObj[ni].ts,tabsplit.childNodes[i]);
				currentlist.push(ni);
			}
			currentlist.sort();
			lb.removeAttribute("disabled");
			if(currentlist[cl-1]==parseInt(length)-1){
				rb.setAttribute("disabled","true");
			}
		}
	}

	this.init = function(targetObj){
		var tabstrip = document.createElement("DIV");
		tabstrip.id = this.rid;
		tabstrip.style.width = this.width+26+"px";
		tabstrip.style.height = this.height+26+"px";

		var ts = document.createElement("UL");
		ts.style.margin = "0px";
		ts.style.padding = "0px";
		ts.style.listStyle = "none";
		ts.className = "dhtabsplitpanel";

		var tc = document.createElement("UL");
		tc.style.margin = "0px";
		tc.style.padding = "10px";
		tc.style.position = "relative";
		tc.style.left = "0px";
		tc.style.zIndex = "1";

		tc.style.width = this.width+"px";
		tc.height = this.height-20+"px";
		tc.style.listStyle = "none";
		tc.style.clear = "both";
		tc.className = "dhtabcontentpanel";

		var tcil = document.createElement("LI");
		tcil.style.width = this.width+"px";
		tcil.style.height = this.height-20+"px";
		tcil.style.overflow = "auto";
		tcil.className = "dhtabcontent";

		tc.appendChild(tcil);

		tabstrip.appendChild(ts);
		tabstrip.appendChild(tc);
		targetObj.appendChild(tabstrip);

		tabsplit = ts;
		tabcontent = tcil;
	}

	this.addTab = function(tab,content){
		var tempint = length;
		var tsil = document.createElement("LI");
		tsil.setAttribute("index",length);
		tsil.style.position = "relative";
		tsil.style.top = "0px";
		tsil.style.left = "2px";
		tsil.style.styleFloat = "left";
		tsil.style.cssFloat = "left";
		tsil.style.zIndex = "0";
		tsil.style.height = "20px";
		tsil.style.lineHeight = "20px";
		tsil.style.overflow = "hidden";
		tsil.style.textIndent = "5px";
		tsil.style.width = this.tabwidth+"px";
		tsil.className = "dhtabsplit";
		tsil.title = tab;
		tsil.innerHTML = tab;
		tsil.onclick = function(){dhts.showTab(this.getAttribute("index"));}
		tsil.onmouseover = function(){this.className = "dhtabsplitover";}
		tsil.onmouseout = function(){this.className = "dhtabsplit";}
		if(0 == length){
			tsil.style.textIndent = "7px"
			tsil.style.top = "-1px";
			tsil.style.left = "0px";
			tsil.style.zIndex = "3";
			tsil.className = "dhtabsplitcurrent"
			tsil.onmouseover = function(){}
			tsil.onmouseout = function(){}

			tabcontent.innerHTML = content;
		}

		splitObj[length] = {"ts":tsil,"tc":content};

		length += 1;

		if(length*this.tabwidth<this.width){
			tabsplit.appendChild(tsil);
			currentlist.push(length-1);
		}else{
			if(!showmore){
				lb.setAttribute("disabled","true");
				tabsplit.appendChild(mb);
				showmore = true;
			}else{
				rb.removeAttribute("disabled");
			}
		}
	}

	this.removeTab = function(index){
		if(0<=index && index<length){

			var rindex = splitObj[index].ts.getAttribute("index");

			splitObj.splice(index,1);

			var atb = null;
			currentlist.sort();
			for(var i=0;i<currentlist.length;i++){
				if(rindex==currentlist[i]){
					atb = i;
				}
			}

			if(showmore){
				for(var s=0;s<splitObj.length;s++){
					splitObj[s].ts.setAttribute("index",s);
				}
				if(atb!=null){
					if(0==index){
						for(var n=currentlist.length-1;n>atb-1;n--){
							var ni = parseInt(currentlist[n]);
							tabsplit.replaceChild(splitObj[ni].ts,tabsplit.childNodes[n]);
							currentlist[n] = ni;
						}
						currentlist.sort();
					}else if (index==length-1){
						for(var n=0;n<currentlist.length;n++){
							var ni = parseInt(currentlist[n])-1;
							tabsplit.replaceChild(splitObj[ni].ts,tabsplit.childNodes[n]);
							currentlist[n] = ni;
						}
					}else{
						if(currentlist[0]>0){
							for(var n=0;n<currentlist.length;n++){
								var ni = parseInt(currentlist[n])-1;
								if(n<atb+1){
									tabsplit.replaceChild(splitObj[ni].ts,tabsplit.childNodes[n]);
								}
								currentlist[n] = ni;
							}
						}else{
							for(var n=currentlist.length-1;n>atb-1;n--){
								var ni = parseInt(currentlist[n]);
								tabsplit.replaceChild(splitObj[ni].ts,tabsplit.childNodes[n]);
								currentlist[n] = ni;
							}
							currentlist.sort();
						}
					}
				}else{
					for(var p=0;p<currentlist.length;p++){
						currentlist[p] = p;
					}
				}
			}else{
				if(atb!=null){
					tabsplit.removeChild(tabsplit.childNodes[atb]);	
					currentlist.splice(atb,1);
					for(var b=0;b<currentlist.length;b++){
						currentlist[b] = b;
						splitObj[b].ts.setAttribute("index",b);
					}
				}
			}

			if(0==splitObj.length){
				currenttab = 0;
			}else{
				if(currenttab==index){
					if(currenttab<length-1){
						currenttab = index;
					}else{
						currenttab -= 1;
					}
				}else{
					if(currenttab>0 && currenttab>index){
						currenttab -= 1;
					}
				}
			}

			if(length>1){
				tabcontent.innerHTML = splitObj[currenttab].tc;
				splitObj[currenttab].ts.style.textIndent = "7px";
				splitObj[currenttab].ts.style.top = "-1px";
				splitObj[currenttab].ts.style.left = "0px";
				splitObj[currenttab].ts.style.zIndex = "3";
			}else{
				tabcontent.innerHTML = "";
			}

			if(showmore){
				if((length-1)*this.tabwidth<=this.width){
					tabsplit.removeChild(tabsplit.childNodes[tabsplit.childNodes.length-1]);
					rb.removeAttribute("disabled");
					showmore = false;
				}
			}

			length -= 1;
		}
	}

	this.getChildNodes = function(){
		return splitObj;
	}
}