쇼핑몰 스카이배너 구현 제이쿼리 플러그인(jquery plugin)

3일만에 새로운 플러그인을 내놓아요.

흔히들 쇼핑몰에서 스카이배너라 불리우는 따라다니는 배너를 구현하는 플러그인이에요.

일단 테스트 영상 함 보실게요.

요런 기능들 많이 보셨죠? 

이 기능은 자주 이용하는 메뉴들을 늘 화면에 특정 위치에 존재하게하는 역할로 사이트 방문자들에게 보다 빠른 이동을 가능하게 해주죠.

요즘은 기본적으로 많이 탑재된 기능인데 간혹 디자인이 변경되었거나 실수로 기능이 삭제 되었을 경우 되살리기들 힘들어 하시더라고요.

그래서 플러그인으로 만들어 봤어요.

 

여타 다른 플러그인들과 마찬가지로 여기홈페이지에서 skyBanner.js 플러그인을 받아가실수 있고요.

영상에서 보여드린 예제를 통해서 사용법을 알아보죠.

<style>       body{padding:0; margin:0} #body{width:900px; height:1900px; background:#bbb; margin:0 auto;} #skybanner{width:80px; height:290px; background:#555} </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="skybanner.js"></script> <script> $(function(){ $('#skybanner').skyBanner({ body:'#body', local:'right', margintop:100 }); }); </script> <div id="body"> <div style="width:100px; background:black;"></div> <div style="width:100px; background:red;"></div> <div style="width:100px; background:black;"></div> <div style="width:100px; background:red;"></div> <div style="width:100px; background:black; margin-top:800px;"></div> </div> <div id="skybanner">

예제에 사용된 html 이에요.

보통 사이트에 width 사이즈를 지정하여 가운데 오게 배치하는데요. 그곳에 해당하는 영역을 body라고 지칭해줬어요.

skybanner는 말그대로 스카이 배너 영역이에요.

<style>       body{padding:0; margin:0} #body{width:900px; height:1900px; background:#bbb; margin:0 auto;} #skybanner{width:80px; height:290px; background:#555} </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="skybanner.js"></script> <script> $(function(){ $('#skybanner').skyBanner({ body:'#body', local:'right', margintop:100 }); }); </script> <div id="body"> <div style="width:100px; background:black;"></div> <div style="width:100px; background:red;"></div> <div style="width:100px; background:black;"></div> <div style="width:100px; background:red;"></div> <div style="width:100px; background:black; margin-top:800px;"></div> </div> <div id="skybanner">

예제에 사용된 스타일인데요.

항상 스타일까지 최소화하는 플러그인을  만드는것에 초점을 기울이고 있는데 위에 적용된 스타일은 많죠?

하지만 skyBanner.js 에 영향을 미치는 요소로는 #body와 #skybanner에서 width가 되겠네요.

나머진 뭐.... 편한대로 작성해주시고요.

<style>       body{padding:0; margin:0} #body{width:900px; height:1900px; background:#bbb; margin:0 auto;} #skybanner{width:80px; height:290px; background:#555} </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="skybanner.js"></script> <script> $(function(){ $('#skybanner').skyBanner({ body:'#body', local:'right', margintop:100 }); }); </script> <div id="body"> <div style="width:100px; background:black;"></div> <div style="width:100px; background:red;"></div> <div style="width:100px; background:black;"></div> <div style="width:100px; background:red;"></div> <div style="width:100px; background:black; margin-top:800px;"></div> </div> <div id="skybanner">

다운 받은 플러그인을 서버에 올리신 후 skyBanner.js 를 link 걸고 위와 같이 써주시면 일단 동작할 준비는 완료되요.

옵션 설명은 아래와 같아요.

body : 중앙에 오는 영역의 아이디나 클래스

local : 스카이 배너의 위치로 right 또는 left 를 이용

margintop : 상단에 겹쳐서는 안되는 영역이 있을 경우 해당 영역만큼의 px 크기를 입력

자바스크립트를 쬐금이라도 아시는분들은 쉬우실꺼에요.

그런데 간혹 정말 하나도 모르시는분들이 필요하다고 소스를 받아다가 죽~ 복사해서 아무곳에 붙여 넣고 안된다고 하시는데요.

jquery에 대해서 구글링해서 기초학습을 하시면 충분히 해내실수 있을꺼라 믿고요.

그래도 정~~~ 모르겠다 하시는분들은 아시는 분들이나 저에게 요청해주세요.