편집 요약 없음 |
편집 요약 없음 |
||
1번째 줄: | 1번째 줄: | ||
{{설명문서 안내}} | {{설명문서 안내}} | ||
탭을 표시하는 틀입니다. 자바스크립트로 구현되어 있습니다. | 탭을 표시하는 틀입니다. 자바스크립트로 구현되어 있습니다. 이 틀을 퍼가실 때는 아래 코드를 해당 사이트의 [[미디어위키:common.js]]에 작성해주세요. | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> |
2022년 7월 26일 (화) 17:42 판
탭을 표시하는 틀입니다. 자바스크립트로 구현되어 있습니다. 이 틀을 퍼가실 때는 아래 코드를 해당 사이트의 미디어위키:common.js에 작성해주세요.
document.querySelectorAll('.libre-tab').forEach(function (libretab) {
var $libretab = $(libretab);
var $btns = $libretab.children('.libre-tab-btns');
var $content = $libretab.children('.libre-tab-main');
$btns.children('.libre-tab-btn').click(function () {
if (this.classList.contains('.libre-tab-btn-active')) return;
$btns.children('.libre-tab-btn-active').removeClass('libre-tab-btn-active');
this.classList.add('libre-tab-btn-active');
var index = $(this).index();
$content.children('.libre-tab-main-content-active').removeClass('libre-tab-main-content-active');
$content.children('.libre-tab-main-content').eq(index).addClass('libre-tab-main-content-active');
});
})
주의사항
일부 브라우저 (Internet Explorer, EdgeHTML 기반 마이크로소프트 엣지 등)에서 제대로 작동되지 않을 수 있습니다.
사용법
{{탭 |제목1 = |내용1 = |제목2 = |내용2 = |제목3 = |내용3 = · · · |제목30 = |내용30 = }}
1
2
3
30
1
2
3
30
- 추가 기능
{{탭 |style = |버튼여백좁게 = <!-- 이 변수를 입력할 경우 탭 버튼 여백이 줄어듦--> |제목너비고정 = <!-- **%로 입력, 한 줄당 탭 버튼 수를 강제로 고정하기 위해 사용함--> |여백좁게 = <!-- 이 변수를 입력할 경우 여백이 1.5 rem에서 0.5 rem으로 줄어듦--> |여백 사용자지정 = <!-- 단위 (em, rem 등)를 포함해 입력--> |제목1 = |내용1 = |제목2 = |내용2 = |제목3 = |내용3 = · · · |제목30 = |내용30 = }}
틀 데이터
틀 데이터
탭을 표시하는 틀입니다.
|