2016/08/02 - [Jquery] - dropdownbanner.js - 쇼핑몰 상단배너 플러그인





[소개]


쇼핑몰 최상단에 위치하는 드롭다운배너를 만들어 줍니다.











[플러그인명]


dropdownbanner.js







[버전]


1.0

최초작성






[사용법]


<style>

#banner1{height:100px;}

</style>


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

<script src="제공하는 플러그인 cdn"></script>


<script>

$(function(){

$('#banner1').dropdwonbanner({

todayClose:'.todayclose',

close:'.close',

speed:300

});

});

</script>


<body>

<div id="banner1">

<div class='bannerimg' style="overflow:hidden; height:79px; position:relative;">

<a href="#">

<img src="" style="position:absolute;">

</a>

</div>

<div>

오늘은 더이상 보지 않기

<input class="todayclose" type='checkbox' value="todayclose">

<button type="button" class="close">닫기</button>

</div>

</div>

</body> 


1. 예제 html을 작성 합니다.

 


 

 


<style>

#banner1{height:100px;}

</style>


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

<script src="제공하는 플러그인 cdn"></script>


<script>

$(function(){

$('#banner1').dropdwonbanner({

todayClose:'.todayclose',

close:'.close',

speed:300

});

});

</script>


<body>

<div id="banner1">

<div class='bannerimg' style="overflow:hidden; height:79px; position:relative;">

<a href="#">

<img src="" style="position:absolute;">

</a>

</div>

<div>

오늘은 더이상 보지 않기

<input class="todayclose" type='checkbox' value="todayclose">

<button type="button" class="close">닫기</button>

</div>

</div>

</body> 



2. 예제 스타일을 작성해 줍니다. 이때 높이는 전체배너의 높이를 지정해 줍니다.





<style>

#banner1{height:100px;}

</style>


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

<script src="제공하는 플러그인 cdn"></script>


<script>

$(function(){

$('#banner1').dropdwonbanner({

todayClose:'.todayclose',

close:'.close',

speed:300

});

});

</script>


<body>

<div id="banner1">

<div class='bannerimg' style="overflow:hidden; height:79px; position:relative;">

<a href="#">

<img src="" style="position:absolute;">

</a>

</div>

<div>

오늘은 더이상 보지 않기

<input class="todayclose" type='checkbox' value="todayclose">

<button type="button" class="close">닫기</button>

</div>

</div>

</body> 



3. 여기 홈페이지에서 제공하는  cdn을 복사하여 붙여 넣습니다.





<style>

#banner1{height:100px;}

</style>


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

<script src="제공하는 플러그인 cdn"></script>


<script>

$(function(){

$('#banner1').dropdwonbanner({

todayClose:'.todayclose',

close:'.close',

speed:300

});

});

</script>


<body>

<div id="banner1">

<div class='bannerimg' style="overflow:hidden; height:79px; position:relative;">

<a href="#">

<img src="" style="position:absolute;">

</a>

</div>

<div>

오늘은 더이상 보지 않기

<input class="todayclose" type='checkbox' value="todayclose">

<button type="button" class="close">닫기</button>

</div>

</div>

</body> 



4. document가 로딩이 완료되면 원하는 배너의 아이디를 선택자로 dropdwonbanner를 실행해 줍니다.







[옵션설명]


<script>

$(function(){

$('#banner1').dropdwonbanner({

todayClose:'.todayclose', //오늘은 더이상 보지 않기 체크박스의 클래스 또는 아이디 지정

close:'.close', //그냥 닫기 클래스 또는 아이디 지정

speed:300 //배너가 위로 올라가며 닫히는 속도, 1000이 1초, 설정 안하면 자동으로 0.8초 적용됨

});

});

</script>






+ Recent posts