그림장수님 스킨을 보고 힌트를 얻어 제이쿼리로 비슷하게 표현해 보았습니다. 정보
최근게시물 그림장수님 스킨을 보고 힌트를 얻어 제이쿼리로 비슷하게 표현해 보았습니다.
관련링크
첨부파일
본문
압축파일을 풀면 샘플 파일이랑 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 버전 입니다.
추천
9
9
댓글 전체
와 잘 되네요!!!
정말 감사합니다..^^ euc-kr로 고쳐도 잘 작동되네요^^
딱 하나 문의 사항이 있는데요....onmouseover 시에 리스트가 바뀌게 하려면 어떻게 해야 하는지 ...^^;;
jquery.idTabs.min.js 파일을 수정해야 할 것 같은데..봐도 모르겠네요...;;;
딱 하나 문의 사항이 있는데요....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>
<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);}
다시한번 감사의 말씀을 드립니다.
마우스 오버시에 바뀌게 하려면 최강님의 말씀외에 추가로....
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> 탭중에서 하나씩 랜덤으로 돌아가게.. 현재 네이버 처럼요 ^^ 그리고 왼쪽 메뉴에서 보고 있는 아이디탭에 메뉴는 특정 색상을 주고 싶은데 어떻게 해야할까요?
왼쪽 메뉴에 공지사항 핫뉴스 커뮤니티 솔루션이 있다면 페이지를 열때마다 4개중에서 랜덤으로 하나씩 나오게 못하나요? 예를 들어 매번 공지사항이 뜨는데, ID> 탭중에서 하나씩 랜덤으로 돌아가게.. 현재 네이버 처럼요 ^^ 그리고 왼쪽 메뉴에서 보고 있는 아이디탭에 메뉴는 특정 색상을 주고 싶은데 어떻게 해야할까요?
아 그리고 네이버처럼 뉴스속의 화살표를 클릭할 경우 다음 뉴스로 이동되는건 어떻게 또 해야 할까요? 질문이 많네요 ^^;; 잘쓰고 있습니다!!
추천하나 때립니다. 좋은 jQuery팁이 넘쳐흐르기를...ㅎㅎ
감사합니다.
잘 사용하겠습니다.
잘 사용하겠습니다.
오... 대세는 jQuery!!!!!!!!!!!!!!!
잘쓸께요!!!!!!!
잘쓸께요!!!!!!!
적용도 쉽고 보기도 쉽고 아주 좋네요..
공개해주셔서 고맙습니다.
잘쓸게욤
공개해주셔서 고맙습니다.
잘쓸게욤
감사합니다.
잘 쓸께요...
문의 : 좌측 게시판제목에서 바로가기는 못하나요 ?
<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>
잘 쓸께요...
문의 : 좌측 게시판제목에서 바로가기는 못하나요 ?
<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>
잘 모르고 또한, 귀차니즘 때문에 아래와 같이 막장 GO 를 이용하여 링크 시켰습니다..
<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>
<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>
스크랩해요~
스크랩합니다.
js 최신글
최근게시물 (왼족메뉴선택)
텝 최신게시물
텝 최신게시물
