그누보두 고수님 몇가지 문의드려요 > 그누4 질문답변

그누4 질문답변

그누보드4 관련 질문은 QA 로 이전됩니다. QA 그누보드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> <!---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>
  • 복사

댓글 전체

ohora 자기소개 아이디로 검색 회원게시물 12.01.20 11:13:28
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> 레이어 입니다.

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

이해가 되셨는지요?
뉴무림객 홈페이지 자기소개 아이디로 검색 회원게시물 12.01.20 11:45:43
정말 감사드립니다.. 하나 의문점이 생겨서 글 드립니다.

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

php 링크 제목 링크 이런건 이해가거든요^^;;;
목록
문의 PC 버전
© SIRSOFT
현재 페이지 제일 처음으로