[소개]

탭을 가지고 있는 슬라이드 배너로 위아래로 배너가 이동하며 현재 배너에 따라서 탭에 강조가 표시됩니다.




[플러그인명]

tabbanner




[버전]

1.0
최초작성





[사용법]


<style>

#main_banner{  width:980px; height: 300px; overflow: hidden; position: relative; margin-bottom: 41px;}

#main_banner .container{position: absolute;}

#main_banner .tab{position: absolute; top:53px; left:16px; z-index: 2; border-bottom: 0;}

#main_banner .tab img{}

#main_banner .emphasis{position:absolute; z-index: 3; top:53px; left:16px;}

</style>



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

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script src="플레이그라운드에서 제공하는 플러그인 cdn"></script>



<div id="main_banner">


<div class="container">

<div><img src="y.jpg" align="absmiddle"></div>

<div><img src="b.jpg" align="absmiddle"></div>

<div><img src="r.jpg" align="absmiddle"></div>

</div>


<div class="tab">

<div><img src="btn_y.jpg" align="absmiddle"></div>

<div><img src="btn_b.jpg" align="absmiddle"></div>

<div><img src="btn_r.jpg" align="absmiddle"></div>

</div>


<img src="emphasis.png" class="emphasis">

</div>




<script>

jQuery(function(){

jQuery('#main_banner').tabbanner({

tab:'.tab',

emphasis:'.emphasis',

height:300, //px

delay:3000

});

});

</script>


1. 플레이그라운드 홈페이지에서 jquery cdn 주소를 복사 하여 개발하는 곳에 붙여 넣기 합니다. (제이쿼리 및 제이쿼리 UI 가 사전에 선언 되어 있어야 합니다)






<style>

#main_banner{  width:980px; height: 300px; overflow: hidden; position: relative; margin-bottom: 41px;}

#main_banner .container{position: absolute;}

#main_banner .tab{position: absolute; top:53px; left:16px; z-index: 2; border-bottom: 0;}

#main_banner .tab img{}

#main_banner .emphasis{position:absolute; z-index: 3; top:53px; left:16px;}

</style>



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

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script src="플레이그라운드에서 제공하는 플러그인 cdn"></script>



<div id="main_banner">


<div class="container">

<div><img src="y.jpg" align="absmiddle"></div>

<div><img src="b.jpg" align="absmiddle"></div>

<div><img src="r.jpg" align="absmiddle"></div>

</div>


<div class="tab">

<div><img src="btn_y.jpg" align="absmiddle"></div>

<div><img src="btn_b.jpg" align="absmiddle"></div>

<div><img src="btn_r.jpg" align="absmiddle"></div>

</div>


<img src="emphasis.png" class="emphasis">

</div>




<script>

jQuery(function(){

jQuery('#main_banner').tabbanner({

tab:'.tab',

emphasis:'.emphasis',

height:300, //px

delay:3000

});

});

</script>


2. 표시된 형태로 html을 작성해 줍니다. (위 html은 tabbanner 슬라이드를 사용하기 위한 기본 레이아웃 입니다.)






<style>

#main_banner{  width:980px; height: 300px; overflow: hidden; position: relative; margin-bottom: 41px;}

#main_banner .container{position: absolute;}

#main_banner .tab{position: absolute; top:53px; left:16px; z-index: 2; border-bottom: 0;}

#main_banner .tab img{}

#main_banner .emphasis{position:absolute; z-index: 3; top:53px; left:16px;}

</style>



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

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script src="플레이그라운드에서 제공하는 플러그인 cdn"></script>



<div id="main_banner">


<div class="container">

<div><img src="y.jpg" align="absmiddle"></div>

<div><img src="b.jpg" align="absmiddle"></div>

<div><img src="r.jpg" align="absmiddle"></div>

</div>


<div class="tab">

<div><img src="btn_y.jpg" align="absmiddle"></div>

<div><img src="btn_b.jpg" align="absmiddle"></div>

<div><img src="btn_r.jpg" align="absmiddle"></div>

</div>


<img src="emphasis.png" class="emphasis">

</div>




<script>

jQuery(function(){

jQuery('#main_banner').tabbanner({

tab:'.tab',

emphasis:'.emphasis',

height:300, //px

delay:3000

});

});

</script>


3.  표시된 형태로 스타일을 작성해 줍니다. (위 스타일은 tabbanner 슬라이드를 사용하기 위한 기본 스타일 입니다.)






<style>

#main_banner{  width:980px; height: 300px; overflow: hidden; position: relative; margin-bottom: 41px;}

#main_banner .container{position: absolute;}

#main_banner .tab{position: absolute; top:53px; left:16px; z-index: 2; border-bottom: 0;}

#main_banner .tab img{}

#main_banner .emphasis{position:absolute; z-index: 3; top:53px; left:16px;}

</style>



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

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script src="플레이그라운드에서 제공하는 플러그인 cdn"></script>



<div id="main_banner">


<div class="container">

<div><img src="y.jpg" align="absmiddle"></div>

<div><img src="b.jpg" align="absmiddle"></div>

<div><img src="r.jpg" align="absmiddle"></div>

</div>


<div class="tab">

<div><img src="btn_y.jpg" align="absmiddle"></div>

<div><img src="btn_b.jpg" align="absmiddle"></div>

<div><img src="btn_r.jpg" align="absmiddle"></div>

</div>


<img src="emphasis.png" class="emphasis">

</div>




<script>

jQuery(function(){

jQuery('#main_banner').tabbanner({

tab:'.tab',

emphasis:'.emphasis',

height:300, 

delay:3000

});

});

</script>


4. 원하는 엘리먼트(예제에서는 main_banner)에 tabbanner를 실행해 줍니다.




[옵션설명]


tab : 탭 메뉴 그룹를 가리킵니다.

emphasis : 탭을 강조 했을때 이미지를 가리킵니다. (이미지는 png 추천)

height : 배너 전체 그룹의 높이를 지정 하며, 스타일의 height 와 일치해야 합니다. 예제에서는 main_banner 에 해당 합니다.

delay : 다음 배너로 슬라이드 된후 머무르는 시간을 지정 합니다. (1000 = 1초)






[문의하기]


copyright ⓒ 2017. 워크식스


+ Recent posts