그냥 개발자 블로그

tabMaker.js 플러그인 - 탭 메뉴를 쉽게 만들어 주는 플러그인 본문

소식/플러그인소식

tabMaker.js 플러그인 - 탭 메뉴를 쉽게 만들어 주는 플러그인

마음이파파 2016. 8. 9. 12:07







 





탭메뉴를 간단히 구현하는 플러그인

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/tabMaker.js"></script>

<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>
    $(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>

 

1. 제이쿼리가 연결되어 있어야 합니다.

 

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/tabMaker.js"></script>

<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>
    $(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>

 

2. 다운로드 받은 플러그인을 설치한 경로를 지정해 줍니다. ( 플러그인은 워크식스 홈페이지에서 다운로드 받으실 수 있습니다. )

 

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/tabMaker.js"></script>

<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>
    $(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>

 

3. 기본 html 태그 및 스타일을 추가해 줍니다.

 

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/tabMaker.js"></script>

<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>
    $(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>

 

4. 페이지가 실행되면 동시에 실행될 수 있는 위치에 함수를 위치 시킵니다.

 

 

 

5. 플러그인은 워크식스 홈페이지에서 만나보실 수 있습니다.




[문의하기]


copyright ⓒ 2017. 워크식스


저작자표시 비영리 변경금지

'소식 > 플러그인소식' 카테고리의 다른 글

워크식스에서 제이쿼리 플러그인 다운로드 받는 방법  (0) 2017.03.02
bookmark.js - 스마트폰으로 홈페이지 방문시 바탕화면에서 바로가기 아이콘 자동추가  (0) 2017.02.19
swipemenu.js 플러그인 - 모바일웹 좌우 슬라이드 메뉴 효과  (0) 2016.08.03
book.js 플러그인 - 책 넘기는 효과  (0) 2016.08.03
pgpopup.js - 잠깐 나타났다 사라지는 팝업 플러그인  (0) 2016.08.02
'소식/플러그인소식' Related Articles more