개발노예 코드와 일상

이번에는 메인에 애니메이션 효과를 주라는요청이있었다

보통 css로 대부분 처리해버렷는데

이번에는 css 만으로는 안될거같아서 javascript로 처리했다

안되는이유는 애니메이션 구성? 떄문이었는데

이미지가 계속줄어들고, 글자가 날라가고, 이게 계속 반복되고

하여튼 쪼금 귀찮았다 사실 많이

그렇게 복잡하진않았고 타이밍이나 순서 맞추는게 일이었다

기본은 

$(".test").delay(100).animate({ }); 이런느낌인데

딜레이와 순서를 위해서 

일단 순서 구성을짜고

$(".test").delay(100).animate({
        
        opacity:'1'

    },1000,function(){

            다음 애니메이션들 -

    };

});

이렇게 처음 animate 안에 코드를 넣고 그안에 또 넣고 이런식으로 했다

그리고 반복해야되니까

function _start(){} 으로 함수로만들어줬고

화면크기나 셋인터벌이나 이런 조건에따라 함수를 호출하도록 마지막 마무리

게시판이외에 따로 페이지생성시에

체크박스를 체크하는기능을 사용하고있었는데

이제 리스트 하단부에 선택수정과 삭제등등 옵션을추가하면서

내가 몇개를 체크했는지와 하단에서도 전체체크를 추가하면서 약간 스크립트를 추가했다

별건아닌데 체크한 숫자가 눈에보이니까 좀 편한거같기도하고 쓸데없는거같기도하고

$('[name="chk[]"]').on('click',function(){ var $this = $(this), $number = $(".number").val(); var tmp; if($this.is(':checked')){ $tmp = parseInt($number)+1; }else{ $tmp = parseInt($number)-1; if(tmp<0){ $tmp = 0; } } $('.number').val($tmp); }) // 모두선택 $('#chkall').on('click', function() { var $this = $(this), $that = $this.closest('table').find('tr[data-bunch]'), check = $('[name="db_id[]"]:enabled'); check.prop('checked', $this.is(':checked') ? true : false); if ($this.is(':checked')) { $that.addClass('checked'); //선택된갯수추가 $(".number").val($that.length); } else { $that.removeClass('checked'); $('[data-proto]').val(function() { return $(this).data('proto') }); //선택된갯수추가 $(".number").val('0'); } });

엥 스크립트가 한줄로들어가보리네

html 관련은 뭐 input 쪽 네임정도와 클래스만 보고 따로 추가하면 될거같다

인원수가증가하거나
입력값이 불특정하게 증감할수있을시
추가삭제버튼으로 배열로 넘기기도한다
상당히 귀찮은 작업이고 db도 배열로 넣고해야되서 귀찮..

일단은 javascript 로 클론처리해서 넣는데
가끔 클릭작동이나 배열안넘어갈때 동적 컨텐츠? 그 체크도 해주고 삭제할때도 인덱스 체크도해주고..
여튼 스크립트는 이런식이다

parent로 상위 골라서 마지막 부분에추가. 삭제버튼활성화
맨처음은 삭제버튼 비활성화

추가버튼은 맨첫번째에만 넣어뒀다 아래로 차곡차곡 추가되는방식

// 항목추가 버튼 클릭시
$(".add_btn").click(function(){
var clickedRow = $(this).parent();
var cls = clickedRow.attr("class");

// tr 복사해서 마지막에 추가
var newrow = clickedRow.clone();
newrow.find("li:eq(0)").remove();
newrow.find('input').val('');
newrow.find('.del_btn').removeClass('d-none');
newrow.find('.add_btn').addClass('d-none');
newrow.insertAfter($(".ap_con ."+cls+":last"));

});

