2016/08/09 - [Jquery] - tabMaker.js 플러그인 - 탭 메뉴를 쉽게 만들어 주는 플러그인
jquery(제이쿼리)는 javascript 보다 좀 더 직관적이고 편리하게 사용가능하게 만들어진 기술인데요.
많은 인기를 끌게 되고 누구나 한번쯤 배우고 사용하게 되며 모든 웹에 필수처럼 이용되고 있죠.
그래서 jquery 기초를 배운분이라면 탭메뉴 정도는 눈감고(?)도 만들꺼라 생각을하고 있었는데요.
그런데 제 생각이 틀렸었나봐요.
많은 웹사이트에서 한정된 공간에 더 많은 정보를 노출하기 위한 탭메뉴를 적용하고 있는데 이를 구현 못해서 끙끙거리는 퍼블리셔분을 보았어요.
어찌나 안타깝던지 그래서 준비했어요.
tabMaker.js 플러그인을요.
그런데 탭메뉴가 정확히 뭐냐고요??????
이게 탭 메뉴에요. 마우스오버로 움직이는데요. 이제 이해가 가시죠?
그럼 여기에서 공유하는 tabMaker.js에 대해서 예제소스와 함께 사용법에 대해서 설명드릴게요.
홈페이지에서 자유롭게 다운 받으실수 있어요.
<style>
#tab ul:nth-child(1) li{text-align:center; width:25%; float:left; padding:10px 0px;}
#tab ul:nth-child(2) li{min-height:300px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="tabMaker.js"></script>
<script>
$(function(){
$('#tab').tabMaker();
});
</script>
<body>
<div id="tab">
<ul>
<li style="background:red;">버튼1</li>
<li style="background:green;">버튼2</li>
<li style="background:blue;">버튼3</li>
<li style="background:yellow;">버튼4</li>
</ul>
<ul>
<li style="background:red;">콘텐츠1</li>
<li style="background:green;">콘텐츠2</li>
<li style="background:blue;">콘텐츠3</li>
<li style="background:yellow;">콘텐츠4</li>
</ul>
</div>
</body>
|
일단 html 형식은 이렇게 준비해주세요. 대충봐도 감이 잡히시죠?
위 ul 영역은 버튼 영역 아래 ul 영역은 버튼을 마우스 오버 했을때 보여지게할 각 영역들이에요.
여기서 주의할 점은 버튼 순서와 컨텐츠 영역 순서가 차례로 일치해야 한다는거에요.
각 스타일을 예제에서 보기 편하라고 색을 넣은거니 안 넣으셔도 무관해요.
그 다음 탭으로 만들 요소 전체를 div 로 감싸고 div에 클래스나 아이디를 주세요.
<style>
#tab ul:nth-child(1) li{text-align:center; width:25%; float:left; padding:10px 0px;}
#tab ul:nth-child(2) li{min-height:300px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="tabMaker.js"></script>
<script>
$(function(){
$('#tab').tabMaker();
});
</script>
<body>
<div id="tab">
<ul>
<li style="background:red;">버튼1</li>
<li style="background:green;">버튼2</li>
<li style="background:blue;">버튼3</li>
<li style="background:yellow;">버튼4</li>
</ul>
<ul>
<li style="background:red;">콘텐츠1</li>
<li style="background:green;">콘텐츠2</li>
<li style="background:blue;">콘텐츠3</li>
<li style="background:yellow;">콘텐츠4</li>
</ul>
</div>
</body>
|
방금 그려진 html 에 적절한 스타일을 원하는대로 대입해주시는데요.
커서와 같이 통일될꺼 같은 스타일을 플러그인 내에 자동으로 생성되게 넣어놔서 아마 작성될 스타일 내용은 많지 않을꺼에요.
<style>
#tab ul:nth-child(1) li{text-align:center; width:25%; float:left; padding:10px 0px;}
#tab ul:nth-child(2) li{min-height:300px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="tabMaker.js"></script>
<script>
$(function(){
$('#tab').tabMaker();
});
</script>
<body>
<div id="tab">
<ul>
<li style="background:red;">버튼1</li>
<li style="background:green;">버튼2</li>
<li style="background:blue;">버튼3</li>
<li style="background:yellow;">버튼4</li>
</ul>
<ul>
<li style="background:red;">콘텐츠1</li>
<li style="background:green;">콘텐츠2</li>
<li style="background:blue;">콘텐츠3</li>
<li style="background:yellow;">콘텐츠4</li>
</ul>
</div>
</body>
|
다음으로 jquery(제이쿼리) CDN 과 다운 받은 플러그인을 차례로 문서에서 이용할수 있게 불러와주세요.
CDN은 jquery를 사용할수 있게 해주며 플러그인은 jquery(제이쿼리)를 이용해 탭메뉴를 만드는 역할을 하죠.
만약 CDN이 미리 선언되어 있다면 중복되어 선언 하지 마세요.
<style>
#tab ul:nth-child(1) li{text-align:center; width:25%; float:left; padding:10px 0px;}
#tab ul:nth-child(2) li{min-height:300px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="tabMaker.js"></script>
<script>
$(function(){
$('#tab').tabMaker();
});
</script>
<body>
<div id="tab">
<ul>
<li style="background:red;">버튼1</li>
<li style="background:green;">버튼2</li>
<li style="background:blue;">버튼3</li>
<li style="background:yellow;">버튼4</li>
</ul>
<ul>
<li style="background:red;">콘텐츠1</li>
<li style="background:green;">콘텐츠2</li>
<li style="background:blue;">콘텐츠3</li>
<li style="background:yellow;">콘텐츠4</li>
</ul>
</div>
</body>
|
다음으로 스크립트 태그 안에 위와 같이 적어주세요.
아까 우리가 html 에서 작성했던 아이디를 괄호안에 넣어 #tab 넣은게 보이시죠?
그러면 해당 요소를 탭메뉴로 바꿔줄꺼에요.
별도의 옵션은 1.0버전에서는 없네요. 추후에 업그레이드 되어 차기 버전에서는 나올수도 있겠지만요.
이제 확인해보시면 탭메뉴가 정상적으로 만들어졌을꺼에요.
ie11, 크롬, 사파리, 파이어폭스에서 뿐만 아니라 모바일에서도 테스트 마쳤어요.
