개발노예 코드와 일상

코드저장..

검색페이지를 만드는데

이번에는 주로하던 php 페이지가 아니라 java로 제작페이지여서

javascript로 검색결과에 검색어 표시를 해줘야했다

결과적으로는 크게 복잡하지않았다

search_filter();
function search_filter(){
var search = $('#searchKeyWord').val();
var sf_cnt = 0;
$(".sc_td").each(function () {
var regex = new RegExp(search,'gi');

    $(this).html( $(this).text().replace(regex, "<span class='text-danger bold'>"+search+"</span>") );

    sf_cnt = sf_cnt+1;
});

};

replace 함수를 사용하고있고
해당 구역에서 키워드 텍스트를 찾아서 span으로 한번 둘러싸주는 형식

순조롭게 적용되서 굳이었다

이미지 확대기능을 추가해달라는 요청이다

오픈된 코드가 많아서 작업은 어렵지않았다

javacsript 코드와 css 정도만 추가해주면 된다

이미지 해상도가 약간 영향을 미치긴하겠지만 크게 차이는없는듯?

일단 코드는

var target = $('.target');
//1
var zoom = target.data('zoom');

$(".target_wrap")
.on('mousemove', magnify)
.prepend("

var magnifier = $('.magnifier');

function magnify(e) {

// 마우스 위치에서 .magnify의 위치를 차감해 컨테이너에 대한 마우스 좌표를 얻는다.
var mouseX = e.pageX - $(this).offset().left;
var mouseY = e.pageY - $(this).offset().top;

// 컨테이너 밖으로 마우스가 벗어나면 돋보기를 없앤다.
if (mouseX < $(this).width() && mouseY < $(this).height() && mouseX > 0 && mouseY > 0) {
    magnifier.fadeIn(100);
} else {
    magnifier.fadeOut(100);
}

//돋보기가 존재할 때
if (magnifier.is(":visible")) {

    // 3
    var rx = -(mouseX * zoom - magnifier.width() /2 );
    var ry = -(mouseY * zoom - magnifier.height() /2 );

    //돋보기를 마우스 위치에 따라 움직인다.
    //돋보기의 width, height 절반을 마우스 좌표에서 차감해 마우스와 돋보기 위치를 일치시킨다.
    var px = mouseX - magnifier.width() / 2;
    var py = mouseY - magnifier.height() / 2;

    //적용
    magnifier.css({
        left: px,
        top: py,
        backgroundPosition: rx + "px " + ry + "px"
    });
}

}

//

-- css

/* 감싸는 div /
.target_wrap { position: relative; margin: 0 auto; width: 100%;}
/ 확대될 타겟이미지/
.target { display: block; width: 100%;}
/ 돋보기 */
.magnifier { width: 300px; height: 300px; position: absolute; border-radius: 100%; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 0 3px 3px rgba(0, 0, 0, 0.25); display: none; z-index: 10000;}

오랜만에 코드 글을쓴다

작업중에 애니메이션 요청이들어왔는데

숫자를 0~ ** 까지 올라가는 내용이었다

한두개면 그냥 수동으로 할텐데

수가 꽤 많아서 함수로 해두고 클래스명 통일해서 한번에 넣어버렸다

//스크롤 했을때 숫자 애니메이션이 동작하도록, 1회만 동작
//함수화 , 기능수정
var _once = 1;

    $(window).scroll( function(){
        var na_div = $(".now_wrap ").offset().top + 500;
        var _window = $(window).scrollTop() + $(window).height();


        if(na_div < _window && _once == 1){
            number_animation();

            _once = 2;
        }

    })

    function number_animation(){
        //숫자애니메이션
        $(".number_animation").each(function(index, element){
            var $this = $(this),
                goal_cnt = $this.text();

            $({ val : 0 }).animate({ val : goal_cnt }, {
                duration: 1000,
                step: function() {
                    var num = numberWithCommas(Math.floor(this.val));
                    $this.text(num);

                },
                complete: function() {
                    var num = numberWithCommas(Math.floor(this.val));
                    $this.text(num);
                }
            });
        })
    }
    function numberWithCommas(x) { //숫자콤마로 출력
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }  

    어우 줄바꿈 하기는 귀찮네
    일단 코드는 이렇게 되어있다

    목표 숫자를 일단 초기로 적어둔다

    .number_animation 으로 클래스를 통일해서 해당 div의 text값으로다가 목표로 해서 애니메이션을주었고


    이게 하다보니까 로드 하고 화면위치에 상관없이 애니메이션이 시작되서

    스크롤 내리면 밑에꺼는 끝나있더라
    그래서 .now_wrap 이라고 다시 감싸주고

    화면위치랑 해당 클래스 위치랑 비교해서 함수 실행하도록 설정했다

홈페이지 제작중

서브메뉴나 레이어를 화면 꽉차게 띄웠는데

안에 내용이 넘어가서 스크롤이되는경우

본 페이지와 중복되어 브라우저 스크롤이 두개이상으로 나오는 경우가있다

몹시 보기싫은 경우인데

이번에 css로 간단하게 수정해서 적어본다

일단 본페이지 스크롤은 html,body 로 적용되고있다

그래서 html,body에 height:100%와 overflow hidden을 주어서 본 스크롤을 없애고

위에 띄우는 레이어의 스크롤만 남기는 방식이다

자바스크립트나 제이쿼리로는

오픈할때 스타일 주고

닫을때 스타일 빼는 작업을 해주면 완성.

코딩할때 javascript나 jquery 에서 여러가지 슬라이더를 사용한다

자주 사용하는 스위퍼 슬라이더는 

옵션 자체에 반응형을 지원해서

간편하게 사용하고는한다

일단 js 파일들을 추가한다 css도 추가하던가

swiper.min.css

swiper.min.js

공홈이나 여러군데 돌아다니는걸로 다운받아서 선언해주고 

var swiper1 = new Swiper('#main-visual', {    
            //pagination: {
            //el: '.swiper-pagination',
            //    clickable: true,
            //    renderBullet: function (index, className) {
            //    return '<span class="' + className + '">' + (menu[index]) + '</span>';
            //    }
            //},
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            spaceBetween: 0, //30
            loop: true,
            autoHeight : true,
            autoplay: {
                delay:5000,
                disableOnInteraction: true
            },
        });

이렇게 기본형태로 사용하고있다

반응형 옵션이 필요할때는

breakpoints: { 

  320: { slidesPerView: 2, spaceBetween: 20 },

  640: { slidesPerView: 4, spaceBetween: 40 }

}

이렇게 옵션을 추가해준다

키오스크나 대형스크린 프로그램 작업시

키보드를 띄워서 입력받는 경우가 종종있다

기존에 사용하던 키보드를 사용해서 작업을 했지만~?

휴대폰 번호를 입력받아야해서

숫자만 띄워달라고 한다

후움

css로 억지로 조정하면 되기야하겠지만

그게더 귀찮을거같기도하고

혹시몰라 찾아보니 숫자용이 따로있더라

numberKeypad.js

이 플러그인을 사용해서 처리했다

css파일도 있고 두개를 추가한후에

//숫자 키보드 따로생성
$('.number_keyboard').numberKeypad({
wrap: '.number_input'
});

//스타일조정
$('.number_keyboard').on('click',function(){
$(".keypad").addClass('d-block');
});

//숫자키보드 닫기기능추가
$('.keypad .back, .keypad .ok, .back_bg').on('click',function(){
$(".keypad").removeClass('d-block');
});

열고닫고 기능 추가한다음에 끝

사용법은 간단하더라

요즘 바빠죽겠다

연말이라 그런가 전화가 쏟아지고 수정사항에 추가사항에

다들 보고서 요청도있고

머리가아프네

일단 시청시간을 초로 db에 받아놨는데

시분초로 계산해서 출력해달라는 요청이있었다

이게 그냥 처리할랫더니 여간 귀찮은게 아니어서

뒤적거리다 함수하나 괜찮아서

적어놔본다

//시간구하기
if ( ! function_exists('get_time_array')) {
function get_time_array($time)
{
global $g5, $pk;
$return = '';

    //시분초로변환
    $full_sec = floor($time);
    $hour = floor($full_sec / 60 / 60) % 24;
    $min = floor($full_sec / 60) % 60;
    $sec = floor($full_sec % 60);

    //array_push($time_arr,$hour);
    //array_push($time_arr,$min);
    //array_push($time_arr,$sec);
    //$return = $time_arr;

    $return = $hour.'시'.$min.'분'.$sec.'초';
    return $return;
}

}

인원수가증가하거나
입력값이 불특정하게 증감할수있을시
추가삭제버튼으로 배열로 넘기기도한다
상당히 귀찮은 작업이고 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);

});