탭브라우져 - 1.0

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

첨부된 파일은 소스코드와 전체적인 예제파일입니다.

퍼가시면서 댓글 남겨주시는 센스도 잊지 마세요~ ^^

jquery.jkun.tabbrowse.zip