IT & Mobile

jQuery의 팝업 기능으로 간단히 이쁜 layer팝업을 만들수 있다.

 - 이걸 모를때는 bootstrap을 사용했었는데, jQuery가 더 편하다.

  (이쁘기는 bootstrap이 더 이쁠 것 같아요)

- 사용법도 간단하다.  REF

1. jquery관련 인클루드

  <script type="text/javascript" src="blabla/js/jquery.popup.min.js"></script>

2. html 팝업코딩

  <div id="popup" class="pop_style">

     blabla

3. jquery로 호출.

  뛰우기:  $('#popup').bPopup();

  close:   $('#popup').bPopup().close();

http://www.nextree.co.kr/p4150/  

REF (ref에는 일반 javascript방식도 포함되어 있어요)

REF - window센터맞추기(dual포함)

팝업 뛰우기:

var witdh = 600;

var height = 400;

var left = (screen.width/2)-(witdh/2);

var top = (screen.height/2)-(height/2);

window.open('url','myTitle',

'top=' + top +',left='+ left +',width=' + width + ',height=' + height +  ',toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes');

크롬에서 size조절이 잘 안될 경우에는 아래 css 추가

<style>

html,body {overflow: hidden;}

</style>

그리고, 듀얼 스크린을 고려한 w/h는 

var w = 600;

var h = 550;

//dual

var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;

    var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;

    var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;

    var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;

    var left = ((width / 2) - (w / 2)) + dualScreenLeft;

    var top = ((height / 2) - (h / 2)) + dualScreenTop;

팝업에서 부모창에 값 전달하기

부모창에서 값 가져오기

사용빈도는 낮지만, 부모창에 존재하는 함수호출

//팝업창 닫기

//부모창 refresh

화면에 존재하는 id가 item_table인 테이블의 자식들을 모두 지우고

순서를 변경해서 모두 다시 add 하는 예제. (가상의 data라는 정보를 이용해서 추가함)

(예쁘게 add하기 위해 colspan을 항상 조정 함.)

이 때, tr은 매번 만들어서 추가하는 방식 임.

테이블은 한 row당 4개의 항목 (th+td가 한항목)까지 max로 들어가므로 총 12개의 colspan을 이용해 추가함.

               var table = $('#item_table');

    var itemsTh = $('#item_table th');

var itemsTd = $('#item_table td');

//remove all

table.children().remove();

var items = []; //sorted MenuItem data

//sort

        for (var i = 1; i <= data.length; i++) { //itemOrd는 1부터 시작.

        for (var j = 0; j < data.length; j++)

        if(data[j].itemOrd == i && data[j].useYn == 'Y') //useYn도 여기서 check필요.

        items.push(data[j]);

        }

        var newTr = $('<tr> </tr>');

        var sumColspan = 0;

        var colspan;

        var tdIdx;

    //items 다시add to tr -> table

        for (var i = 0; i < items.length; i++) {

        //find th/td

        tdIdx = findTdNum(items[i].itemCd, itemsTd);

        //add to tr, td는 colspan setting max 12개 td기준. 

        itemsTh.eq(tdIdx).text(items[i].itemNm);

        sumColspan += 1;

        newTr.append(itemsTh[tdIdx]);

        colspan = getColspan(items[i].itemStep);

        //colspan 조정.(여분 tr을 꽉 채우기) max=12

        var nextColspan = getNextColspan(items.length, i+1, items );

        colspan = adjustColspan(colspan, sumColspan, nextColspan );

        sumColspan += colspan;

        itemsTd.eq(tdIdx).attr('colspan', colspan);

        newTr.append(itemsTd[tdIdx]);

        //tr이 꽉차면 add tr 2 table

        if (sumColspan >= 12) {

        table.append(newTr); //test

        newTr = $('<tr> </tr>');

        sumColspan = 0;

        }

        } //items LOOPS

        if (sumColspan != 0) {

        //마지막 colSpan정리

        var finalColspan = adjustColspan(colspan, sumColspan-colspan, 99);

        itemsTd.eq(tdIdx).attr('colspan', finalColspan); //마지막 colspan재설정.

        table.append(newTr); //마지막 남은 tr add

        }

상식적으로는 itemsTd[0].attr('id') 가 될 것 같은데, 안되고 attr is not a function 오류가 발생한다.

itemsTd는 DOM이라 동작하지 않고,  jquery Object를 가져와야 함.

==> .eq(idx) 이용.

var itemsTd = $('#item_table td');

console.log( itemsTd.eq(0).attr('id') );

jquery를 이용한 ajax 예제입니다.

post 예제: ==> 이 경우 spring에서는 @RequestBody로 바로 받을 수 있음.

    $.ajax({

        url:'./misetStore.do',

        type: 'POST',

        contentType: 'application/json',

        data: JSON.stringify(itemList),    //JSON data를 string으로 넘기기. 

        success:function(data) { 

        alert('저장되었습니다');

        },

        fail:function(data) {

        alert('저장 오류');

        }

});//ajax

  get 메서드 일 경우에는, url만 기입하면 됨.

       url:'./getSubMenu.json?' + 'noMenuUp=' + noMenu,