탭 카테고리 최신글 정보
최신글 탭 카테고리 최신글
관련링크
http://www.g4m.kr/sample/
517회 연결
첨부파일
본문
스샷과 같이 분류가 탭형식으로 출력되는 최신글 스킨입니다.
[설치]
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>
위처럼 사용하세요
[설치]
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
11
댓글 전체
배포해 주셔서 감사합니다...^^
저도 분발합죠....ㅎ~
다른일로 바빠 만들어둔 스킨 배포가 늦어지네요....ㅜㅜ
무조건 강추 합니다~~~~~~
저도 분발합죠....ㅎ~
다른일로 바빠 만들어둔 스킨 배포가 늦어지네요....ㅜㅜ
무조건 강추 합니다~~~~~~
감사합니다.
반응이 없어 재미 없네요 ㅋ
그래도 아파치님 덕에 위로가 됩니다. ㅎㅎ
반응이 없어 재미 없네요 ㅋ
그래도 아파치님 덕에 위로가 됩니다. ㅎㅎ
멋집니다
진서기님 멋집니다.수고 많으시네요
감사합니다.
감사합니다.
탭 카테고리 최신글
소스 분석하기위해 받아갑니다. 감사합니다.
좋은자료 감사합니다. ^^
감사합니다
무조건 강추천 ~~~~
이런 것을 최근게시물로 안쓰고 일반 페이지에 적용하려면 어떻게 쓰나요.
감사해요^.^
Gooooood~~~
감사합니다.