jquery ui 의 tab 메뉴 (다중탭) 쉽게 사용하기,
페이지 정보
작성자
소프트존
쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
댓글 0건
작성일 19-03-25 23:37
본문
우선 jquery-ui 버전을 사용하였습니다.
jquery-ui 버전은 현재 최신버전을 다운로드 하여 사용해주시길 바랍니다.
https://jqueryui.com/tabs/
위 주소로 이동하시게 되면 해당 소스코드를 볼 수 있습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#tabs" ).tabs();
} );
</script>
</head>
<body>
<div id="tabs1">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>탭메뉴 1번 내용</p>
</div>
<div id="tabs-2">
<p>탭메뉴 2번 내용</p>
</div>
<div id="tabs-3">
<p>탭메뉴 3번 내용</p>
</div>
</div>
</body>
</html>
위처럼 jquery 와 jquery-ui 를 링크 하셔서 사용 하시면 됩니다.
글을 작성하는 이유는 여러개의 탭메뉴를 사용하기 위함 입니다.
아래와 같이 두개의 탭을 사용하기 위해서 id 값에 숫자를 적었습니다.
<script>
$( function() {
$( "#tabs1" ).tabs();
$( "#tabs2" ).tabs();
} );
</script>
위처럼 한개를 더 추가로 작성해 줍니다. 저 같은경우에는 처음부터 tabs1 , tabs2 로 나누었습니다.
[1번 탭메뉴]
<div id="tabs1">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>탭메뉴 1번 내용</p>
</div>
<div id="tabs-2">
<p>탭메뉴 2번 내용</p>
</div>
<div id="tabs-3">
<p>탭메뉴 3번 내용</p>
</div>
</div>
[2번 탭메뉴]
<div id="tabs2">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>탭메뉴 1번 내용</p>
</div>
<div id="tabs-2">
<p>탭메뉴 2번 내용</p>
</div>
<div id="tabs-3">
<p>탭메뉴 3번 내용</p>
</div>
</div>
위처럼 아이디 값만 추가로 등록해서 사용하시면 다중탭을 아주 쉽게 사용할 수 있습니다.
댓글목록
등록된 댓글이 없습니다.