그림장수님 스킨을 보고 힌트를 얻어 제이쿼리로 비슷하게 표현해 보았습니다.
외형 레이아웃은 그림장수님 스킨을 따라 했습니다.
압축파일을 풀면 샘플 파일이랑 JS 파일 및 스킨 파일이 있습니다.
제이쿼리 파일을 head.sub.php 에서 불러 들입니다.
<script type="text/javascript" src="<?=$g4['path']?>/js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="<?=$g4['path']?>/js/jquery.idTabs.min.js"></script>
그리 sample.php 파일에 소스를 출력하고 싶으신곳에 복사해서 붙여넣기 하시면 됩니다.
또는 lib 파일로 만드셔서 인크루드 하셔도 되고요
각 탭마다 basic_no_outline 최근게시물 스킨을 적용해 놓았는데 각 탭마다 원하시는 스킨을 넣으시면 됩니다.
예를 들면 최근갤러리 스킨 또는 동영상 스킨등 원하시는 스킨을 넣으셔서 각자 이쁘게 꾸미시면 됩니다.
수정하기 쉬우시라고 복잡한 스타일시트부분 다 지워버리고 최대한 소스 쉽게 알아보기 위해서
간단히 표현했습니다.
저는 5개만 표현앴는데 ID 값을 계속 늘리면 여러개를 표현 할 수 있습니다.
아 참고로 UTF 버전 입니다.
압축파일을 풀면 샘플 파일이랑 JS 파일 및 스킨 파일이 있습니다.
제이쿼리 파일을 head.sub.php 에서 불러 들입니다.
<script type="text/javascript" src="<?=$g4['path']?>/js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="<?=$g4['path']?>/js/jquery.idTabs.min.js"></script>
그리 sample.php 파일에 소스를 출력하고 싶으신곳에 복사해서 붙여넣기 하시면 됩니다.
또는 lib 파일로 만드셔서 인크루드 하셔도 되고요
각 탭마다 basic_no_outline 최근게시물 스킨을 적용해 놓았는데 각 탭마다 원하시는 스킨을 넣으시면 됩니다.
예를 들면 최근갤러리 스킨 또는 동영상 스킨등 원하시는 스킨을 넣으셔서 각자 이쁘게 꾸미시면 됩니다.
수정하기 쉬우시라고 복잡한 스타일시트부분 다 지워버리고 최대한 소스 쉽게 알아보기 위해서
간단히 표현했습니다.
저는 5개만 표현앴는데 ID 값을 계속 늘리면 여러개를 표현 할 수 있습니다.
아 참고로 UTF 버전 입니다.
|
댓글을 작성하시려면 로그인이 필요합니다.
그누4 스킨
5,847건스킨의 저작권은 해당 스킨 제작자님께 있으며, 그누보드의 저작권과 다를 수 있습니다. 스킨 다운로드시 좋아요와 감사의 코멘트를 남기시면 제작자에게 큰 힘이됩니다. ^^y 그누보드와 관련이 있지만 스킨과 빌더가 아니면 플러그인 게시판에 올려주세요.
댓글 18개
딱 하나 문의 사항이 있는데요....onmouseover 시에 리스트가 바뀌게 하려면 어떻게 해야 하는지 ...^^;;
jquery.idTabs.min.js 파일을 수정해야 할 것 같은데..봐도 모르겠네요...;;;
<TD width="100" align="left" valign="top" class="imagebox idTabs" bgcolor="#FFFFFF">
그리고 테이블 하단에 아래 스크립트를 삽입합니다.
<SCRIPT type="text/javascript"> $(".imagebox").idTabs("!mouseover"); </SCRIPT>
=========================================================================
선택된 부분의 색깔을 바꾸고 싶으시다면
<TD width="100" align="left" valign="top" class="imagebox idTabs" id='freedom' bgcolor="#FFFFFF">
id='freedom' => 이분을 입력해주시고
아래 스타일시트를 넣으 주시면 왼쪽 리스트중 선택된 부분은 색깔을 바꾸실수동 ㅣㅆ습니다.
<style>
#freedom a.selected {
color:#000;
}
</style>
마우스 오버시에 바뀌게 하려면 최강님의 말씀외에 추가로....
jquery.idTabs.min.js 파일의 9번째 줄을 아래와 같이 수정해야 되는군요^^
$.idTabs.settings={start:0,change:false,click:null,selected:".selected",event:"!mouseover"};$.idTabs.version="2.2";$(function(){$(".idTabs").idTabs();});})(jQuery);}
다시한번 감사의 말씀을 드립니다.
왼쪽 메뉴에 공지사항 핫뉴스 커뮤니티 솔루션이 있다면 페이지를 열때마다 4개중에서 랜덤으로 하나씩 나오게 못하나요? 예를 들어 매번 공지사항이 뜨는데, ID> 탭중에서 하나씩 랜덤으로 돌아가게.. 현재 네이버 처럼요 ^^ 그리고 왼쪽 메뉴에서 보고 있는 아이디탭에 메뉴는 특정 색상을 주고 싶은데 어떻게 해야할까요?
잘 사용하겠습니다.
잘쓸께요!!!!!!!
공개해주셔서 고맙습니다.
잘쓸게욤
잘 쓸께요...
문의 : 좌측 게시판제목에서 바로가기는 못하나요 ?
<A href="<?=$g4['path']?>/bbs/board.php?bo_table=01_1&#one">공지사항</A><BR>
<A href="#two">자유게시판</A><BR>
<A href="#three">회원동정</A><BR>
<A href="#four">횡설수설</A><BR>
<A href="#five">출근부</A>
<TD width=90 align="left" valign="top" class="imagebox idTabs" bgcolor="#FFFFFF">
<A href="<?=$g4[path]?>/bbs/board.php?bo_table=테이블명" target="_self">GO</A> <A href="#one" title="오른쪽 리스트가 변합니다.">공지사항</A><BR>
<A href="<?=$g4[path]?>/bbs/board.php?bo_table=테이블명" target="_self">GO</A> <A href="#two" title="오른쪽 리스트가 변합니다.">??게시판</A><BR>
<A href="<?=$g4[path]?>/bbs/board.php?bo_table=테이블명" target="_self">GO</A> <A href="#three" title="오른쪽 리스트가 변합니다.">??게시판</A><BR>
<A href="<?=$g4[path]?>/bbs/board.php?bo_table=테이블명" target="_self">GO</A> <A href="#four" title="오른쪽 리스트가 변합니다.">??게시판</A><BR>
<A href="<?=$g4[path]?>/bbs/board.php?bo_table=테이블명" target="_self">GO</A> <A href="#five" title="오른쪽 리스트가 변합니다.">??게시판</A>
</TD>