jQuery slide 플러그-인(plugin) 개발

● 요구사항 

　- 롤링(슬라이드) 갤러리 기능 추가

● 직접 플러그-인(plugin) 개발

　- 관리자가 일관된 패턴으로 쉽게 등록이 가능하다.

　- 슬라이드 type 제공 

   - 원하는 페이지에 쉽게 적용이 가능하다.(범용성)

● 스킬

　1. jQuery.extend( target [, object1] [, objectN] )

　　- 두개 이상의 객체를 합친다.(Merge)

　　- object1 : 합쳐질 때, 기준이 될 객체 

　　- objectN : 기준 객체에 합쳐질 추가 객체 

　　!. 기준이 되는 객체에 있는 키와 합쳐질 두번째 객체에 있는 키가 동일할 경우, 첫번째 객체의 값이 덮어써져 버린다.

　2. 객체 메서드 

　　- jQuery.fn 객체를 확장한다.(jQuery.fn은 jQuery.prototype의 별칭)

　3. $.getScript

- GET HTTP 요청을 사용하여 서버에서 JavaScript 파일을 로드한 다음 실행.

!. getScript는 $.ajax({ url : url, dataTpe : "script", success : success }); Ajax함수이다.

- jQuery 1.5부터는 .fail() 오류를 설명하는데 사용.

　4. 다수의 엘리먼트에 함수의 기능이 적용되야 함.

　　- .each() 사용, 묵시적인 반복(implicit iteration)을 수행.

아래는 객체 메서드을 이용한 직접 플러그-인(plugin) 코드를 작성 해보았습니다.

● jquery.slideplugin-1.0.js　- owl.carousel.js 오픈소스를 이용.

(function ($) {
    $.fn.AdprintSlide = function (items, options, type) {
        var $this = this;
        $.getScript("/js/slides/owl.carousel.js")
            .done(function () {
            return $this.each(function () {
                var className = $(this).attr("class");
                    appendHtmlItems(className, items);
                    var typeOfFunction = getTypeOfFunction(type, options);
                    var opts = $.extend({}, $.fn.AdprintSlide.defaults, typeOfFunction);
                    $this.find(".owl-carousel").owlCarousel(opts);
            });
        }).fail(function () {
            console.log("getScript fail");
        });
    }
 
    $.fn.AdprintSlide.defaults = {
        items: 4,
        loop: true,
        margin: 10,
        autoplay: true,
        autoplayTimeout: 1000,
        autoplayHoverPause: true,
        nav: false,
        autoWidth: false
    }
 
    var getTypeOfFunction = function(type, options){
        if (typeof (type) != "undefined" && type.toLowerCase() == "animate") {
            return slideOption_Animate(options);
        }
        return slideOption_AutoPlay(options);
    }
 
    var slideOption_Animate = function (opts) {
        if (typeof (opts) == "undefined") { return {}; }
        return {
            animateOut: 'fadeOut',
            items: 1,
            margin: opts.margin,
            autoplayTimeout: opts.autoplayTimeout,
            autoplayHoverPause: opts.autoplayHoverPause,
            nav: opts.nav,
        }
    }
 
    var slideOption_AutoPlay = function (opts) {
        if (typeof (opts) == "undefined") { return {}; }
        return {
            items: opts.items,
            autoplayTimeout: opts.autoplayTimeout,
            autoplayHoverPause: opts.autoplayHoverPause,
            nav: opts.nav,
            autoWidth: opts.autoWidth
        }
    }
 
    var loadScript = function() {
        var script = document.createElement('script');
        script.setAttribute("type", "text/javascript");
        script.setAttribute("scr", "/js/slides/owl.carousel.js");
        document.getElementsByTagName('head')[0].appendChild(script);
    }
 
    var loadCss = function() {
        $('head').append('<link rel="stylesheet" href="/css/slides/test/owl.carousel.min.css"/>');
        $('head').append('<link rel="stylesheet" href="/css/slides/test/owl.theme.default.min.css"/>');
    }
 
    var appendHtmlItems = function(className, items) {
        var h = "<div class=\"large-12 columns\"><div class=\"owl-carousel owl-theme\">";
        $.each(items, function (i, t) {
            h += "<div class=\"item\">"
                + "<a href='" + t.LinkUrl + "' target=\"_blank\">"
                + "<img src='" + t.ImagePath + "'/>"
                + "</div>";
        });
        h += "</div></div>";
        $('.' + className).append(h);
    }
 
    loadScript();
    loadCss();
})(jQuery);
 

※ 주의 사항

　 - 위 코드는 jQuery 1.x이상 먼저 Load되어야 합니다. 

　 - jQuery가 로딩되지 않았다면 동적으로 로드 할 수 있습니다. 위의 loadScript 함수와 같이 jQuery를 로드 할 수 있습니다.

　 - jQuery가 로드 되었는지 확인 할 수 있는 방법도 있습니다. script.readyState == 'complete' || script.readyState == 'load' 인지 확인 가능

● html 소스

<script type="text/javascript" src="/js/slides/owl_carousel.widget.js"></script>
<div class="categorySlide"></div>
<script type="text/javascript">
    var items1 = [
        {
            "LinkUrl": ""
            , "ImagePath": ""
        }, {
            "LinkUrl": ""
            , "ImagePath": ""
        }, {
            "LinkUrl": ""
            , "ImagePath": ""
        }, {
            "LinkUrl": ""
            , "ImagePath": ""
        }, {
            "LinkUrl": ""
            , "ImagePath": ""
        }, {
            "LinkUrl": ""
            , "ImagePath": ""
        }
    ];
$(".categorySlide").AdprintSlide(items1, { autoplayHoverPause: true, autoplayTimeout : 1300 }, "autoplay");
</script>

선택자에 AdprintSlide 메서드를 호출합니다. 

● 확장 

　- 관리 기능이 있다면 html 소스에서 item1의 대체로 DB에서 조회하여 보여 줄 수도 있겠습니다. 

참고 사이트 

http://www.nextree.co.kr/p9989/