jQuery Plugin 사용법
http://blog.work6.kr/70
를 참고 했습니다.
=========================================================
으아아 jQuery Plugin 사용법을 설명하겠다아
플러그인이란 간단하게 기존의 기능을 확장할 수 있게 도와주는 프로그램입니다.
제이쿼리의 경우 주로 메소드로 많이 사용된다.
예시를 들면
zerofy라는 플러그인을 만들었다면, $('#zero').zerofy()라고 쓸 수 있는 메소드가 생성되는 것이다.
그럼 zerofy라는 플러그인을 어떻게 추가하는가
$.fn.zerofy = function(options) { var settings = $.extend({ repeat: 1 // 기본 설정 }, options); var zeros = '0'.repeat(settings.repeat); return this.each(function() { $(this).html(zeros); }); }; $('#zero').zerofy({ repeat: 5 }); // 00000 |
여기 html 전부를 0으로 만드는 zerofy라는 플러그인을 만들었다.
each는 여러 태그를 선택했을 경우 각각에 대해 반복문을 돌며 동작을 수행한다.
return this.each를 했기 때문에 각각의 this가 return되어 메소드 체이닝을 할 수 있다.
안에 settings 객체를 만들어 $.extend로 기본 설정과 주어진 options 객체를 합친다. 옵션을 주지 않으면 기본 설정인 repeat: 1이 사용된다. '0'.repeat()을 했는데 이 메소드는 ES2015에 추가된 메소드이다. 만약 브라우저가 es2015를 지원하지 않는다면 따로 만들어야 한다.
아무튼 이렇게 만든 플러그인을 추가하고 싶다면.
이렇게 plugin 폴더를 넣어주고
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>RoyalSlider Example</title> <!-- jQuery, 1.7+ is required --> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- main slider JS, get it from build tool http://dimsemenov.com/private --> <script src="royalslider\jquery.royalslider.min.js"></script> <!-- main slider style --> <link href="royalslider/royalslider.css" rel="stylesheet"> <!-- selected skin style --> <link href="royalslider\skins\default\rs-default.css" rel="stylesheet"> <script> // Slider initialization, you may put this part of code in JS file jQuery(document).ready(function($) { // slider initialization $('#content-slider').royalSlider({ // example of slider options controlNavigation: 'bullets', autoPlay: { enabled: true }, deeplinking: { enabled: true, prefix: 'slider-' } }); }); </script> <!-- slider css --> <style> /* you may put here additional slider CSS */ /* but it'll be better if you move it to separate CSS file that your site uses */ </style> </head> <body> <!-- actual slider code --> <div id="content-slider" class="royalSlider contentSlider rsDefault"> <div>slide1</div> <div>slide2</div> <div>slide3</div> </div>
</body> </html> |
코드 상에서 각 파일의 주소값을 잘 맞춰서 넣어주면 실행이 된다.
정상 실행이 되는지 파악 하고 싶으면 크롬으로 확인해보면 된다
'WebDegine > Web' 카테고리의 다른 글
| 자바 서블릿을 사용해보자 (0) | 2019.01.02 |
|---|---|
| Jquery 기본적인 사용법 (0) | 2019.01.01 |
| [CSS] 부트스트랩 사용법 (0) | 2018.12.31 |
