jQuery 유용한 팁(이라고 생각하는데...) in PHP

뉴 바둑 서포트 작업하면서 새롭게 공부한 jQuery.
왜냐믕 jQuery UI가 너무 맘에 들어서 싹다 뜯어고치기에 도전하였기 때문에.


jQuery UI의 모든 기능을 이용하진 않고 필요하다 싶은 것들만 뽑아서 사용하였다.
왜냐하면 모두 하기엔 배울 시간도 없고 딱히 필요할 것같은 기능이 아니라는 생각에..^^;;
따라서, 직관적으로 필요하다고 생각하는 기능만 배우고 적용하였다.


Themes 는 blitzer 였으며 버전은 1.8.16 으로 하였다.
사용한 기능들.

• Button
• Datepicker
• Dialog
• Tabs

위의 기능들을 사용하기 위해서는 jQueryui.com 사이트에서
jquery-1.6.2.js 파일과 jquery-ui-1.8.16.custom.js 파일 및 css 파일과 이미지들이 있는 파일을 다운받아야 함!

간단한 Tips :)


1. 아이디의 VALUE값 가져오기 : $("#input_id").val();
jQuery 를 쓰면서 가장 편했던 점은 페이지 내의 id로 값을 쉽게 가져올 수 있다는 점이었다.
main 페이지에 있는 input box의 값을 $("#input_id").val(); 하여
페이지 내의 어떤 페이지에서도 공통으로 들어가는 그 값을 손쉽게 이용할 수 있다.
(#는 아이디 .은 클래스 그외 태그명은 그대로 사용 (ex. $("a").addClass("ui-a-class") => 모든 태그 a에 클래스 추가)


2. 라디오버튼의 CHECK된 VALUE값 가져오기 : $("input:radio:checked").val();
항!상! 검색하게 만든 radio 체크값 가져오기..ㅠ_ㅠ 이노무자식은 도저히 외워지지 않는다..ㅋㅋ
위의 방법은 모든 radio 버튼 중에 checked 된 값을 가져오는 방법이고
radio buttonset이 있을 경우에는 따로 name을 지정하여 checked 값을 가져온다.

- $("input[name=btn_radio]:checked").val();
- if($("#radio").attr("checked") == "checked")
radio_checked = $("#radio).val();


이 방법은 check box에도 유효하다 :) ... 맞겠지?-_-;;

3. VALUE값의 길이 가져오기 : $("#string").val().length;
뭐 이런것도 가능.


4. 클래스 TOGGLE하기 : $(this).find("#lbl_toggle").toggleClass("ui-first", "ui-second");
이벤트가 발생한 곳에서 #lbl_toggle 아이디를 가진 태그에 클래스를 toggle 한다.
기존에 ui-first라는 class가 들어가있을 경우 해당 클래스가 remove 되고 ui-second 라는 class가 add 된다.
(toggleClass 대신 addClass, removeClass 사용하여도 무관.)


5. DIV를 TOGGLE 하기 : $("#div_toggle").toggle();
div를 display하거나 display:none 하는 함수이다. 초초초 간단 :)
toggle("blind", "slow"); 속성을 줄 경우 약간의 애니메이션이 들어가는건 간단한 팁 :3


6. SELECT에 주어진 값으로 SELECT하기 : $("#select option:[value='select_value']").attr("selected", "selected")
페이지를 갱신할 때 <select> 태그의 값을 갱신 후에도 갖고 싶을 경우 쓰는 태그
물론 select_value를 잘 넘겨주어야 함. :)
select는 check box 나 radio button 과는 달리 selected 임.
$(document).ready(function () {}); 안에 두면 된다.


