페이지 에 TabPane 이 너무 많 지 않도록 changeTabInterval 의 무 작위 수 를 만 드 는 데 사용 합 니 다.설정 한 changeTabInterval 이 모두 같 으 면 획일 적 인 전환 효과 가 발생 하여 아름 답지 않 습 니 다.자동 으로 Tab 옵션 카드 를 전환 합 니 다.function randint(m,n)//m-n 사이 의 무 작위 정수 생 성{return Math.random()*(n-m)+m;}function IfNull(a,dv) { return typeof(a) =="undefined"?dv:a; } var TabPaneConfig = { idPrefix: "tab-panel-object-", idCounter: 0, getId: function(){ return this.idPrefix+this.idCounter++;}, tabHeadId: "tabHead", tabHeadClass: "tab-head tab-border", tabBodyId: "tabBody", tabBodyClass: "tab-border" } function TabPane(id,changeTabInterval,isAutoChangeTab){ this.id = id; this.height = "100%"; this.width = "100%"; this.tabPages = 0; this.head = null; this.body = null; this.changeTabInterval=IfNull(changeTabInterval,10); this.isAutoChangeTab=IfNull(isAutoChangeTab,true); this.changeTabTimerId = null; } TabPane.prototype.init = function(){ var r = document.getElementById(this.id); if(!r.style.overflow) r.style.overflow = "auto"; r.className = "tab"; //create head var div = document.createElement("div"); div.id = TabPaneConfig.tabHeadId; div.className = TabPaneConfig.tabHeadClass; r.appendChild(div); this.head = div; var ul = document.createElement("ul"); div.appendChild(ul); //create body div = document.createElement("div"); div.id = TabPaneConfig.tabBodyId; div.className = TabPaneConfig.tabBodyClass; r.appendChild(div); this.body = div; if(this.isAutoChangeTab) { var tabPane = this; this.changeTabTimerId = setInterval(function(){onChangeTabTimer(tabPane);},this.changeTabInterval*1000); } } TabPane.prototype.stopChangeTabTimer = function () { if(this.isAutoChangeTab) { clearInterval(this.changeTabTimerId); } } TabPane.prototype.addTabPage = function(obj) { if(!document.getElementById(obj.panel)) return; if(!this.tabPages) this.init(); this.head.firstChild.appendChild(this.createTabTitle(obj)); this.body.appendChild(document.getElementById(obj.panel)); this.tabPages++; } TabPane.prototype.createTabTitle = function(obj){ var li = document.createElement("li"); li.id = TabPaneConfig.getId(); li.data = obj.panel; var tabPane = this; li.onclick=function(){tabOnClick(tabPane,li)}; li.style.width = obj.width; if(this.tabPages) { li.className=""; document.getElementById(obj.panel).style.display="none"; } else { li.className="hover"; document.getElementById(obj.panel).style.display="block"; } var textNode = document.createTextNode(obj.title); li.appendChild(textNode); return li; } //모든 Tab 페이지 의 Li 요 소 를 가 져 옵 니 다 TabPane.prototype.getLiArr=function(){return this.head.firstChild.children;}TabPane.prototype.getAcitveLi = function() { var liArr = this.getLiArr(); for(var i=0; i
var tp=new TabPane("divForumBoard",randint(3,10);tp.addTabPage({title:"공고",width:50,panel:"divForumCast"});tp.addTabPage({title:"panel",width:50,panel:"divForumPanel"});
