jquery block UI 사용 예제

1. <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" src="js/jquery.blockUI.js"></script>
2. <script>

3. function block()

4. {

5. $.blockUI({message:$("#block_layer"),fadeIn:false});

6. }

7. functino unblock()

8. {

9.      $.unblockUI({fadeOut:false});

10. }

11.  </script>
12.  
13. <div id="block_layer">
14.     <div>download</div>
15. </div>

 

이 글은 스프링노트에서 작성되었습니다.

jquery opener 컨트롤

팝업창에서 부모창에 값 셋팅하기.
$(opener.document).find('#id_of_dom_element')

$(opener.document).find(':radio').each( function(){
    if( $(this).val() == "2" ) $(this).attr('checked', 'checked');
});

[jquery] table row 삭제

<table>
    <tr id="_tr1">
         <td>test</td>
    </tr>
</table>

<script language='javascript'>
    $("#_tr1").remove()
</script>

remove() 를 사용해서 삭제 할 수 있음

$("table").each( function(){
   // 로직
});
을 사용해서 삭제 하는것도 가능

//==================================================
<tr onClick='javascript:del(this)'>
일 경우라면
$(this).remove() 또는 $(this).get().remove()가 가능할 것 같음
 

[jquery] jquery context를 사용한 select box 관련 정리

select box의 내용 가져오기
$("#select_box > option:selected").val();

select box의 값 설정
 $("#select_box > option[@value=지정값]").attr("selected", "true")

[jquery] select box의 선택값 출력

<select id="cnt_type">
    <option value=1>1</option>
</select>



<script>
/////////////////////////////////////////
// case 1: 노가다
$("#cnt_type")
            .find("option[@selected]")
            .each(
            function(){
                alert ( this.value );
        })

/////////////////////////////////////////
// case 2: jQuery context 사용
alert ( $("#cnt_type > option:selected").val() );
</script>

[jquery] input을 위한 parameter만들어 주기

//  사용
 params = build_params( "#mail_menu .search_form", params );

                $.get("xxx.htm",  params,  
                        function(data){    
                              alert ( data )
                        }
                );


  //===================================
  // 전송해야할 form의 내용 만들어 줌
  // date: 2007.10.1
  function build_params( obj , params)
  {
        // params가 없을 경우
        if ( !params )
                var params = {};

        // input 값을 검색해서 입력
        // parameter list
        //
        $( obj )
                .find("input[@type=text],option[@selected],input[@type='hidden']")
                .each( function() {
                        params[this.name || this.parentNode.name || this.id] = this.value
                        
                } )

        return params;
  }

[Ajax] file을 그냥 call을 하면 한글때문에 절단 난다, reader를 사용해서 파일을 읽어야 함

<?
header("Content-type: text/html; charset=euc-kr");

switch ($type)
{
    case "menu":
        $file = "menu.htm";
        break;

    default :
        $file = $template . ".htm";
        break;
}

$master_code = substr( $template, 0,1 );
$_location = "${master_code}/" . $file;

// is exist check 없넹~~귀챦아~

readfile($_location);
?>

[jQuery] timer sample

Usage:

$.timer.start();
// some code
$.timer.mark('optional label');
// some code
$.timer.pause();
// some code to exclude from profiling
$.timer.resume();
// some code
$.timer.mark();
// some code
$.timer.show('optional label'); // displays a list of all marks to this point in an alert pop-up

The code:

// usage: $.debug({x:x, y:y, z:z})
$.debug = function(o) {
    var s = [];
    for (var name in o)
        s.push(name + ': ' + o[name])
    alert(s.join('\n'));
}

