개발노예 코드와 일상

ajax 기본적으로 틀 할때

$('[name="ag_id"]').on('change', function() {

        ag_id = $(this).val();

            $.ajax({
                type: "POST",
                data: {ag_id:ag_id},
                url: '<?php echo G5_BBS_URL?>/ajax.agency_info.php',
                success: function(data) {

                    $("span.ag_ceo").text(data.data['ag_ceo']);
                    $("span.ag_ex").text(data.data['ag_ex']);

                }
            }); 

    })

가벼운 슬라이더 찾다가 발견해서 꾸준히 사용중
반응형으로 사용하기도 편하긴하더라
플러그인 추가해주고나서~

$('.notice_slide').slick({
slide: 'div', //슬라이드 되어야 할 태그 ex) div, li
infinite : true, //무한 반복 옵션
fade: false,
slidesToShow : 3, // 한 화면에 보여질 컨텐츠 개수
slidesToScroll : 3, //스크롤 한번에 움직일 컨텐츠 개수
arrows : true, // 옆으로 이동하는 화살표 표시 여부
speed : 100, // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)
dots : false, // 스크롤바 아래 점으로 페이지네이션 여부
autoplay : true, // 자동 스크롤 사용 여부
autoplaySpeed : 10000, // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)
pauseOnHover : true, // 슬라이드 이동 시 마우스 호버하면 슬라이더 멈추게 설정
vertical : false, // 세로 방향 슬라이드 옵션
prevArrow : "Previous", // 이전 화살표 모양 설정
nextArrow : "Next", // 다음 화살표 모양 설정,
dotsClass : "slick-dots", //아래 나오는 페이지네이션(점) css class 지정
responsive: [ // 반응형 웹 구현 옵션
{
breakpoint: 1300, //화면 사이즈 960px
settings: {
//위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경
slidesToShow:2,
slidesToScroll : 2,
}
},
{
breakpoint: 768, //화면 사이즈 768px
settings: {
//위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경
slidesToShow:1,
slidesToScroll : 1,
}
}
]
});

그누보드 기본 회원가입폼을 변경해서쓰다가

이번에 반응형으로 모조리 통합하면서 변경하게되었다

앱에서나 여타 사이트처럼 커서가 이동하면 바로바로 처리하도록하려고했고

ajax로 해야하나.. 하다가

플러그인발견!

첨에는 쪼금 난해했지만

일단 js 추가해주고

$.validator.setDefaults({

    onfocusout: function(element) { $(element).valid(); },
    focusInvalid: true,
    focusCleanup: false,
    errorClass: 'form-control-msg',
     errorElement: 'div',
    errorPlacement : function (error, element){ // data-error 속성으로 해당 위치 삽입
        var placement = $(element).data('error');
        if (placement) {
            $(placement).append(error);
        } else { // 없을경우 마지막노드 뒤에 삽입
            element.parent().children().last().after(error);
        }
    },
    highlight: function(element) {
      $(element)
        .closest('.form-group')
        .addClass('has-error');
    },
    unhighlight: function(element, errorClass, validClass) {
      $(element)
        .closest('.form-group')
        //.removeClass('has-error')
        //.addClass('text-success');
    },
});

//폼검사
$('#btn_submit, .form-control').click(function(){

    $("#fregisterform").validate({
        //validation이 끝난 이후의 submit 직전 추가 작업할 부분
        submitHandler: function() {

            if(!$("input:checkbox[id='agree_01']").is(":checked"))
            {
                toastr.error("이용약관을 동의해주세요");

                return false;
            }
            document.getElementById('fregisterform').submit();
        },
        //규칙
        rules: {
            mb_id: {
                required : true,
                remote: {
                    url: "<?php echo G5_BBS_URL?>/ajax.id_chk.php",
                    type: "POST",
                },
                specialchar:true
            },
            mb_name: {
                required : true,
            },

        },
        //규칙체크 실패시 출력될 메시지
        messages : {
            mb_id: {
                required : "아이디를 입력해 주세요.",
                remote : "중복된 아이디입니다.",
                specialchar : "회원아이디는 영문자, 숫자, _ 만 입력하세요."
            },
            mb_name: {
                required : "이름을 입력해 주세요.",
            },

        }
    });   

});

대충 이런느낌?
체크박스는 toastr 도 써주고
ajax로 바로바로 중복검사도 해줄수있더라

기본적으로 사용하는 alert문이 식상하거나 디자인을 맘에안들어하는 고객들이 많더라

아이폰에서 사파리로 열면 이상하게 깨지기도하고..

스위트알터나 이것저것 썻지만 성가시고 

toastr 가 그나마 깔끔하면서 모바일 반응형까지 쓰기 좋았다

사용법도 간다했다

js와 css 추가해주고 

자바스크립트로 체크해서

toastr.error("개인정보 수집 및 이용안내를 동의해주세요");

return false;

끝!