그누보두 고수님 몇가지 문의드려요

뉴무림객

· 13년 전 · 조회 1117 1117 · 댓글 4 4

탭 이걸 사용할려고하는데 이해가 안가서.. 몇가지 문의드려요..

소스
<!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> 
<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>
<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>

첨부파일

22222222222222222.jpg (145.1 KB, 0회)

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 4개

아제아제

프로필 보기 이 회원 글보기

13년 전

질답게시판에는
syntax highlight 기능이 있습니다.
캡쳐 이미지가 아닌 사용하시고 있는 소스를 올려주시면,
답변이 더욱 수월할거 같습니다.

뉴무림객

프로필 보기 이 회원 글보기

13년 전

넹 아제아제님... 소스 올려드렸어요^^

ohora

프로필 보기 이 회원 글보기

13년 전

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> 레이어 입니다.

그리고 이 레이어 안에는 예로 보여준 것처럼 최신글을 원하는 대로 불러 오도록 되어 있는거지요.

이해가 되셨는지요?

뉴무림객

프로필 보기 이 회원 글보기

13년 전

정말 감사드립니다.. 하나 의문점이 생겨서 글 드립니다.

php 를 링크하게되면.... 게시판은 어디다가 링크 해야되는지.. 그게 이해가 안가네요..

php 링크 제목 링크 이런건 이해가거든요^^;;;

게시글 목록

번호	제목	글쓴이	조회	날짜
284508	네이버에서 신디케이션 전체게시물이 보이지않는다며 답변이왔습니다T.T 12	유아이	17,729	11년 전
284499	문의글을 엑셀로 정리해서 달라는데요 mysql 에서 내보내기하면 한글다깨지는데요 4	앱보드	12,552	11년 전
284492	최근 로그인한 회원이 리스트 검색시 리스트의 최상위로... 5	alexseo	10,188	11년 전
284490	포인트랭크 해결 좀 해주세요 ㅜㅜ 7	제씨	10,912	11년 전
284484	포인트 랭크 질문 좀 드리겠습니다. 제발 부탁 좀 드리겠습니다 해결좀해주세요 ㅜㅜ 6	제씨	10,490	11년 전
284481	robots.txt 와 신디케이션 1	아썸	11,846	11년 전
284478	핸드폰으로 pc용 접속하면.... 화면사이즈문제 3	네오빡스	15,029	11년 전
284476	혹시 http://www.appsgeyser.com 여기에서.....	스타크루즈	11,483	11년 전
284474	이런 최신글 있을까요? 3	kimch	11,597	11년 전
284472	불당썸 사용 그림엑박 1	연금술샤	11,420	11년 전
284470	도메인 변경후 이미지 깨짐 2	호텔천사	12,269	11년 전
284458	폼메일전송 메일보내는방법좀요 2	별을기다리며	14,431	11년 전
284457	로그인,로그아웃,회원가입 스킨적용 및 연동방법좀요ㅠ 2	별을기다리며	11,924	11년 전
284454	회원가입에 필요한 파일? 2	MJEI	9,692	11년 전
284453	초보 게시판 관련 질문좀 드립니다. 2	장미란	10,565	11년 전
284447	카운트 갯수 구할때요 limit 이 안먹히는데요 왜그런가요 ㅎㅎ? 리밋할려면 어떻게 해야할까요?? 2	앱보드	16,397	11년 전
284446	회원가입시 아이디에 하이픈 - 사용하는 방법을 가르쳐주세요 2	닷넷	10,450	11년 전
284444	리스트 게시글 묶음처리 2	뽁스	9,129	11년 전
284441	아이핀 연동할때 세션값 변경되는 현상 1	비앙이	10,568	11년 전
284440	셀렉트문은 하나만 사용하고요. 3	alexseo	5,587	11년 전

1 2 3

전체 목록