[JQuery] JQuery UI 탭 구현

 

홈페이지를 만들때 UI 스타일을 쉽고 빠르게 디자인 할 수 있도록 JQuery UI에 대해 알아보도록 하겠습니다.

 

 

1. JQuery UI 테마 다운로드

 

보통 UI를 그대로 사용하기 보다는 자신이 원하는 스타일의 테마를 다운로드 받아서 사용하는 편입니다.

JQuery UI 테마를 눌러보고

 

홈페이지 : http://jqueryui.com/

 

테마를 눌렀을 경우, 아래와 같은 화면이 보입니다.

 

 

왼쪽 다양한 테마 중에서 Smoothness 눌러보면 아래와 같이 바로 테마가 적용되어 스타일이 달라집니다.

 

 

위와 같은 테마를 직접 적용해보기 위해 테마 아래 Download 버튼을 눌러줍니다.

버튼을 누르면 새로운 페이지가 뜨는데 제일 아래 Download 버튼을 누르면 압축 파일을 받을 수 있습니다.

 

 

 

2. 탭 화면 구현

 

다운로드 받는 파일의 이름은 'jquery-ui-1.10.3.custom.zip입니다.

폴더 이름 채 압축을 풀어주도록 합니다.

 

그리고 index.html 파일을 하나 만들어줍니다.

 

<!doctype html>
<head>
    <title>jQuery UI 탭 만들기</title>
</head>
<body>
</body>
</html>

 

이제 내용에 맞게 html 파일을 수정할 차례입니다.

아래와 같이 css 파일 및 스크립트 파일을 경로에 맞게 수정해서 넣어줍니다.

 

<!doctype html>
<head>
    <title>jQuery UI 탭 만들기</title>
    <link rel="stylesheet" href="jquery-ui-1.10.3.custom/css/smoothness/jquery-ui-1.10.3.custom.min.css">
    <script src="jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
    <script src="jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
</head>
<body>
</body>
</html>

 

그 다음은 JQuery UI에서 지정하는 형식에 맞게 탭을 구현해줍니다.

body 안에 아래와 같이 등록을 해줍니다.

제일 상위에 감싸는 div 경우 id를 tabs 로 해주고 각각 탭 개수 만큼 tabs-#을 등록해줍니다.

 

<body>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab1</a></li>
        <li><a href="#tabs-2">Tab2</a></li>
        <li><a href="#tabs-3">Tab3</a></li>
    </ul>
    <div id="tabs-1">
        <p>에프에이리눅스</p>
    </div>
    <div id="tabs-2">
        <p></p>
    </div>
    <div id="tabs-3">
        <p></p>
    </div>
</div>
</body>

 

이렇게 하면 끝나는게 아니라, 마지막으로 탭을 구현할 수 있도록 스크립트를 실행해줘야합니다.

아래와 같이 tabs ID에 대해서 tabs() 지정해줍니다.

 

<!doctype html>
<head>
    <title>jQuery UI 탭 만들기</title>
    <link rel="stylesheet" href="jquery-ui-1.10.3.custom/css/smoothness/jquery-ui-1.10.3.custom.min.css">
    <script src="jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
    <script src="jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
    <script>
    $(function() {
        $( "#tabs" ).tabs();
    });
    </script>
</head>
<body>
</body>
</html>

 

그 다음 html을 웹 브라우저에서 실행하면 아래와 같은 탭 화면을 볼 수 있습니다.

 

 

 

^ㅇ^!!!

 

다음에는 JQueryUI를 통해서 다른 UI를 적용하는 방법 알아보도록 하겠습니다. ^^

 
이 게시물을...