탭
탭 (Tab)
여러 콘텐츠 화면을 한 페이지에서 전환해 보여 주는 컴포넌트예요. 메뉴 항목과 연결하고, 원격 콘텐츠나 브라우저 히스토리와도 함께 쓸 수 있어요.
출처: 문서
본문
유형 (Type)
탭 (Tab)
기본 탭이에요.
Tab
상태 (States)
활성 (Active)
탭은 활성화되어 페이지에 보일 수 있어요.
Tab
로딩 (Loading)
탭은 로딩 표시기를 표시할 수 있어요.
Tab
변형 (Variations)
중앙 정렬 항목 (Centered Item)
탭은 중앙 정렬된 항목을 가질 수 있어요.
One
Two
Three
반전 (Inverted)
탭을 반전해서 표시할 수 있어요.
Active Tab
Tab 2
Tab 3
하단 부착 메뉴 (Bottom attached menu)
탭 세그먼트 아래쪽에 탭 메뉴를 표시할 수 있어요.
Active Tab
Tab 2
Tab 3
기본 예시 (Basic Examples)
기본 탭 (Basic Tabs)
탭은 data-tab 속성에 지정된 경로로 연결돼요. 그런 다음 활성화하는 요소에서 Javascript로 탭을 초기화해요.
First
Second
Third
First
Second
Third
$('.menu .item')
.tab()
;
여러 탭 그룹 (Multiple Tab Groups)
같은 페이지에 독립적인 탭 그룹을 (히스토리를 포함해) 포함하는 방법은 여러 가지가 있어요. 가장 쉬운 방법 중 하나는 각 탭 그룹에 특정 부모 컨텍스트를 제공하는 것이에요.
$('.context1 .menu .item')
.tab({
context: '.context1'
})
;
$('.context2 .menu .item')
.tab({
// special keyword works same as above
context: 'parent'
})
;
First
Second
Third
1A
1B
1C
1A
1B
1C
2A
2B
2C
2A
2B
2C
3A
3B
3C
3A
3B
3C
Fourth
Fifth
Sixth
4
5
6
First
Second
Third
1A
1B
1C
1A
1B
1C
2A
2B
2C
2A
2B
2C
3A
3B
3C
3A
3B
3C
Fourth
Fifth
Sixth
4
5
6
기본 경로 (Default Paths)
first/ 같은 경로를 지정하면 탭을 연 뒤 그 안의 자식 경로들을 찾아 첫 번째 것을 엽니다. 이 예시에서 경로가 first/라도, first/a에 해당하는 탭이 기본 자식 탭이므로 자동으로 함께 열려요. 포함하는 자식 탭 그룹의 수만큼 재귀적으로 동작해요.
$('.paths.example .menu .item')
.tab({
context: '.paths.example'
})
;
First
Second
Third
1A
1B
1C
1A
1B
1C
2A
2B
2C
2A
2B
2C
3A
3B
3C
3A
3B
3C
원격 예시 (Remote Examples)
원격 콘텐츠 가져오기 (Retrieving Remote Content)
auto: true를 사용하면 인페이지 요청을 지정하는 추가 헤더와 함께 탭 경로를 서버에서 불러와요. cache: true가 설정되면 탭을 다시 열 때 서버 요청 없이 캐시에서 불러와요.
$('.dynamic.example .menu .item')
.tab({
cache: false,
// faking API request
apiSettings: {
loadingDuration : 300,
mockResponse : function(settings) {
var response = {
first : 'AJAX Tab One',
second : 'AJAX Tab Two',
third : 'AJAX Tab Three'
};
return response[settings.urlData.tab];
}
},
context : 'parent',
auto : true,
path : '/'
})
;
First
Second
Third
AJAX Tab One
HTML에서 스크립트 실행하기 (Evaluating Scripts in HTML)
기본적으로 HTML에 포함된 script 태그는 처음 로드할 때만 실행돼요. 이 동작을 바꾸려면 evaluateScripts 설정을 조정하면 돼요.
$('.eval.example .menu .item')
.tab({
evaluateScripts : 'once',
context : 'parent',
auto : true,
path : '/'
})
;
First
Second
Third
AJAX Tab One
히스토리 예시 (History Examples)
해시 히스토리 사용하기 (Using Hash History)
정적 사이트나 간단한 히스토리만 필요한 사이트에서는 인페이지 링크를 사용해 서로 다른 로컬 탭 상태를 트리거할 수 있어요.
$('.history.example .menu .item')
.tab({
context : '.history.example',
history : true
})
;
First
Second
Third
1A
1B
1C
1A
1B
1C
2A
2B
2C
2A
2B
2C
3A
3B
3C
3A
3B
3C
HTML5 상태 사용하기 (Using HTML5 State)
서버에서 변경을 재현할 수 있는 사이트라면, 탭 내비게이션 변경을 html5 state에 자동으로 매핑할 수 있어요.
$('.ui.menu .item')
.tab({
history : true,
historyType : 'state',
// base url for all other path changes
path : '/my/base/url'
})
;
탭 초기화 (Initializing Tabs)
...메뉴와 함께 (...with Menus)
탭은 보통 탭을 활성화하는 요소와 함께 사용돼요. 탭은 탭이 아니라 활성화하는 항목에서 초기화돼요.
$('.tabular.menu .item').tab();
Tab Name
Tab Name 2
...메뉴 없이 (...without Menus)
페이지에 탭 요소를 활성화하는 메뉴가 없다면, 탭을 $.tab()으로 전역 초기화하고 $.tab('change tab', path)로 프로그램적으로 활성화할 수 있어요.
$('.ui.button')
.on('click', function() {
// programmatically activating tab
$.tab('change tab', 'tab-name');
})
;
Activate Tab
기본 탭 (Default Tabs)
어떤 탭이라도 연 뒤에는 현재 탭 안에서 열 기본 탭을 찾아요. 이는 부모 탭과 같은 스템 URL로 시작하는 첫 번째 탭이에요. 예를 들어 data-tab="home" 경로의 탭은 자동으로 data-tab="/home/inbox" 탭을 열 수 있어요.
Tab menu item
상태 관리 (Managing State)
...해시 태그로 (...with Hash Tags)
해시 태그는 인페이지 링크와 onhashstatechange를 사용해 각 탭에 히스토리 이벤트를 만들어요. 이는 더 고급인 push state보다 사용하기 쉬운 경우가 있어요. 그 URL들을 서버에서 라우팅할 필요가 없기 때문이에요. 모든 인페이지 링크는 같은 URL로 라우팅돼요.
$('.ui.menu .item')
.tab({
history: true,
historyType: 'hash'
})
;
...HTML5 상태로 (...with HTML5 State)
탭은 html5 push state를 사용해 #/foo 링크 없이 페이지 상태를 관리할 수 있어요. push state를 사용하는 페이지를 새로 고치면 서버가 새 URL을 쿼리해요. 즉 각 링크에 맞는 적절한 라우트를 백엔드에 설정해야 해요.
$('.ui.menu .item')
.tab({
history: true,
historyType: 'state',
path: '/modules/tab.html'
})
;
경로 설정 (Setting Paths)
historyType: state를 사용하려면 내부 상태가 없는 기본 URL을 지정해야 해요. html5 state가 있는 모든 탭은 일반 페이지 URL처럼 보여서 그에 맞게 라우팅되므로, 이 값을 window.location으로 자동 설정할 수는 없어요.
$('.ui.menu .item')
.tab({
history: true,
historyType: 'state'
path: '/modules/tab.html'
})
;
HTML5 state에서 잘못된 기본 경로를 사용하는 것은 흔한 실수이며, 이상한 동작을 일으킬 수 있어요.
AJAX 콘텐츠 (AJAX Content)
auto: true 설정을 지정하면 브라우저에 설정된 URL과 일치하는 원격 URL에서 콘텐츠를 자동으로 가져와요.
...with automatic routing
There are a variety of settings for configuring dynamic content behavior. Visit the tab settings section for more information
$('.dynamic.example .menu .item')
.tab({
context : '.dynamic.example',
auto : true,
path : '/modules/tab.html'
})
;
... 자동 라우팅으로. 동적 콘텐츠 동작을 구성하는 다양한 설정이 있어요. 자세한 내용은 탭 설정 섹션을 방문하세요.
...API 동작과 함께 (...with an API Behavior)
탭은 API와의 선택적 연동을 제공하며, 탭이 쿼리할 수 있는 템플릿화된 API 엔드포인트를 지정할 수 있게 해줘요.
View API Docs
동작 (Behavior)
다음 모든 동작은 $('.foo').tab('behavior name', argumentOne, argumentTwo) 구문으로 호출할 수 있어요.
attach events(selector, event)
주어진 선택자에 탭 동작을 연결해요. 지정하지 않으면 기본 이벤트는 toggle이에요.
change tab(path)
탭을 경로로 변경해요.
set state(path)
현재 경로를 상태로 설정해요.
get path
현재 경로를 반환해요.
is tab
탭이 존재하는지 여부를 반환해요.
cache read(path)
경로에 대한 캐시된 HTML을 반환해요.
cache add(path, html)
경로에 대한 캐시된 HTML을 설정해요.
cache remove(path)
경로에 대한 캐시된 HTML을 제거해요.
destroy
인스턴스를 파괴하고 모든 이벤트를 제거해요.
탭 설정 (Tab Settings)
폼 설정이 탭 동작을 수정해요.
Setting / Default / Description
auto
false
탭이 히스토리와 같은 URL의 원격 콘텐츠를 로드할지 여부예요.
deactivate
'siblings'
`siblings`로 설정하면 활성화된 요소와 DOM 형제인 요소들만 비활성화해요. `all`로 설정하면 같은 시간에 초기화된 다른 모든 요소를 비활성화해요.
history
false
탭 변경에 대한 히스토리 이벤트를 기록할지 여부예요.
ignoreFirstLoad
false
첫 탭 로드 시 콘텐츠를 원격으로 로드하지 않아요. 열려 있는 탭이 서버에서 렌더링될 때 유용해요.
evaluateScripts
once
탭 HTML의 인라인 스크립트를 탭 로드 시 파싱할지 여부예요. 기본값은 `once`로, 첫 로드에만 파싱해요. `true`나 `false`로 설정해 인라인 스크립트를 항상 또는 절대 파싱하지 않게 할 수도 있어요.
autoTabActivation
true
`true`이고 활성 탭이 없으면 사용 가능한 첫 번째 탭이 활성화돼요.
`string`이 주어지고 활성 탭이 없으면 그 이름 있는 경로가 문자열과 일치하는 탭이 활성화돼요.
`false`이면 활성 탭 감지가 발생하지 않아요.
alwaysRefresh
false
탭이 열릴 때마다 콘텐츠를 다시 로드해야 해요.
deactivate 2.2
siblings
`siblings` 또는 `all`로 설정할 수 있어요. Siblings는 탭이 선택될 때 클릭한 요소의 `siblings`인 탭 활성화 요소만 비활성화해요. `All`은 같은 시간에 초기화된 다른 모든 탭 활성화 요소를 비활성화해요.
cacheType 2.2
response
`response`, `DOM`, `html` 중 하나로 설정할 수 있어요. `DOM`을 사용하면 DOM 트리의 클론을 캐시해서 렌더 시 존재하던 모든 이벤트를 보존해요. `response`는 로드 시 원래 응답을 캐시해서 콜백이 항상 같은 콘텐츠를 받게 해요. `html`을 사용하면 모든 콜백 이후의 결과 html을 캐시해서 콘텐츠의 변경을 보존해요.
cache
true
탭은 로컬 로드 후 콘텐츠를 캐시해 두 번째 로드 시 서버 왕복을 피해야 해요.
apiSettings
false
[$.api](/behaviors/api.html) 호출에 대한 설정 객체예요.
historyType
hash
hash 또는 state로 설정할 수 있어요. Hash는 인페이지 링크를 사용해 히스토리 이벤트를 만들어요. State는 [DOM History](https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history)를 사용하고 새로 고침 시 서버에서 페이지를 로드해요.
path
false
historyType `state`를 사용할 때 모든 내부 링크에 대한 기본 URL을 지정해야 해요.
context
false
탭은 이 컨텍스트 안에서 찾은 것으로 제한돼요.
childrenOnly
false
활성화하면 탭을 전달된 컨텍스트의 자식으로 제한해요.
maxDepth
25
허용되는 중첩 탭의 최대 개수예요 (재귀 방지).
콜백 (Callbacks)
콜백은 특정 동작 이후에 실행할 함수를 지정해요.
Parameters / Context / Description
onFirstLoad
tabPath, parameterArray, historyEvent
Tab
탭이 처음 로드될 때만 호출되는 콜백이에요.
onLoad
tabPath, parameterArray, historyEvent
Tab
탭이 로드될 때마다 호출되는 콜백이에요.
onRequest
tabPath
Tab
탭이 원격 콘텐츠 로드를 시작할 때 호출돼요.
onVisible
tabPath
Tab
탭이 보이게 된 뒤에 호출돼요.
onBeforeChange
tabPath
Tab
탭이 변경되기 직전에 호출돼요. `false`를 반환하면 탭 변경이 취소돼요.
DOM 설정 (DOM Settings)
DOM 설정은 이 모듈이 DOM과 어떻게 상호작용할지 지정해요.
Setting / Default / Description
namespace
tab
이벤트 네임스페이스예요. 모듈 해제가 요소에 붙은 다른 이벤트에 영향을 주지 않게 해요.
templates
templates : {
// returns page title
determineTitle: function(tabArray) {}
}
콘텐츠를 반환하는 데 사용되는 함수들이에요.
selector
selector : {
tabs : '.ui.tab',
parent : '.ui:not(.menu)'
}
모듈이 사용하는 선택자들이에요.
metadata
metadata : {
tab : 'tab',
loaded : 'loaded',
promise: 'promise'
}
모듈이 사용하는 DOM 메타데이터예요.
className
className : {
loading : 'loading',
active : 'active'
}
상태에 스타일을 붙이는 데 사용되는 클래스 이름들이에요.
디버그 설정 (Debug Settings)
디버그 설정은 콘솔의 디버그 출력을 제어해요.
Setting / Default / Description
name
Tab
디버그 로그에서 사용되는 이름이에요.
silent
false
다른 디버그 설정과 관계없이 오류 메시지를 포함한 모든 콘솔 출력을 잠재워요.
debug
false
콘솔에 표준 디버그 출력을 제공해요.
performance
true
콘솔에 표준 디버그 출력을 제공해요.
verbose
false
콘솔에 보조 디버그 출력을 제공해요.
errors
error: {
api : 'You attempted to load content without API module',
method : 'The method you called is not defined',
missingTab : 'Activated tab cannot be found for this context.',
noContent : 'The tab you specified is missing a content url.',
path : 'History enabled, but no path was specified',
recursion : 'Max recursive depth reached',
state : 'The state library has not been initialized'
}