ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • dropdownbanner.js - 쇼핑몰 상단배너 플러그인
    워크식스소식/플러그인소식 2016.08.02 23:53








    사이트 최상단에 위치하여 본문을 아래로 밀어내는 기능을 가지고 있으면 오늘은 그만 보기 기능도 가지고 있는 플러그인

    <style>
        #banner1{height:100px;}
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="/js/dropdownbanner.js"></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. 제이쿼리 설치가 필요 합니다.

     

     

     

     

    <style>
        #banner1{height:100px;}
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="/js/dropdownbanner.js"></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="/js/dropdownbanner.js"></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. 상단 배너 기본구조의 html 태그를 위와 같이 작성 합니다.

     

     

     

     

    <style>
        #banner1{height:100px;}
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="/js/dropdownbanner.js"></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. 페이지가 실행될때 자동으로 실행될 수 있도록 함수를 작성 합니다.

     

     

     

     

    $('#banner1').dropdwonbanner({
                todayClose:'.todayclose', //오늘은 더 이상 보지 않기 버튼을 설정 합니다.
                close:'.close', //닫기 버튼을 설정 합니다.
                speed:300 //상단배너 열릴때 속도를 설정 합니다.
    });

     

    5. 옵션을 적절하게 설정 합니다.

     

     

     

    6. 소스는 여기서 다운로드 받을수 있습니다.




    [문의하기]


    copyright ⓒ 2017. 워크식스


    댓글 2

work6.kr