$.timer = {
    start: function() {
        this.info = {};
        this.count = 0;
        this.pauseTime = 0;
        this.time = new Date().getTime();
    },
    mark: function(s) {
        var t = ((this.pauseTime == 0) ? new Date().getTime() : this.pauseTime) - this.time;
        this.count++;
        if (s == undefined) s = 'mark ' + this.count;
        this.info[s] = '' + t + ' ms (' + (t/1000) + ' s)';
        this.time = new Date().getTime();
        if (this.pauseTime != 0) this.pauseTime = this.time;
    },
    pause: function() {
        if (this.pauseTime == 0)
            this.pauseTime = new Date().getTime();
    },
    resume: function() {
        if (this.pauseTime != 0)
            this.time += new Date().getTime() - this.pauseTime;
        this.pauseTime = 0;
    },
    show: function(s) {
        this.mark(s);
        $.debug( this.info);
    }
}

[jQuery] checkbox선택 하기

<html>
<head><title>pimz dashboard</title></head>
<script src="js/jquery-1.1.3.1.js" type="text/javascript"></script>
<script src="js/corners.js" type="text/javascript"></script>
<script src="js/jquery.easydrag.js" type="text/javascript"></script>
<script type="text/JavaScript">

 
  $(document).ready(function(){
 $("a.link1").click ( bind_click2 );
  });

str = "<ul><ul><li>test</li></ul><ul><li>aaa</li></ul></ul>";

  function bind_click2()
  {
 
 a = $("ul", str).get(1);

 $("ul", str).each( function(){
  // alert ( $(this).html() );
  })

 //===========================================
 // checkbox 선택..
 // 항복 체크
 i = 0; // 문제 번호
 j = 1; // 항목 번호
 $("#test ul")
  .eq( i )
  .find("input[@type=checkbox]")
  .eq( j )
  .attr("checked", "true");
 

  }
</script>

<body>
Parameter passing test

<table border="1">
 <tr>
  <td><a href="#" class="link1" key="11111" value="haha">test1</a></td>
 </tr>
 <tr>
  <td><a href="#" class="link1" key="22222" value="hoho">test2</a></td>
 </tr>
</table>
<div id="test">
문 1
<ul>
 <li><input type="checkbox">haha 1</li>
 <li><input type="checkbox">haha 2</li>
 <li><input type="checkbox">haha 3</li>
</ul>
문 2
<ul>
 <li><input type="checkbox">haha 1</li>
 <li><input type="checkbox">haha 2</li>
 <li><input type="checkbox">haha 3</li>
</ul>

</div>
</body>
</html>

jQuery Context

다음에서 E,F,G는 HTML의 태그에 해당합니다. 예) DIV, P, SPAN

* - 모든 태그
E - 모든 E
E:nth-child(n) - E의 n번째 자식
E:first-child  - E의 첫번째 자식
E:last-child - E의 마지막 자식
E:only-child - ?
E:empty - 자식이없는 E
E:enabled - 활성화된 E (예- 활성화된 텍스트에어리어)
E:disabled - 비활성화된 E (예- 비활성화된 인풋박스)
E:checked - 체크된 E(예- 라디오버튼, 체크박스)
E:selected - selected속성 활성화된 E(선택된 OPTION )
E.warning - class속성이 warning인 E
E#myid - id속성이 myid인 E
E:not(s) - s셀렉터와 맞지않는 E
E F - E의 자손인 F
E > F - E의 자식인 F
E + F - E 바로뒤의 F
E ~ F - E가 선행되는 F
E,F,G - 모든 E,F,G,


E[@foo]  - foo속성이 있는 E
E[@foo=bar] - foo속성이 bar인 E
E[@foo^=bar] - foo속성이 bar로 시작하는 E
E[@foo$=bar] - foo속성이 bar로 끝나는 E
E[@foo*=bar] - foo속성에 bar가 포함되는 E

[jQuery] 가져온 xml data의 control이 필요함

date: 2007.8.22

XSLT와 XML을 사용해 사이트 개발 중

XSLT구현에서도 몇 가지 문제점이 있음.
jQuery를 사용해 xsl과 xml을 가져옴 google에서 배포한 ajaxslt를 사용해 특정 div에 결과값을 출력 함
=> 여기까지는 전혀 문제 없음

가져온 xml 데이터를 looping하고 결과를 바꿔주려 함, Client에서 해당 값을 변경함으로써 Server로부터 값을 가져오는데 따른 overhead를 방지 할 수 있음.