jQuery 기반의 탭브라우징 UI 플러그인을 배포합니다.

소스코드 삭제나 변경시에 고지해주시기 바랍니다.^^


전반적인 html 사용코드는 다음과 같습니다.


이제 대략적으로 사용방법에 대해서 설명드립니다.


1. jquery.jkun.tabbrowse.css 와 jquery.jkun.tabbrowse.js 를 불러옵니다.

<link rel="stylesheet" type="text/css" href="jquery.jkun.tabbrowse.css"&glt;


<script src="jquery.jkun.tabbrowse.min.js"></script>

2. 먼저 사용하시고자 하는 UI 의 디자인 전체 코드영역의 스타일시트를 필요에 맞게 수정하시기 바랍니다.
저는 다음과 같이 작성하였습니다.

#tabs { width:1000px; min-height: 600px; height:auto; border:#ebebeb 1px solid; }
#tabs .controller li { margin:0 0 -5px -5px !important; padding:0; border-right:#ebebeb 1px solid;}
#tabs div.viewer { min-height:600px; height:auto; }
#tabs div.viewer div { min-height:600px; height: auto; }

#tabs .controller li a:hover,
#tabs .controller li a.selected { background-color: #000; color:#fff; border-bottom: 0 !important; }
#tabs div.viewer { margin:0; padding:0; border-top: #ebebeb 1px solid; }
3. 이제 HTML 코드 작성규칙입니다.
3-1. 탭브라우져를 사용하고자 하는 요소에 data-widget="tabBrowser" 속성이 필요합니다.
3-2. 해당 요소에 컨트롤러 와 뷰어 요소가 필요합니다.
3-3. 추가하고자 하는 요소에 속성을 지켜주셔야 합니다.
3-3-1. 추가하고자 하는 요소(컨트롤)에 data-tabs-append-control="true" 속성을 지정해 주세요.
3-3-2. 표시하고자 하는 요소에 연결타입을 설정해 주세요.
3-3-3. 표시하고자 하는 요소에 연결타입의 URL 을 지정해 주세요.

<div id=" tabs" data-widget="tabBrowser">
	<ul class="controller"></ul>
	<div class="viewer"></div>
</div>
<div class="controls">
	<button data-tabs-append-control="true" data-view-sync="iframe" data-view-sync-url="http://www.jkun.net">add1</button>
	<button data-tabs-append-control="true" data-view-sync="ajax" data-view-sync-url="/dev/tabs/sync.html">add2</button>
	<button data-tabs-append-control="true">add3</button>
	<button data-tabs-append-control="true">add4</button>
	<button data-tabs-append-control="true">add5</button>
</div>
4. 이제 스크립트코드 작성구간입니다. 탭브라우져를 호출하는 코드입니다.
	$(document).ready(function(){

		var _tabBrowser = new tabBrowser({
			useConfirm : false,
			appendIdRule : 'tabs-',
			appendLimit : 6,
			duplicateCheck : true
		});

	});

이렇게가 사용하는 절차였습니다. 다음은 실행결과 화면입니다.


다음은 이 플러그인에 대한 간단한 기능 명세입니다.

※ 플러그인을 사용하기 위한 사용자 정의 속성 ( HTML Custom Attribute )

 속성명

 정의

 설정

 data-widget

 플러그인을 실행하기 위한 엘리먼트 지정

 data-widget="tabBrowser"

 data-tabs-append-control

 탭을 추가하는 링크 엘리먼트 지정

 true | false
 data-view-sync

 탭 추가시 뷰어에 표시하는 연결형태

 iframe | ajax
 data-view-sync-url

 탭 추가시 뷰어에 표시하는 연결형태에

 따른 컨텐츠가 포함되어 있는 URL

 ex) /jkun.html


※ 플러그인을 사용하기 위한 옵션 ( Javascript Literal Object )

 옵션명

 정의

 설정

 useConfirm

 탭 삭제시 확인 여부 설정

 true | false

 appendIdRule

 생성되는 탭에 대한 ID 규칙 설정

 String

 appendLimit 생성되는 탭 개수에 대한 제한

 Integer

 duplicateCheck

 탭 생성시 중복되는 탭에 대하여

 새로 지우고 생성 또는 취소를

 설정

 true | false





첨부된 파일은 소스코드와 전체적인 예제파일입니다.
퍼가시면서 댓글 남겨주시는 센스도 잊지 마세요~ ^^


'From JKUN Development > jQuery Plug-In' 카테고리의 다른 글

탭브라우져 - 1.0  (2) 2015.04.02
  1. 보리보리 2015.04.06 02:50 신고

    감사합니다. 찾고 있었던거에요.
    잘 쓰겠습니다. 설명도 친절하게 달아주셨네요~ ^^*

출처 : http://blog.naver.com/loudon23/30084204939

jQuery 플러그인(http://plugins.jquery.com/)은 등록된것만 4,500개에 이른다.

다 어디에 쓰이는 플러그인인지 써보지 않고서는 알 방법이 없지 않나. 나도 뭐가 있는지 모르는 상태에서 list 플러그인 찾다가 누군가 올려 놓은 유용한 jQuery 플러그(http://marcgrabanski.com/article/list-of-useful-jquery-plugins)리스트라는 글을 발견하고 옮겨 놨다.

'Development > JavaScript | jQuery' 카테고리의 다른 글

PlugIn - jquery-user-agent (유저에이전트)  (0) 2013.11.15
window.resize 크로스 브라우징  (0) 2013.11.15
jQuery 아이프레임, iframe  (0) 2013.08.20
jQueryPlugIn - jQueryScroll  (0) 2013.01.22
jQuery Cookie  (0) 2012.07.29
유용한 jQuery 플러그인  (0) 2010.07.29

+ Recent posts