로마장군의 블로그: jQuery

레이블이 jQuery인 게시물을 표시합니다. 모든 게시물 표시

[jquery] 부모창의 엘리먼트에 접근하기

프레임(iframe)인 경우

$("#id", parent.document).val(text); // 2가지 모두 가능함
window.parent.$("#id").val(text);

팝업인 경우

$("#id", opner.document).val(text);
window.opner.$("#id").val(text);

[jQuery] [swiper] 스와이프 이미지 슬라이드


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>

    <div class="swiper-container">

        <ul class="swiper-wrapper">

            <li class="swiper-slide" style="background:url(/images/main/visual01.jpg) center center / cover no-repeat;" data-left="0"></li>
            <li class="swiper-slide" style="background:url(/images/main/visual03.jpg) center center / cover no-repeat;" data-left="1"></li>
            <li class="swiper-slide" style="background:url(/images/main/visual02.jpg) center center / cover no-repeat;" data-left="0"></li>
            <li class="swiper-slide" style="background:url(/images/main/visual04.jpg) center center / cover no-repeat;" data-left="1"></li>
            <li class="swiper-slide" style="background:url(/images/main/visual05.jpg) center center / cover no-repeat;" data-left="1"></li>
        </ul>

        <div class="swiper-pagination"></div>
        <!-- navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

    </div>


    $(document).ready(function(){
        //initialize swiper when document ready
        var mySwiper = new Swiper ('.swiper-container', {
            // Optional parameters
            //direction: 'vertical',
            effect: 'fade',
            speed: 2500,
            crossEffect: { crossFade: true },
            autoplay: true,
            loop: true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-container .swiper-pagination',
                clickable: true,
            },
            on: {
                init: function(){
                    //console.log("slide init");
                    //console.log(this.$wrapperEl[0]);
                    var slide = $(this.$wrapperEl[0]).find(".swiper-slide-active");
                    var bg = slide.data("left");
                    if(bg=="1") {
                        $("header").addClass("bg-white");
                    } else {
                        $("header").removeClass("bg-white");
                    }
                },
            },
        });

        mySwiper.on('slideChange', function(){
            //console.log("slide change");
            //console.log(mySwiper.realIndex);
            var r_idx = mySwiper.activeIndex;
            var slide = mySwiper.slides[r_idx];
            //console.log(mySwiper.$wrapperEl);
            //console.log($(slide));
            var bg = $(slide).data("left");
            //console.log("r_idx=" + r_idx + ", bg=" + bg + ", src=" + $(slide).css("background"));
            if(bg=="1") {
                $("header").addClass("bg-white");
            } else {
                $("header").removeClass("bg-white");
            }
        });
    });

단순히 슬라이드를 동작시키려면 아래와 같이 하면 된다.


    $(document).ready(function(){
        var mySwiper = new Swiper ('.swiper-container', {
            // Optional parameters
            //direction: 'vertical',
            effect: 'fade',
            speed: 2500,
            crossEffect: { crossFade: true },
            autoplay: true,
            loop: true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-container .swiper-pagination',
                clickable: true,
            },
        });

    });

[jQuery], [font-awesome] 페이지 로딩 이미지 띄우기


<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- font-awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#loading {
 width: 100%;
 height: 100%;
 top: 0px;
 left: 0px;
 position: fixed;
 display: block;
 opacity: 1;
 background-color: #fff;
 z-index: 99;
 text-align: center;
}

#loading-image {
 position: absolute;
 top: 50%;
 left: 50%;
 z-index: 100;
 font-size:4rem;
}
</style>

<div id="loading">
    <div id="loading-image" class="fa fa-spinner fa-spin"></div>
</div>


$(window).load(function() {
    //$('#loading').hide();
});

[jquery] validate 폼 경고를 alert()으로 띄우기

$.validator.setDefaults({
    onkeyup: false,
    onclick: false,
    onfocusout: false,
    showErrors: function(errorMap,errorList){
        if(this.numberOfInvalids()){ // 에러가 있으면
            alert(errorList[0].message); // 경고창으로 띄움
        }
    }
});

$("#form-write").validate({
    rules: {
        token: { required: true }
        , ev_name: { required: true }
        , ev_area: { required: true }
        , ev_type: { required: true }
        , ev_sdate: { required: true }
        , ev_edate: { required: true }
        , ev_addr: { required: true }
    },
    messages: {
        token: { required: "토큰이 누락되었습니다." }
        , ev_name: { required: "행사명을 입력하세요." }
        , ev_area: { required: "행사지역을 선택하세요." }
        , ev_type: { required: "행사유형을 선택하세요." }
        , ev_sdate: { required: "행사기간(시작일)을 입력하세요." }
        , ev_edate: { required: "행사기간(종료일)을 입력하세요." }
        , ev_addr: { required: "행사위치를 입력하세요." }
    },
    errorPlacement: function(error,element){
        //error.appendTo(element.closest("div").prev()); // 사용안함
    },
});

validate의 기본 표시방법은 해당 INPUT창의 아래에 오류메세지를 표시하는 방식인데,

전통적인 FORM 체크방식처럼 alert()창을 실행하여 오류메세지를 표시하도록 변경함

[CSS] [jQuery] 화면스크롤에 따라 위치가 고정되는 스크립트

최초 position: relative;

이동 position: fixed;

/* Javascript */
jQuery(document).ready(function(){
    var wrap = jQuery(window);
    // 페이지로딩, 새로고침
    var sct = jQuery(this).scrollTop();
    console.log("scroll = " + sct);
    if(sct>140) {
        jQuery("#contents_left").addClass("fixed");
    } else {
        jQuery("#contents_left").removeClass("fixed");
    }
    // scroll 반응
    wrap.on("scroll", function(e){
        var sct = jQuery(this).scrollTop();
        console.log("scroll = " + sct);
        if(sct>140) {
            jQuery("#contents_left").addClass("fixed");
        } else {
            jQuery("#contents_left").removeClass("fixed");
        }
    });
});

/* CSS */
#contents_left.fixed { position:fixed; top:0px; }