개발노예 코드와 일상

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;

끝!

리스트페이지에서 첨부파일을 다운로드하고싶다는 요청이 많다

그동안은 따로 다운로드파일을 만들어서 했는데 

귀찮아서 다른방식을 찾다가 리스트페이지에서 처리하는게 잇길래 써봣다

$sql = " select * from $g5[board_file_table] where bo_table = '". $bo_table. "' and wr_id = '". $list[$i][wr_id] ."' order by bf_no ";
$result = sql_query($sql);
while ($row = sql_fetch_array($result))
{
$down_link = "download.php?bo_table={$bo_table}&wr_id={$list[$i][wr_id]}&no={$row[bf_no]}";
$file_source = addslashes($row[bf_source]);
$file_type = preg_replace('/^.*\.([^.]+)$/D', '$1', $file_source);
$file_size = get_filesize($row[bf_filesize]);

                        echo " ";
                        echo rtrim($list[$i]['icon_file']);
                        echo " ";
                        
}

이미지만 받겠다고 한다. 후..

일단 스킨폴더에 write_update.head.skin.php 추가한다

그리고

//이미지파일만업로드
if ($w =="" || $w =="u"){ 
  for ($i=0; $i<count($_FILES['bf_file']['name']); $i++) {
    if (!preg_match("/\.($config[cf_image_extension])$/i", $_FILES['bf_file']['name'][$i]) && $_FILES['bf_file']['name'][$i]) {
        alert("이미지 화일만 업로드가 가능합니다!");
    } 
  }
}

코드추가

그누보드 기본환경설정에 셋팅된 이미지파일만 업로드받는다.

용량제한은 따로 잇긴한데 그거야 뭐..

function hide_numbers(s){
        var result = "";
        var sLength = s.length;
        
        //첫글자 넣어주고
        result = s.charAt(0);
        for(var i = 1; i < sLength; i++){
            result += i < sLength ? "*" : s.charAt(i);
        }
        return result;
    }

익명으로 닉네임 해달라고해서 찾아봄