그냥 개발자 블로그

링크(href) 미리보기 기능 jquery plugin(제이쿼리 플러그인) 본문

소식/플러그인소식

링크(href) 미리보기 기능 jquery plugin(제이쿼리 플러그인)

마음이파파 2015. 9. 21. 15:41





오늘 소개할 플러그인의 기능은 링크 미리 보기 기능 이에요.


a태그의 href를 분석하여 이동할 페이지를 작게 미리 보여주는 역할을 하죠.


아래 동영상을 보실게요.









이 처럼 바로 이동하지 않고 미리 봄으로서 사용자들은 실제 페이지 이동으로 인한 피로도를 감소 시킬수 있어요.


해당 기능을 구현가능한 플러그인은 viewTinted.js 라고 이름을 지었고요. 


여기 홈페이지에서 무료로 받아가실수 있으세요.


그럼 예제 및 사용법을 보실게요.




 





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

<script src="viewTinted.js"></script>


<script>

$(function(){

$(document).viewTinted();

});

</script>


<body>

<a href="work6.kr" viewtinted>페이지이동</a>

</body>




이게 예제에 사용된 소스인데요.


보시면 a태그 안에 viewtinted 라고 적혀 있는게 보이시나요?


사이트에는 수많은 a태그들이 존재 함으로 모든 링크를 미리보기 할수는 없는 노릇이니 위 처럼 viewtinted 를 써주시면 그 링크(href) 에서만 동작을 해요.










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

<script src="viewTinted.js"></script>


<script>

$(function(){

$(document).viewTinted();

});

</script>


<body>

<a href="http://work6.kr" viewtinted>페이지이동</a>

</body>







다운 받은 플러그인을 서버에 올린 후 요렇게 연결해주시고요.










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

<script src="viewTinted.js"></script>


<script>

$(function(){

$(document).viewTinted();

});

</script>


<body>

<a href="http://work6.kr" viewtinted>페이지이동</a>

</body>





위처럼 작성해주시면 동작 준비가 완료되요.


스타일은 까먹었냐구요? 아니에요.


미리보기 제이쿼리 플러그인 사용자의 편의를 최대한 고려하였기에 스타일적 요소는 모두 플러그인에서 자동으로 만들어지도록 설정 해두었어요.


그럼 이제 실제로 동작해보세요. 


ie11, 크롬, 파폭 에서 테스트 해봤는데 이상 없이 정상적으로 동작해요.



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

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

소스 코드 보호 제이쿼리(jquery) 플러그인  (0) 2015.09.21
쇼핑몰 스카이배너 구현 제이쿼리 플러그인(jquery plugin)  (0) 2015.09.21
탭 메뉴 만들기 jquery plugin (제이쿼리 플러그인)  (0) 2015.09.21
모바일웹에서 swipe menu 구현 제이쿼리(jquery) 플러그인  (0) 2015.09.21
책장 넘기는 효과 제이쿼리(jquery) 플러그인  (0) 2015.09.21
'소식/플러그인소식' Related Articles more