7. CHECKBOX에 주어진 값으로 CHECKED하기 : ($("input:radio[value='select_value']").attr("checked", "checked");
위의 함수와 비슷하게 이건 radio 버튼의 체크값으로 체크를 유지하는 방법.


8. TABLE에 스타일 주기 (행) : $("#tbl_table tbody tr:odd").addClass("ui-class");
테이블의 tr의 홀수줄(또는 짝수줄 tr:even)에 스타일을 줄 수 있다.
기본적으로 배경색을 바꿔서 데이터 식별을 좀 더 쉽게 할 수 있음 ^^
td:odd 를 해보니 바둑판이 나왔다 'ㅅ'!ㅋㅋ
:nth-child(index/even/odd/equation) 요런것도 유용!


9. CHECK BOX ALL CHECK / ALL UNCHECK : 
$("input[name*=chk]").attr("checked", $(".chk_all").is(":checked"));
모두선택 체크박스에 대한 함수
 $(".chk_all").click(function () {
        $("input[name*=chk]").attr("checked", $(".chk_all").is(":checked"));
      });
chk_all이라는 클래스를 가진 object를 클릭할 때에 chk라는 단어가 들어간 모든 input box의 checked의 속성을 chk_all의 checked의 속성과 같게 해준다.
.is(":checked") 는 true, false 반환. :)

[name~="value"] : 단어 포함 조건 ( 연결된 문자열은 패스 (ex: [name~="man"]의 경우 gentleman (x) the man (o) )
[name*="value"] : 단어 포함 조건 ( 연결된 문자열도 ok )
[name!="value"] : 해당 단어가 아닌 조건
[name^="value"] : 해당 단어로 시작
[name$="value"] : 해당 단어로 끝남

※ Tip.
전체 선택된 상태에서 리스트중 하나라도 uncheck 할 경우, 모두선택 체크박스를 uncheck 해주는 기능
//chk로 시작하는 check box를 클릭할 경우
$("input[name*=chk]").click(function () {
        //클릭한 check box의 checked 가 false이고 .chk_all이 checked 된 경우에
        if($(".chk_all").attr("checked") == "checked" && this.checked == false)
        {
          $(".chk_all").attr("checked", false);
        }
      });


10. Indicator 넣는 방법 : $("#indicator").show() and .hide();
div 에 indicator 를 포함하는 이미지를 넣고 페이지 로딩전후에 show와 hide를 해준다.
//처음에는 보이지 않도록 display:none 속성을 줌, indicator 이미지는 googling 합시당.ㅋ
<div id="indicator" class="indicator" align="center" style="height:300px;display:none;">
    <img src="../images/loading_indicator.gif" />
 </div>
     

$("#indicator").show();
$("#loding").hide(); //로딩중인 div 혹은 table
$.get("../loding.php", { data: data },
function (data) {
$("#body_loding").html(data); //loding을 포함하는 div
});
//새로 덮어 쓰므로 따로 show, hide 하지 않았으나, 그 외의 경우에는 indicator를 hide, loding을 show 해주겠긔..

11. CHECK BOX의 값들을 ARRAY로 받아오기 :
$("input:checkbox:checked").map( function () { return $(this).val(); }).get();
all check 하거나 여러개를 체크할 경우 그 check box들의 value값을 가져오는 것도 일이었다 ㅠ_ㅠ
하지만 jquery는 친절하게도 .map()함수를 이용하여 다 보내준다;ㅁ; 짱이얌 :)


var checkedList = $("input:checkbox:checked").map( function () {
          return $(this).val();
        }).get();
위와 같이 데이터를 받아와서 checkedList를 get으로 넘겨주면 php 에서는 array로 인식한다 :)


< 번외. php용 Tip.>
1. 한글 문자열을 한글자 씩 배열로 내보내기 (str_split)
 function str_split($str) {
      preg_match_all('/[\x20-\x7E]|.{2}/', $str, $m);
      return $m[0]?$m[0]:array();
    }
