ui.theme.css와 ui.core.css와 ui.tabs.css와 이미지를 가져옴
| 06.Tabs.htm |
|
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>탭 컨트롤</title>
<link rel="stylesheet" type="text/css" href="ui.tabs.css" />
<link href="ui.theme.css" rel="stylesheet" type="text/css" />
<link href="ui.core.css" rel="stylesheet" type="text/css" />
<script src="../jQuery/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script src="jquery-ui-1.7.2.custom/js/jquery-ui-1.7.2.custom.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{ $('#tabs').tabs();
//탭
});
</script> </head> <body>
<div id="tabs">
<ul> <li><a href="#tabs-1">탭 제목1</a></li> <li><a href="#tabs-2">탭 제목2</a></li> <li><a href="#tabs-3">탭 제목3</a></li>
</ul>
<div id="tabs-1">첫번재 영역의 내용</div>
<div id="tabs-2">두번재 영역의 내용</div>
<div id="tabs-3">세번재 영역의 내용</div>
</div> </body> </html> |
| 결과화면 |
[그림77-1] |
06.Tabs.htm'jQuery | javascript | CSS' 카테고리의 다른 글
| 79.jQuery - 사진 상세보기 플러그인 만들기 (12.PlugIn ) (0) | 2009.11.17 |
|---|---|
| 78.jQuery - 나만의 jQuery 만들기 (12.PlugIn ) (0) | 2009.11.17 |
| 76.jQuery - Accordion() ( 11.UI ) (0) | 2009.11.17 |
| 75.jQuery - selectTable()로 개체 선택하기 ( 11.UI ) (0) | 2009.11.17 |
| 74.jQuery - sortable() 로 소팅 가능한 개체 생성 ( 11.UI ) (0) | 2009.11.17 |
Comments