탭 카테고리 최신글 > 그누4 DTD 스킨

그누4 DTD 스킨

그누보드4 DTD 버전 스킨 전용게시판 입니다.
스킨의 저작권은 해당 스킨 제작자님께 있으며, 그누보드의 저작권과 다를 수 있습니다.
스킨 다운로드시 감사의 코멘트를 남기시면 제작자에게 큰 힘이됩니다. ^^y

탭 카테고리 최신글 정보

최신글 탭 카테고리 최신글

첨부파일

basic_cate.7z (26.7K) 227회 다운로드 2011-02-15 10:41:16

본문

스샷과 같이 분류가 탭형식으로 출력되는 최신글 스킨입니다.

[설치]

head.sub.php 에 아래 스크립트 추가
-----------------------------------
<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {
            $("ul.tabs li").removeClass("active"); //Remove any "active" class
            $(this).addClass("active"); //Add "active" class to selected tab
            $(".tab_content").hide(); //Hide all tab content

            var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
            $(activeTab).fadeIn(); //Fade in the active ID content
            return false;
});
    });
//]]>
</script>
 
css/style.css 에 아래 스타일 추가
-----------------------------------
ul.tabs {margin: 0;padding: 0;float: left;list-style: none;height: 32px;border-bottom: 1px solid #999;border-left: 1px solid #999;width: 100%;}
ul.tabs li {float: left;margin: 0;padding: 0;height: 31px; line-height: 31px; border: 1px solid #999;border-left: none;margin-bottom: -1px; overflow: hidden;position: relative;background: #e0e0e0;}
ul.tabs li a {text-decoration: none;color: #000;display: block;font-size: 12px;padding: 0 10px;border: 1px solid #fff;outline: none;}
ul.tabs li a:hover {background: #ccc;}
html ul.tabs li.active, html ul.tabs li.active a:hover  {background: #fff;border-bottom: 1px solid #fff;}
.tab_container {border: 1px solid #999;border-top: none;overflow: hidden;clear: both;float: left; width: 100%;background: #fff;}
.tab_content {padding: 20px;font-size: 12px;}
.tab_content ul.list{margin-bottom: 0px;}
.tab_content ul.list li{padding-left: 5px;}
스타일은 사이트에 맞게 수정해 쓰세요.
디자인은 DIY !

- latest.tabs.lib.php 파일은 lib 폴더에 복사
----------------------------------------

원하는 페이지에
<div style="width:400px;">
<?= latest_tabs('basic_cate', "게시판", 4, 50); ?>
</div>
위처럼 사용하세요
추천
11
  • 복사

댓글 전체

배포해 주셔서 감사합니다...^^

저도 분발합죠....ㅎ~

다른일로 바빠 만들어둔 스킨 배포가 늦어지네요....ㅜㅜ

무조건 강추 합니다~~~~~~
© SIRSOFT
현재 페이지 제일 처음으로