2. object를 key 값으로 정렬하여 array로 내보내기
 function sortArrayObjectsByKey($array, $key, $asc = true)
 {
      $result = array();
      $values = array();

      foreach ($array as $id => $value)
      {
           //-> 이걸 [" "] 이걸로 바꿔주면 array to array도 가능염!
           $values[$id] = isset($value->$key) ? $value->$key : '';
      }

      if ($asc)
        asort($values);
      else
        arsort($values);

      foreach ($values as $key => $value)
      {
        $result[$key] = $array[$key];
      }
      return $result;
 }

< Jquery UI 사용 >

Tab은 div 안에 링크된 페이지를 열어준다.


$("#tabs").tabs(); //tab 적용방법
<div id="tabs">

<ul>

<li><a href='a.php'>a</a></li>
<li><a href='b.php'>b</a></li>
<li><a href='c.php'>c</a></li>

</ul>

</div>

탭의 위치는 상단, 하단 모두 가능하며 새 탭을 생성할 수 있기도 한다.
(나는 다 필요없어서 고정적인 상단탭만 사용-_-;)


※ Tip.
$( "#tabs" ).tabs({
ajaxOptions: {

error: function( xhr, status, index, anchor ) {

$( anchor.hash ).html(
"페이지 로드에 실패하였습니다." );

}

}

페이지가 늦게 열리거나 제대로 열리지 않는 경우 에러 메세지를 보낼 수 있다.

button에서 Buttonset은 일련의 버튼들을 하나의 set으로 모아준다.


아래와 같이 라디오 버튼들을 name으로 모아서 각각의 id를 준 후 label 의 for 속성에 id값을 일치시켜 텍스트를 입력한다. (그렇지 않을 경우 아무런 텍스트가 나오지 않는다.)


$("#select_tabl").buttonset();


<div id="select_tab">

<input type="radio" id="i" name="log" value=""i /><label for="i">info</label>
<input type="radio" id="m" name="og" value="m" /><label for="m">money</label>
<input type="radio" id="r" name="log" value="r" /><label for="r">refill</label>

</div>
(물론 아이디를 위의 방식으로 주지 않았다-_-;)

• 버튼에 icon 주는 방법.
  icons의 속성에는 primary와 secondary 가 있다. text속성을 삭제하면 icon만 나올 수 있다.
  (아래 아이콘 style은 다운로드한 css에 있다)
  next()는 연속된 objcet를 찾을 때!. (아마두 :p)
   $("#a_button a").button({
            icons: { primary: "ui-icon-search" }
          }).next().button({
            icons: { primary: "ui-icon-person" }
        });
  

Datepicker는 날짜를 선택하게 해주며 inline, calendar box 둘다 가능 :)
기본 세팅은 영어인데, 한글로 바꿔주려면 일일히 설정해줘야했다!! ㅋㅋ 몰라서 한참 헤멨음 T_T

• 한국 달력 초기화
  function datepicker_init()
  {
    $.datepicker.regional['ko']= {
     closeText:'닫기',
     prevText:'이전달',
     nextText:'다음달',
     currentText:'오늘',
     monthNames:['1월(JAN)','2월(FEB)','3월(MAR)','4월(APR)','5월(MAY)','6월(JUM)','7월(JUL)','8월(AUG)','9월(SEP)','10월(OCT)','11월(NOV)','12월(DEC)'],
     monthNamesShort:['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
     dayNames:['일','월','화','수','목','금','토'],
     dayNamesShort:['일','월','화','수','목','금','토'],
     dayNamesMin:['일','월','화','수','목','금','토'],
     weekHeader:'Wk',
     dateFormat:'yy-mm-dd',
     firstDay:0,
     isRTL:false,
     showMonthAfterYear:true,
     yearSuffix:''
    };
    $.datepicker.setDefaults($.datepicker.regional['ko']);
  }
  
  위와같이 설정해주고 datepicker를 만들기 전에 한번 불러주면 땡 :3
  datepicker_init();
  $("#datepicker").datepicker({
            bottonText: "달력",
            changeMonth: true,
            changeYear: true,
            autoSize: true,
            showButtonPanel: true
  });
  
  
  <input type="text" id="datepicker" name="datepicker" value="<?=$select_date?>" />
  
  
  
  

Dialog는 입력 form을 넣어주거나 alert을 만들때 사용하였다.
여기저기 사용해보고 싶었지만..ㅠ 실력이 딸린 관계로.
(개인적으론 shadow, overlay class를 하고싶었으나.. )

• Alert 대용
  function showAlert(msg, title)
  {
    if(title == undefined) title = "Notice";
    //이렇게 안하고 div를 페이지에 만들어두어도 된다. 일일히 만들기 귀찮아서 함수에 넣어버림.
    $("<div id='common_alert' title='"+title+"'>"+msg+"</div>").dialog(
    {
      modal: true,
      buttons: {
        Ok: function ()
        {
          $(this).dialog("close");
        }
      }
    });
  }
• 입력 form용
  입력 form을 만들기 위해선 선작업이 좀 많았다 -_- 거의 긁어다가 붙여넣는 수준이긴 했지만..
  //일단 form에 들어갈 object들을 정의한다.
   var chgField = $("#chgField"),
        chgReason = $("#chgReason"),
         allFields = $([]).add(chgField).add(chgReason); //object들을 array 로 저장
  //입력 form dialog 를 초기화한다.
   $( "#dialog_edit" ).dialog({
              autoOpen: false,
              height: 300,
              width: 350,
              modal: true,
              buttons: {
                "수정": function() {
                  var bValid = true;
                  allFields.removeClass( "ui-state-error" ); //새로 열 경우 적용된 error 관련 클래스 삭제
  

    bValid = bValid && checkLength( chgField, "변경값", 1, 20 ); 
    bValid = bValid && checkLength( chgReason, "변경이유", 1, 400 );
    if ( bValid ) {
       doChgInfoSubmit( chgField.val(), chgReason.val() );
       $( this ).dialog( "close" );
       } 
    },
  "닫기": function() {
       $( this ).dialog( "close" );
       }
    },
  close: function() {
       allFields.val( "" ).removeClass( "ui-state-error" );
    }
});

            //dialog 부르기

 $(".edit").click( function () {
          //edit라는 class를 가진 objcect 를 click 할경우 id, name, text값들을 가져와서 form에 부르도록 한다.
          var title2 = $(this).attr("id");
          var title = $(this).attr("name");

          var titleval = $(this).text();

 

          $("#dialog_edit").dialog("option", "title", "정보 변경("+title+": "+titleval+")");
          $("#dialog_edit").dialog("open");
        });
//관련 함수
function checkLength( obj, text, min, max )
{
  if(obj.val().length > max || obj.val().length < min)
  {
    obj.addClass( "ui-state-error");
    updateTips( text + "을 입력해주세요" );
    return false;
  }
  else
    return true;
}
function updateTips( text )
{
  var tips = $(".validateTips");
  tips.text( text )
      .addClass( "ui-state-highlight" );
  setTimeout(function () {
      tips.removeClass( "ui-state-highlight", 1200);
    }, 500); //정해진 해당 클래스가 적용된 후 사라진다.
}

//관련 div는 html에 따로 만들어준다.

<div id="dialog_edit_userinfo" title="정보 변경">
    <p class="validateTips">변경하고자 하는 값과 변경사유를 넣어주세요</p>
    <form id="form_edit_userinfo">
        <fieldset class="dial_field">
            <label for="chgField" class="txt_lbl" >변경값</label>
            <input type="text" name="chgField" id="chgField" class="text ui-widget-content ui-corner-all txt_lbl input_txt" />
             <label for="chgReason" class="txt_lbl">변경사유</label>
             <input type="text" name="chgReason" id="chgReason" value="" class="text ui-widget-content ui-corner-all txt_lbl input_txt" />
       </fieldset>
    </form>
</div>