그누보두 고수님 몇가지 문의드려요 정보
그누보두 고수님 몇가지 문의드려요본문
탭 이걸 사용할려고하는데 이해가 안가서.. 몇가지 문의드려요..
소스
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
$slide_tab_width = 580; // 가로크기
$slide_tab_height = 126; // 메뉴부분을 제외한 내용부분 세로크기
?>
<script type="text/javascript">
function selecttab(TabId)
{
if (document.getElementById(TabId).style.display == 'block')
return true;
else return false;
}
</script>
<style type="text/css">
div { font-family:Dotum; font-size:12px; }
.br1cc { border-right:1px solid #d6d6d6; }
.bt1cc { border-top:1px solid #d6d6d6; }
.bl1cc { border-left:1px solid #d6d6d6; }
.bb1cc { border-bottom:1px solid #d6d6d6; }
.bb1f5 { border-bottom:1px solid #FcFcFc; }
.slide-tab { border:1px solid #d6d6d6; overflow-x:hidden; position:relative; margin:0 auto; width:<?php echo $slide_tab_width?>px; z-index:10; }
.slide-tab-line { height:26px; position:relative; width:<?php echo $slide_tab_width?>px; z-index:10; }
#slide-tab-menu
{
clear:both;
font-family:Dotum;
font-size:11px;
letter-spacing:-1px;
position:absolute;
white-space:nowrap;
z-index:20;
}
#slide-tab-menu a { display:inline-block; height:26px; line-height:26px; padding:0 16px 0 16px; margin:0; }
#slide-tab-menu a.select {background-color:#FcFcFc; color:#187BCE; font-weight:bold; text-decoration:underline; }
#slide-tab-menu a.noselect { }
#slide-tab-content { background-color:#FcFcFc; clear:both; height:<?php echo $slide_tab_height?>px; }
#slide-tab-content div { display:none; height:100%; width:100%; }
</style>
<div class="slide-tab">
<div id="slide-tab-menu">
<a href="aaa.php" onclick="return selecttab(1)" class='select bb1f5'>11</a> <!---aaa부분을 고쳐 사용하세요.--->
<a href="http://mulim.zc.bz/bbs/board.php?bo_table=B11" onclick="return selecttab(2)" class='noselect bl1cc'>aaa</a>
<a href="aaa.php" onclick="return selecttab(3)" class='noselect bl1cc'><?=latest("taplatest22", "B32", 5, 20);?></td> </a>
<a href="aaa.php" onclick="return selecttab(4)" class='noselect bl1cc'>aaa</a>
<a href="aaa.php" onclick="return selecttab(5)" class='noselect bl1cc'>aaa</a>
<a href="aaa.php" onclick="return selecttab(6)" class='noselect bl1cc'>aaa</a>
<a href="aaa.php" onclick="return selecttab(7)" class='noselect bl1cc'>aaa</a>
<a href="aaa.php" onclick="return selecttab(8)" class='noselect bl1cc'>aaa</a>
<a href="aaa.php" onclick="return selecttab(9)" class='noselect bl1cc'>aaa</a>
</div>
<div class="slide-tab-line bb1cc"></div>
<div id="slide-tab-content">
<div id="B11" style="display:block;">aaa</div><!---aaa부분을 고쳐 사용하세요.--->
<div id="2">aaa</div>
<div id="3">aaa</div>
<div id="4">aaa</div>
<div id="5">aaa</div>
<div id="6">aaa</div>
<div id="7">aaa</div>
<div id="8">aaa</div>
<div id="9">aaa</div>
</div>
</div>
<script type="text/javascript">
var tabs = document.getElementById("slide-tab-menu");
window.onload = function()
{
tabs.func_onclick = function(e)
{
var e = e || window.event;
var target = e.srcElement || e.target;
if (target.nodeName.toUpperCase() == "A")
{
target.blur();
if (target == this.target)
return;
if (this.target_obj != null)
this.target_obj.className = "";
this.target_obj = target;
var childs = this.children;
for (var i=0; i<childs.length; i++)
{
if (childs[0] == childs[i])
{
if (target == childs[i])
childs[i].className = "select bb1f5";
else
childs[i].className = "noselect";
}
else if (childs[childs.length] == childs[i])
{
if (target == childs[i])
childs[i].className = "select bb1f5";
else
childs[i].className = "noselect";
}
else
{
if (target == childs[i])
{
childs[i-1].className = "noselect bl1cc br1cc";
childs[i].className = "select bb1f5";
}
else
childs[i].className = "noselect bl1cc";
}
document.getElementById("slide-tab-content").children[i].style.display = target == childs[i] ? "block" : "none";
}
}
};
tabs.func_get_position = function(obj)
{
var tmp_obj = obj;
var result = {width : 0, height : 0, left : 0, top : 0};
while (tmp_obj.offsetParent)
{
if (result.width == 0) result.width = tmp_obj.offsetWidth;
if (result.height == 0) result.height = tmp_obj.offsetHeight;
result.left += tmp_obj.offsetLeft;
result.top += tmp_obj.offsetTop;
tmp_obj = tmp_obj.offsetParent;
}
return result;
};
tabs.func_slide = function()
{
tabs.left -= (tabs.left - tabs.targetLeft) * 0;
tabs.style.left = -tabs.left + "px";
if (Math.round(tabs.left) == tabs.targetLeft)
return;
tabs.move_timeout = setTimeout(tabs.func_slide, 1);
};
tabs.onclick = tabs.func_onclick;
window.onresize = function() { tabs.position = tabs.func_get_position(tabs); };
tabs.onmousemove = function(e)
{
var e = e || window.event;
this.percent = ((e.clientX - this.position.left) / tabs.parentNode.offsetWidth) * 100;
this.targetLeft = Math.round(((this.offsetWidth - tabs.parentNode.offsetWidth) / 100) * this.percent);
clearTimeout(this.move_timeout);
this.move_timeout = setTimeout(tabs.func_slide, 1);
};
tabs.left = 0;
tabs.is_move = false;
tabs.target_obj = null;
tabs.position = tabs.func_get_position(tabs);
tabs.onselectstart = function() { return false; };
tabs.ondragstart = function() { return false; };
};
</script>
소스
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
$slide_tab_width = 580; // 가로크기
$slide_tab_height = 126; // 메뉴부분을 제외한 내용부분 세로크기
?>
<script type="text/javascript">
function selecttab(TabId)
{
if (document.getElementById(TabId).style.display == 'block')
return true;
else return false;
}
</script>
<style type="text/css">
div { font-family:Dotum; font-size:12px; }
.br1cc { border-right:1px solid #d6d6d6; }
.bt1cc { border-top:1px solid #d6d6d6; }
.bl1cc { border-left:1px solid #d6d6d6; }
.bb1cc { border-bottom:1px solid #d6d6d6; }
.bb1f5 { border-bottom:1px solid #FcFcFc; }
.slide-tab { border:1px solid #d6d6d6; overflow-x:hidden; position:relative; margin:0 auto; width:<?php echo $slide_tab_width?>px; z-index:10; }
.slide-tab-line { height:26px; position:relative; width:<?php echo $slide_tab_width?>px; z-index:10; }
#slide-tab-menu
{
clear:both;
font-family:Dotum;
font-size:11px;
letter-spacing:-1px;
position:absolute;
white-space:nowrap;
z-index:20;
}
#slide-tab-menu a { display:inline-block; height:26px; line-height:26px; padding:0 16px 0 16px; margin:0; }
#slide-tab-menu a.select {background-color:#FcFcFc; color:#187BCE; font-weight:bold; text-decoration:underline; }
#slide-tab-menu a.noselect { }
#slide-tab-content { background-color:#FcFcFc; clear:both; height:<?php echo $slide_tab_height?>px; }
#slide-tab-content div { display:none; height:100%; width:100%; }
</style>
<div class="slide-tab">
<div id="slide-tab-menu">
<a href="aaa.php" onclick="return selecttab(1)" class='select bb1f5'>11</a> <!---aaa부분을 고쳐 사용하세요.--->
<a href="http://mulim.zc.bz/bbs/board.php?bo_table=B11" onclick="return selecttab(2)" class='noselect bl1cc'>aaa</a>
<a href="aaa.php" onclick="return selecttab(3)" class='noselect bl1cc'><?=latest("taplatest22", "B32", 5, 20);?></td> </a>
<a href="aaa.php" onclick="return selecttab(4)" class='noselect bl1cc'>aaa</a>
<a href="aaa.php" onclick="return selecttab(5)" class='noselect bl1cc'>aaa</a>
<a href="aaa.php" onclick="return selecttab(6)" class='noselect bl1cc'>aaa</a>
<a href="aaa.php" onclick="return selecttab(7)" class='noselect bl1cc'>aaa</a>
<a href="aaa.php" onclick="return selecttab(8)" class='noselect bl1cc'>aaa</a>
<a href="aaa.php" onclick="return selecttab(9)" class='noselect bl1cc'>aaa</a>
</div>
<div class="slide-tab-line bb1cc"></div>
<div id="slide-tab-content">
<div id="B11" style="display:block;">aaa</div><!---aaa부분을 고쳐 사용하세요.--->
<div id="2">aaa</div>
<div id="3">aaa</div>
<div id="4">aaa</div>
<div id="5">aaa</div>
<div id="6">aaa</div>
<div id="7">aaa</div>
<div id="8">aaa</div>
<div id="9">aaa</div>
</div>
</div>
<script type="text/javascript">
var tabs = document.getElementById("slide-tab-menu");
window.onload = function()
{
tabs.func_onclick = function(e)
{
var e = e || window.event;
var target = e.srcElement || e.target;
if (target.nodeName.toUpperCase() == "A")
{
target.blur();
if (target == this.target)
return;
if (this.target_obj != null)
this.target_obj.className = "";
this.target_obj = target;
var childs = this.children;
for (var i=0; i<childs.length; i++)
{
if (childs[0] == childs[i])
{
if (target == childs[i])
childs[i].className = "select bb1f5";
else
childs[i].className = "noselect";
}
else if (childs[childs.length] == childs[i])
{
if (target == childs[i])
childs[i].className = "select bb1f5";
else
childs[i].className = "noselect";
}
else
{
if (target == childs[i])
{
childs[i-1].className = "noselect bl1cc br1cc";
childs[i].className = "select bb1f5";
}
else
childs[i].className = "noselect bl1cc";
}
document.getElementById("slide-tab-content").children[i].style.display = target == childs[i] ? "block" : "none";
}
}
};
tabs.func_get_position = function(obj)
{
var tmp_obj = obj;
var result = {width : 0, height : 0, left : 0, top : 0};
while (tmp_obj.offsetParent)
{
if (result.width == 0) result.width = tmp_obj.offsetWidth;
if (result.height == 0) result.height = tmp_obj.offsetHeight;
result.left += tmp_obj.offsetLeft;
result.top += tmp_obj.offsetTop;
tmp_obj = tmp_obj.offsetParent;
}
return result;
};
tabs.func_slide = function()
{
tabs.left -= (tabs.left - tabs.targetLeft) * 0;
tabs.style.left = -tabs.left + "px";
if (Math.round(tabs.left) == tabs.targetLeft)
return;
tabs.move_timeout = setTimeout(tabs.func_slide, 1);
};
tabs.onclick = tabs.func_onclick;
window.onresize = function() { tabs.position = tabs.func_get_position(tabs); };
tabs.onmousemove = function(e)
{
var e = e || window.event;
this.percent = ((e.clientX - this.position.left) / tabs.parentNode.offsetWidth) * 100;
this.targetLeft = Math.round(((this.offsetWidth - tabs.parentNode.offsetWidth) / 100) * this.percent);
clearTimeout(this.move_timeout);
this.move_timeout = setTimeout(tabs.func_slide, 1);
};
tabs.left = 0;
tabs.is_move = false;
tabs.target_obj = null;
tabs.position = tabs.func_get_position(tabs);
tabs.onselectstart = function() { return false; };
tabs.ondragstart = function() { return false; };
};
</script>
댓글 전체

질답게시판에는
syntax highlight 기능이 있습니다.
캡쳐 이미지가 아닌 사용하시고 있는 소스를 올려주시면,
답변이 더욱 수월할거 같습니다.
syntax highlight 기능이 있습니다.
캡쳐 이미지가 아닌 사용하시고 있는 소스를 올려주시면,
답변이 더욱 수월할거 같습니다.
넹 아제아제님... 소스 올려드렸어요^^
1. <a href="aaa.php" onclick="return selecttab(1)" class='select bb1f5'>11</a>
소스가 조금 이상하기는 하지만 설명드리자면
<a href="aaa.php" 의 aaa.php 는 링크되기 원하는 페이지 또는 주소를 넣어주시면 되구요.
<a href="aaa.php" onclick="return selecttab(1)">aaa</a> <= 여기의 aaa 는 링크하기 위한 제목입니다.
즉 aaa라는 제목 또는 타이틀을 클릭하면 aaa.php 로 가라 이런 의미지요.
2. 같이 올려 주신 이미지에 문의사항 체크부분 바로 위에 사용방법이 상세하게 나와 있네요. ^^
<div id="1" style="display:block;"><?=latest_cate('nori_contents_price','data_source',5.30."MP3(MR);?></div> <= 이것이 답입니다.^^
즉 <div id="1"> ....</div> 는 레이어의 고유이름이라고 보시면 됩니다.
탭의 타이틀을 선택하면 지정된 레이어가 뜨도록 하기 위해 탭에서 지정해 놓은 레이어명 입니다.
위의 <a href="aaa.php" onclick="return selecttab(1)" 에서 마우스를 클릭하면 tab1으로 가라고 되어있네요.
그러니 이곳에서 선택한 tab1이 있어야 겠지요.
이때 불려지는 것이 <div id="1"> ....</div> 레이어 입니다.
그리고 이 레이어 안에는 예로 보여준 것처럼 최신글을 원하는 대로 불러 오도록 되어 있는거지요.
이해가 되셨는지요?
소스가 조금 이상하기는 하지만 설명드리자면
<a href="aaa.php" 의 aaa.php 는 링크되기 원하는 페이지 또는 주소를 넣어주시면 되구요.
<a href="aaa.php" onclick="return selecttab(1)">aaa</a> <= 여기의 aaa 는 링크하기 위한 제목입니다.
즉 aaa라는 제목 또는 타이틀을 클릭하면 aaa.php 로 가라 이런 의미지요.
2. 같이 올려 주신 이미지에 문의사항 체크부분 바로 위에 사용방법이 상세하게 나와 있네요. ^^
<div id="1" style="display:block;"><?=latest_cate('nori_contents_price','data_source',5.30."MP3(MR);?></div> <= 이것이 답입니다.^^
즉 <div id="1"> ....</div> 는 레이어의 고유이름이라고 보시면 됩니다.
탭의 타이틀을 선택하면 지정된 레이어가 뜨도록 하기 위해 탭에서 지정해 놓은 레이어명 입니다.
위의 <a href="aaa.php" onclick="return selecttab(1)" 에서 마우스를 클릭하면 tab1으로 가라고 되어있네요.
그러니 이곳에서 선택한 tab1이 있어야 겠지요.
이때 불려지는 것이 <div id="1"> ....</div> 레이어 입니다.
그리고 이 레이어 안에는 예로 보여준 것처럼 최신글을 원하는 대로 불러 오도록 되어 있는거지요.
이해가 되셨는지요?
정말 감사드립니다.. 하나 의문점이 생겨서 글 드립니다.
php 를 링크하게되면.... 게시판은 어디다가 링크 해야되는지.. 그게 이해가 안가네요..
php 링크 제목 링크 이런건 이해가거든요^^;;;
php 를 링크하게되면.... 게시판은 어디다가 링크 해야되는지.. 그게 이해가 안가네요..
php 링크 제목 링크 이런건 이해가거든요^^;;;