<script>
function obxTabPage(sizex , sizey, cssHead){
if(!cssHead) this.cssHead='';
else this.cssHead=cssHead;
document.write(
'<table cellpadding="0" cellspacing="0" style="table-layout:fixed;padding:1;height:'+sizey+';width:'+sizex+'">' +
'<tr><td class=TP_'+this.cssHead+'_NCELL width=*> </td></tr>'+
'<tr><td class=TP_'+this.cssHead+'_CONTENT1 width=100%> </td></tr>'+
'</table>'
);
this.height=sizey;
this.width=sizex;
var tables=document.getElementsByTagName("table");
this.table=tables[tables.length-1];
this.titleRow=this.table.rows[0];obxTabPage
this.nullCell = this.titleRow.cells[0];
this.contentRow = this.table.rows[1];
this.contentCell = this.contentRow.cells[0];
this.item= new Object();
this.length=0;
var re=new RegExp("\\bobxtp=(\\w+)\\b",'i');
if(location.search.match(re)) this.defaultView = RegExp.$1;
this.addStart= function (id,title,idx,action) {
var iIndex=(idx) ? idx-1 : this.length;
this.item[id] = this.titleRow.insertCell(iIndex);
this.item[id].className='TP_'+this.cssHead+'_CELL';
this.item[id].parentObject=this;
this.item[id].onclick=Function("this.parentObject.show('"+id+"');");
if(action) this.item[id].action = action;
this.item[id].height=25;
this.item[id].innerHTML=title;
document.write('<div style="display:none;width:100%;height:100%">');
var divs=document.getElementsByTagName("div");
this.item[id].content = divs[divs.length-1];
this.item[id].content.className='TP_'+this.cssHead+'_CONTENT2';
this.DrawingID=id;
this.length++;
this.contentCell.colSpan=this.length+1;
}
this.addEnd = function () {
document.write("</div></div>");
this.contentCell.appendChild(this.item[this.DrawingID].content);
if(!this.LastShownItemID) this.show(this.DrawingID,1);
else if(this.defaultView==this.DrawingID) this.show(this.defaultView,1);
}
this.show = function (id,runtime){
if (this.LastShownItemID) this.hide(this.LastShownItemID);
this.LastShownItemID = id;
this.item[id].className='TP_'+this.cssHead+'_SCELL';
this.item[id].content.style.display='';
if(this.item[id].action) {
try{eval(this.item[id].action);}catch(e){}}
}
this.hide = function (id){
this.item[id].className='TP_'+this.cssHead+'_CELL';;
this.item[id].content.style.display="none";
}
}
</script>
// --------------------------------------------------------------------------------------------
obxTabPage 를 사용하시려면 먼저 stlye을 설정하셔야 합니다
4개의 클래스를 만드셔야 하는데
.tp_[헤드]_nCell : 탭 나머지 빈공간 스타일
.tp_[헤드]_Content1 : 매인 테이블 셀 스타일(td)
.tp_[헤드]_Content2 : 매인 테이블 셀 안쪽 스타일(td 안에 div)
.tp_[헤드]_Cell : 안골라진 탭
.tp_[헤드]_sCell : 골라진 탭 스타일
여기서 [헤드]는 원하시는 같은 이름으로 하시면 됩니다(빈공간으로 하셔도 됩니다.)
초기설정은
<script>tp=new obxTabPage(가로길이,세로길이,'[헤드]');</script>
입니다. 가로길이와 세로길이는 픽셀입니다.
%로 하실경우 따옴표로 묶어주세요 "100%","100%"처럼..
다음 페이지를 만드실때는
<script>tp.addStart("페이지 아이디","탭에표시 될 텍스트" [,인덱스]);</script>
여기에 이런저런
페이지 내용
<script>tp.addEnd();</script>
입니다. 페이지 아이디는 아무렇게나 지으셔도 됩니다.
또 인덱스는 탭의 위치를 지정해주시는건데 안해주셔도 되고
기본은 왼쪽부터 쌓이는거며
-1등으로 해주시면 탭들의 오른쪽 정렬도 가능합니다
더 자세하게는 소스보기를 해보시면 ... addStart에 4번째 인자에 텍스트로 된 자바스크립트 넣어주시면 클릭할때마다 그 자바스크립트가 실행됩니다.
<script>tp.addStart("3page","테스트",'',"alert('짠')");</script>
3페이지
<script>tp.addEnd();</script>
이런식으로요(지금 위쪽 테스트 탭을 누르시면 "따란;;" 거립니다;;)
이 기능은 탭을 통해 다른 페이지로 이동하는등 유용할거라 봅니다
그리고 주소줄에 index.htm?obxtp=어쩌고 란게 있다면
어쩌고란 아이디를 가진 탭이 가장 먼저 표시됩니다 3페이지
// ------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> obx tab page</title>
</head>
<style>
.tp_test_nCell{border-bottom: 1px solid #cccccc;}
.tp_test_Content1{border: 1px solid #cccccc;border-top-width:0;padding:10px}
.tp_test_Content2{font:12px 돋움;}
.tp_test_Cell{
padding-top:3;
font:11px 돋움;
background:url('img/tp_unselect.png') no-repeat 50%;
height:23;
width:100;
text-align:center;
cursor:pointer;
cursor:hand;
}
.tp_test_sCell{
padding-top:5;
font:11px 돋움;
background-image:url('img/tp_select.png');
background-position: 50%;
background-repeat: no-repeat;
height:23;
width:100;
text-align:center;
cursor:pointer;
cursor:hand;
}
</style>
<script>
function obxTabPage(sizex , sizey, cssHead){
if(!cssHead) this.cssHead='';
else this.cssHead=cssHead;
document.write(
'<table cellpadding="0" cellspacing="0" style="table-layout:fixed;padding:1;height:'+sizey+';width:'+sizex+'">' +
'<tr><td class=TP_'+this.cssHead+'_NCELL width=*> </td></tr>'+
'<tr><td class=TP_'+this.cssHead+'_CONTENT1 width=100%> </td></tr>'+
'</table>'
);
this.height=sizey;
this.width=sizex;
var tables=document.getElementsByTagName("table");
this.table=tables[tables.length-1];
this.titleRow=this.table.rows[0];obxTabPage
this.nullCell = this.titleRow.cells[0];
this.contentRow = this.table.rows[1];
this.contentCell = this.contentRow.cells[0];
this.item= new Object();
this.length=0;
var re=new RegExp("\\bobxtp=(\\w+)\\b",'i');
if(location.search.match(re)) this.defaultView = RegExp.$1;
this.addStart= function (id,title,idx,action) {
var iIndex=(idx) ? idx-1 : this.length;
this.item[id] = this.titleRow.insertCell(iIndex);
this.item[id].className='TP_'+this.cssHead+'_CELL';
this.item[id].parentObject=this;
this.item[id].onclick=Function("this.parentObject.show('"+id+"');");
if(action) this.item[id].action = action;
this.item[id].height=25;
this.item[id].innerHTML=title;
document.write('<div style="display:none;width:100%;height:100%">');
var divs=document.getElementsByTagName("div");
this.item[id].content = divs[divs.length-1];
this.item[id].content.className='TP_'+this.cssHead+'_CONTENT2';
this.DrawingID=id;
this.length++;
this.contentCell.colSpan=this.length+1;
}
this.addEnd = function () {
document.write("</div></div>");
this.contentCell.appendChild(this.item[this.DrawingID].content);
if(!this.LastShownItemID) this.show(this.DrawingID,1);
else if(this.defaultView==this.DrawingID) this.show(this.defaultView,1);
}
this.show = function (id,runtime){
if (this.LastShownItemID) this.hide(this.LastShownItemID);
this.LastShownItemID = id;
this.item[id].className='TP_'+this.cssHead+'_SCELL';
this.item[id].content.style.display='';
if(this.item[id].action) {
try{eval(this.item[id].action);}catch(e){}}
}
this.hide = function (id){
this.item[id].className='TP_'+this.cssHead+'_CELL';;
this.item[id].content.style.display="none";
}
}
</script>
<body>
<script>tp=new obxTabPage('100%','100%','test'); // 이게 초기설정</script>
<script>tp.addStart("1page","기본"); // 1페이지 시작</script>
obxTabPage 를 사용하시려면 먼저 stlye을 설정하셔야 합니다 </br>
4개의 클래스를 만드셔야 하는데</br>
</br>
.tp_[헤드]_nCell : 탭 나머지 빈공간 스타일</br>
.tp_[헤드]_Content1 : 매인 테이블 셀 스타일(td)</br>
.tp_[헤드]_Content2 : 매인 테이블 셀 안쪽 스타일(td 안에 div)</br>
.tp_[헤드]_Cell : 안골라진 탭</br>
.tp_[헤드]_sCell : 골라진 탭 스타일</br>
</br>
여기서 [헤드]는 원하시는 같은 이름으로 하시면 됩니다(빈공간으로 하셔도 됩니다.)<br>
<br>
초기설정은<br>
<xmp>
<script>tp=new obxTabPage(가로길이,세로길이,'[헤드]');</script></xmp>
입니다. 가로길이와 세로길이는 픽셀입니다.<br>
%로 하실경우 따옴표로 묶어주세요 "100%","100%"처럼..<br>
<br>
다음 페이지를 만드실때는
<xmp>
<script>tp.addStart("페이지 아이디","탭에표시 될 텍스트" [,인덱스]);</script>
여기에 이런저런
페이지 내용
<script>tp.addEnd();</script></xmp>
입니다. 페이지 아이디는 아무렇게나 지으셔도 됩니다.<br>
또 인덱스는 탭의 위치를 지정해주시는건데 안해주셔도 되고<br>
기본은 왼쪽부터 쌓이는거며<br>
-1등으로 해주시면 탭들의 오른쪽 정렬도 가능합니다<br>
<br>
더 자세하게는 소스보기를 해보시면 ...
<script>tp.addEnd();// 1페이지 끝</script>
<script>tp.addStart("2page","확장 사용");// 2페이지 시작</script>
addStart에 4번째 인자에 텍스트로 된 자바스크립트 넣어주시면
클릭할때마다 그 자바스크립트가 실행됩니다.
<xmp>
<script>tp.addStart("3page","테스트",'',"alert('짠')");</script>
3페이지
<script>tp.addEnd();</script>
</xmp>
이런식으로요(지금 위쪽 테스트 탭을 누르시면 "따란;;" 거립니다;;)<br>
이 기능은 탭을 통해 다른 페이지로 이동하는등 유용할거라 봅니다 <br>
<br>
<br>
그리고 주소줄에 <u>index.htm?<b>obxtp=어쩌고</b></u> 란게 있다면 <br>
<b>어쩌고</b>란 아이디를 가진 탭이 가장 먼저 표시됩니다
<script>tp.addEnd();// 2페이지 끝</script>
<script>tp.addStart("3page","테스트",'',"alert('짠')");</script>
3페이지
<script>tp.addEnd();</script>
</body>
</html>
function obxTabPage(sizex , sizey, cssHead){
if(!cssHead) this.cssHead='';
else this.cssHead=cssHead;
document.write(
'<table cellpadding="0" cellspacing="0" style="table-layout:fixed;padding:1;height:'+sizey+';width:'+sizex+'">' +
'<tr><td class=TP_'+this.cssHead+'_NCELL width=*> </td></tr>'+
'<tr><td class=TP_'+this.cssHead+'_CONTENT1 width=100%> </td></tr>'+
'</table>'
);
this.height=sizey;
this.width=sizex;
var tables=document.getElementsByTagName("table");
this.table=tables[tables.length-1];
this.titleRow=this.table.rows[0];obxTabPage
this.nullCell = this.titleRow.cells[0];
this.contentRow = this.table.rows[1];
this.contentCell = this.contentRow.cells[0];
this.item= new Object();
this.length=0;
var re=new RegExp("\\bobxtp=(\\w+)\\b",'i');
if(location.search.match(re)) this.defaultView = RegExp.$1;
this.addStart= function (id,title,idx,action) {
var iIndex=(idx) ? idx-1 : this.length;
this.item[id] = this.titleRow.insertCell(iIndex);
this.item[id].className='TP_'+this.cssHead+'_CELL';
this.item[id].parentObject=this;
this.item[id].onclick=Function("this.parentObject.show('"+id+"');");
if(action) this.item[id].action = action;
this.item[id].height=25;
this.item[id].innerHTML=title;
document.write('<div style="display:none;width:100%;height:100%">');
var divs=document.getElementsByTagName("div");
this.item[id].content = divs[divs.length-1];
this.item[id].content.className='TP_'+this.cssHead+'_CONTENT2';
this.DrawingID=id;
this.length++;
this.contentCell.colSpan=this.length+1;
}
this.addEnd = function () {
document.write("</div></div>");
this.contentCell.appendChild(this.item[this.DrawingID].content);
if(!this.LastShownItemID) this.show(this.DrawingID,1);
else if(this.defaultView==this.DrawingID) this.show(this.defaultView,1);
}
this.show = function (id,runtime){
if (this.LastShownItemID) this.hide(this.LastShownItemID);
this.LastShownItemID = id;
this.item[id].className='TP_'+this.cssHead+'_SCELL';
this.item[id].content.style.display='';
if(this.item[id].action) {
try{eval(this.item[id].action);}catch(e){}}
}
this.hide = function (id){
this.item[id].className='TP_'+this.cssHead+'_CELL';;
this.item[id].content.style.display="none";
}
}
</script>
// --------------------------------------------------------------------------------------------
obxTabPage 를 사용하시려면 먼저 stlye을 설정하셔야 합니다
4개의 클래스를 만드셔야 하는데
.tp_[헤드]_nCell : 탭 나머지 빈공간 스타일
.tp_[헤드]_Content1 : 매인 테이블 셀 스타일(td)
.tp_[헤드]_Content2 : 매인 테이블 셀 안쪽 스타일(td 안에 div)
.tp_[헤드]_Cell : 안골라진 탭
.tp_[헤드]_sCell : 골라진 탭 스타일
여기서 [헤드]는 원하시는 같은 이름으로 하시면 됩니다(빈공간으로 하셔도 됩니다.)
초기설정은
<script>tp=new obxTabPage(가로길이,세로길이,'[헤드]');</script>
입니다. 가로길이와 세로길이는 픽셀입니다.
%로 하실경우 따옴표로 묶어주세요 "100%","100%"처럼..
다음 페이지를 만드실때는
<script>tp.addStart("페이지 아이디","탭에표시 될 텍스트" [,인덱스]);</script>
여기에 이런저런
페이지 내용
<script>tp.addEnd();</script>
입니다. 페이지 아이디는 아무렇게나 지으셔도 됩니다.
또 인덱스는 탭의 위치를 지정해주시는건데 안해주셔도 되고
기본은 왼쪽부터 쌓이는거며
-1등으로 해주시면 탭들의 오른쪽 정렬도 가능합니다
더 자세하게는 소스보기를 해보시면 ... addStart에 4번째 인자에 텍스트로 된 자바스크립트 넣어주시면 클릭할때마다 그 자바스크립트가 실행됩니다.
<script>tp.addStart("3page","테스트",'',"alert('짠')");</script>
3페이지
<script>tp.addEnd();</script>
이런식으로요(지금 위쪽 테스트 탭을 누르시면 "따란;;" 거립니다;;)
이 기능은 탭을 통해 다른 페이지로 이동하는등 유용할거라 봅니다
그리고 주소줄에 index.htm?obxtp=어쩌고 란게 있다면
어쩌고란 아이디를 가진 탭이 가장 먼저 표시됩니다 3페이지
// ------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> obx tab page</title>
</head>
<style>
.tp_test_nCell{border-bottom: 1px solid #cccccc;}
.tp_test_Content1{border: 1px solid #cccccc;border-top-width:0;padding:10px}
.tp_test_Content2{font:12px 돋움;}
.tp_test_Cell{
padding-top:3;
font:11px 돋움;
background:url('img/tp_unselect.png') no-repeat 50%;
height:23;
width:100;
text-align:center;
cursor:pointer;
cursor:hand;
}
.tp_test_sCell{
padding-top:5;
font:11px 돋움;
background-image:url('img/tp_select.png');
background-position: 50%;
background-repeat: no-repeat;
height:23;
width:100;
text-align:center;
cursor:pointer;
cursor:hand;
}
</style>
<script>
function obxTabPage(sizex , sizey, cssHead){
if(!cssHead) this.cssHead='';
else this.cssHead=cssHead;
document.write(
'<table cellpadding="0" cellspacing="0" style="table-layout:fixed;padding:1;height:'+sizey+';width:'+sizex+'">' +
'<tr><td class=TP_'+this.cssHead+'_NCELL width=*> </td></tr>'+
'<tr><td class=TP_'+this.cssHead+'_CONTENT1 width=100%> </td></tr>'+
'</table>'
);
this.height=sizey;
this.width=sizex;
var tables=document.getElementsByTagName("table");
this.table=tables[tables.length-1];
this.titleRow=this.table.rows[0];obxTabPage
this.nullCell = this.titleRow.cells[0];
this.contentRow = this.table.rows[1];
this.contentCell = this.contentRow.cells[0];
this.item= new Object();
this.length=0;
var re=new RegExp("\\bobxtp=(\\w+)\\b",'i');
if(location.search.match(re)) this.defaultView = RegExp.$1;
this.addStart= function (id,title,idx,action) {
var iIndex=(idx) ? idx-1 : this.length;
this.item[id] = this.titleRow.insertCell(iIndex);
this.item[id].className='TP_'+this.cssHead+'_CELL';
this.item[id].parentObject=this;
this.item[id].onclick=Function("this.parentObject.show('"+id+"');");
if(action) this.item[id].action = action;
this.item[id].height=25;
this.item[id].innerHTML=title;
document.write('<div style="display:none;width:100%;height:100%">');
var divs=document.getElementsByTagName("div");
this.item[id].content = divs[divs.length-1];
this.item[id].content.className='TP_'+this.cssHead+'_CONTENT2';
this.DrawingID=id;
this.length++;
this.contentCell.colSpan=this.length+1;
}
this.addEnd = function () {
document.write("</div></div>");
this.contentCell.appendChild(this.item[this.DrawingID].content);
if(!this.LastShownItemID) this.show(this.DrawingID,1);
else if(this.defaultView==this.DrawingID) this.show(this.defaultView,1);
}
this.show = function (id,runtime){
if (this.LastShownItemID) this.hide(this.LastShownItemID);
this.LastShownItemID = id;
this.item[id].className='TP_'+this.cssHead+'_SCELL';
this.item[id].content.style.display='';
if(this.item[id].action) {
try{eval(this.item[id].action);}catch(e){}}
}
this.hide = function (id){
this.item[id].className='TP_'+this.cssHead+'_CELL';;
this.item[id].content.style.display="none";
}
}
</script>
<body>
<script>tp=new obxTabPage('100%','100%','test'); // 이게 초기설정</script>
<script>tp.addStart("1page","기본"); // 1페이지 시작</script>
obxTabPage 를 사용하시려면 먼저 stlye을 설정하셔야 합니다 </br>
4개의 클래스를 만드셔야 하는데</br>
</br>
.tp_[헤드]_nCell : 탭 나머지 빈공간 스타일</br>
.tp_[헤드]_Content1 : 매인 테이블 셀 스타일(td)</br>
.tp_[헤드]_Content2 : 매인 테이블 셀 안쪽 스타일(td 안에 div)</br>
.tp_[헤드]_Cell : 안골라진 탭</br>
.tp_[헤드]_sCell : 골라진 탭 스타일</br>
</br>
여기서 [헤드]는 원하시는 같은 이름으로 하시면 됩니다(빈공간으로 하셔도 됩니다.)<br>
<br>
초기설정은<br>
<xmp>
<script>tp=new obxTabPage(가로길이,세로길이,'[헤드]');</script></xmp>
입니다. 가로길이와 세로길이는 픽셀입니다.<br>
%로 하실경우 따옴표로 묶어주세요 "100%","100%"처럼..<br>
<br>
다음 페이지를 만드실때는
<xmp>
<script>tp.addStart("페이지 아이디","탭에표시 될 텍스트" [,인덱스]);</script>
여기에 이런저런
페이지 내용
<script>tp.addEnd();</script></xmp>
입니다. 페이지 아이디는 아무렇게나 지으셔도 됩니다.<br>
또 인덱스는 탭의 위치를 지정해주시는건데 안해주셔도 되고<br>
기본은 왼쪽부터 쌓이는거며<br>
-1등으로 해주시면 탭들의 오른쪽 정렬도 가능합니다<br>
<br>
더 자세하게는 소스보기를 해보시면 ...
<script>tp.addEnd();// 1페이지 끝</script>
<script>tp.addStart("2page","확장 사용");// 2페이지 시작</script>
addStart에 4번째 인자에 텍스트로 된 자바스크립트 넣어주시면
클릭할때마다 그 자바스크립트가 실행됩니다.
<xmp>
<script>tp.addStart("3page","테스트",'',"alert('짠')");</script>
3페이지
<script>tp.addEnd();</script>
</xmp>
이런식으로요(지금 위쪽 테스트 탭을 누르시면 "따란;;" 거립니다;;)<br>
이 기능은 탭을 통해 다른 페이지로 이동하는등 유용할거라 봅니다 <br>
<br>
<br>
그리고 주소줄에 <u>index.htm?<b>obxtp=어쩌고</b></u> 란게 있다면 <br>
<b>어쩌고</b>란 아이디를 가진 탭이 가장 먼저 표시됩니다
<script>tp.addEnd();// 2페이지 끝</script>
<script>tp.addStart("3page","테스트",'',"alert('짠')");</script>
3페이지
<script>tp.addEnd();</script>
</body>
</html>
'Web > Javascript' 카테고리의 다른 글
| iframe 을 이용한 submit 하기 (0) | 2013.09.26 |
|---|---|
| 지역 선택 (js+checkbox+select) (0) | 2013.09.26 |
| xmlhttp로 페이지 긁어와서 뿌려주기...흐흐 (0) | 2013.09.26 |
| 2차 완성된 DHTML 을 이용한 클라이언트 스크립트로 Element 생성 (0) | 2013.09.26 |
| 주민번호 다음 form으로 이동 (0) | 2013.09.26 |