// 삭제버튼 클릭시
$(document).on('click','.del_btn',function(){

var clickedRow = $(this).parent();
var cls = clickedRow.attr("class");

// 각 항목의 첫번째 row를 삭제한 경우 다음 row에 td 하나를 추가해 준다.
if( clickedRow.find("li:eq(0)").attr("rowspan") ){
    return false;
}

clickedRow.remove();

resizeRowspan(cls);

});

기본적인 홈페이지 콘텐츠중

메뉴 버튼 누를시 관련된 내용이 같은장소에서 내용만바뀌게 하는 것들이 종종있다.

다양한방법이있겠지만

내가 가장 자주쓰는 방법을 적어논다.

<ul>
  <li class="sw_li on" data-type="0"><a href="#" class="color_gray font_16" onclick="return false;">1</a></li>
  <li class="sw_li" data-type="1"><a href="#" class="color_gray font_16" onclick="return false;">2</a></li>
  <li class="sw_li" data-type="2"><a href="#" class="color_gray font_16" onclick="return false;">3</a></li>
  <li class="sw_li last" data-type="3"><a href="#" class="color_gray font_16" onclick="return false;">4</a></li>
</ul>

        <?php
        for($t=0;$t<4;$t++){
        ?>
        <div class="sw_con sw_con_<?php echo $t?>">
            <?php echo $t?>
        </div>    
        <?
        }
        ?>

  $(".sw_li").click(function(){
    $('.sw_li').removeClass('on');
    $(this).addClass('on');
    $(".sw_con").hide();
    var type =$(this).data('type');
    $(".sw_con_"+type).fadeIn();
    return false;
});

탭있고 ~ 컨텐츠부분은 for문 돌려서 내용 넣어줄꺼고 
스크립트는 type 속성으로 열고닫고~

:hover = 마우스 오버했을시 javscript보다 자연스럽고 편함 , 

:after = 안에 내용물을 float시켰을때 따로 높이값 안주고 구간잡을때

- ex) .list_wrap:after { display:block; visibility:hidden; clear:both; content:"" }

animation  => 애니메이션, 간단한 애니메이션 작업해줄때사용 (복잡해지면 부자연스러움)

.box {animation:animate_background 3s linear;}

@keyframes animate_background {

 0% {margin-top:0px}

 100% {margin-top:0}

}

:focus, :active = > 보통 a링크 클릭할때, 활성화되있을때

a:focus, a:active {color:#fff}

:first-child, :last-child => 순서에따른 하위 자식 스타일, ( 브라우저 버전타는경우도있는듯 )

날짜 인풋칸에 간단하게 적용한다

일단 datepicker 플러그인 넣어주시고

$('.start_time').datepicker({
dateFormat: "yy-mm-dd",
showButtonPanel: true,
onClose: function( selectedDate ) {
var event = arguments.callee.caller.caller.arguments[0];
if ($(event.delegateTarget).hasClass('ui-datepicker-close')) {
$(this).val('');
selectedDate = '';
}

        $('.start_time').val(selectedDate);
    }
});

기본적으로 자주 사용하는 쿼리문
계속 복사해서 사용하다보니 기억이잘안날때가있네

sql 쿼리문은 정말 활용도가 무궁무진하다.. 이중쿼리도있고 if문도 써버리고

근 2년이 다되가는데 아직도 새로운 코드들이 많으니 갈길이멀다

        <?php  
        $sql = " select 테이블명 where (1) ";  
        $result = sql_query($sql);  

        for ($i=0; $row2=sql\_fetch\_array($result); $i++) {  
            $ah\_chk = '2';  
        ?>  
        -- 반복할 코드
        <?  
        } 
        ?>

input 의 합계를 구해달라고해서 작업하는데

name 값을 name = "sum[]" 이런식으로 배열화해서 넘겼었는데

스크립트로도 합이 필요해서 구했다

$(document).ready(function() {
var list = new Array();
$("input[name=sum]").each(function(index, item){
list.push($(item).val());
});
alert(list);
});

반복문 돌려서 네임 인덱스로 합산하는 구조