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>
