List

레이블이 jquery인 게시물을 표시합니다. 모든 게시물 표시
레이블이 jquery인 게시물을 표시합니다. 모든 게시물 표시

토요일, 5월 07, 2016

Ajax 통신중 .. progress cicle 만들기


  • 결과값을 받아오기전에 진행중 progress 띄우기..
    • beforeSend 함수로 progress를 보여주고
    • done함수로 숨겨주면 
    • 끗! 정말쉽다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
         $.ajax({
            url:"${path}/visor/ownerSch",
            data:ownerSchData,
            dataType:"html",
            method: 'post',
            beforeSend:function(){
                $("#owner-progress-circle").show();
            },
            success:function(data){
                    
                    //page 자체를 받아서 div에 넣는식
                    $("#ownerList").html(data);
                
            },error:function(request,status,error){
                 alert("code:"+request.status+"\n"+"message:"
                 +request.responseText+"\n"+"error:"+error);
             }
        }).done(function() {
            //받아오는 속도가 너무빨라서 억지로 보여주는 상황..
            setTimeout(function(){
                $("#owner-progress-circle").hide();
            } ,200);
            
            //진행중 원세팅
            setProgressCicle($("#owner-table"), $("#owner-progress-circle"), 30);
            
        });
cs

ㅇ
작성자: 시간: 댓글 없음:
라벨:

화요일, 5월 03, 2016

Chrome에서 selected='selected' 안먹힐때


  • 크롬 브라우저에서 selected 프로퍼티가 안먹힐때는..

1
2
//이게 안될때
 $("#visor_seq option:eq(0)").attr("selected","selected");
 //이렇게 하면됩니다
 $("#visor_seq option[value=0]").prop( "selected", true);
cs

이렇게 하면 됩니다

jQuery 1.6이상만 먹힌다네요
작성자: 시간: 댓글 없음:
라벨:

일요일, 4월 17, 2016

Scroll 위치에 따른 특정값 반환하기



  • $(window.scroll(function(){  }) - 스크롤이 움직일때마다 이벤트 발생
  • $(window).scrollTop(); - 현재 스크롤바의 위치값을 출력 (x축도 가능할까?)
    • 이하는 알아서..

1
2
3
4
5
6
7
8
9
10
function scroll_follow( id )
{
  $(window).scroll(function( )  //스크롤이 움직일때마다 이벤트를 발생시키고
  { 
      var position = $(window).scrollTop(); // 현재 스크롤바의 위치값을 반환합니다.
      console.log(position); //해당 위치 좌표로 출력
      //$( id ).stop().animate({top:position+"px"}, 1); //해당 오브젝트 위치값 재설정
   });
}
scroll_follow( "#scroll" );
cs



작성자: 시간: 댓글 없음:
라벨:

금요일, 4월 01, 2016

jquery UI - animateNumber , stop()



필요한 js 파일

  • animateNumber() - 특정 숫자를 목표치까지 카운트 시키는 ( 증가 혹은 감소 ) 메서드
  • 속성값
    • .prop ( "number"  , 시작할 숫자 )
    • .animate( 
      • number : 종료할 숫자
      • color : 종료치에 다가갈수록 변화 할 색깔
      • "font-size" : 종료치에 다가갈수록 변화 할 font size
      • numberStep : function ( new , tween ){
      •  now - 현재 표시되고 있는 숫자 (소숫점 굉장히 김 )..
      •  $(tweeon.elem) 이벤트중인 엘레멘트 객체

  • stop()
    • jquery 메서스
    • 이벤트중인 대상의 이벤트를 바로 중지

  • 소스
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
//숫자 올라가고 내려가는 카운트 펑션
function numberUp(obj,endNumber){
    
    //색생값의 변화를 주기위해 변수
    $color="";
    //시작번호 끝번호를 변수로 설정
    $startNumber = $(obj).text();
    $endNumber=endNumber;
    
    //5000보다 작은수일경우 붉은색 아닐경우 검정색으로 표시
    if($endNumber < 5000){
        $color="red";
    }else{
        $color="black";
    }
    
    //animateNumber() 시작
    $(obj)
        //시작값을 $startNumber로 세팅
        .prop ('number', $startNumber )
        .animateNumber({
            //종료값을 $endNumber로 세팅
            number: $endNumber,
            //색상 세팅
            color:$color,
            numberStep:function(now,tween){
                //텍스트를 현재숫자 -  now로
                $(tween.elem).text(Math.round(now));
            }
        },1000)
}
//중복으로 실행했을경우 에니메이션을 즉시 중지하고 
//해당값으로 바로 오브젝트내용을 세팅해준뒤 바로 다음 실행
function immediatelyComplete(obj){
    $(obj).stop();
    $(obj).text($endNumber);
}
$(document).ready(function(){
    
    //초기 값 세팅
    $result=$("#result");
    $endNumber=$("#result").text();
    
        $("h2").click(function(){
            immediatelyComplete($("#result"));
            numberUp($result,parseInt($result.text())-1000);
        })
        $("h3").click(function(){
            immediatelyComplete($("#result"));
            numberUp($result,parseInt($result.text())+1000);
        })
})    
cs
작성자: 시간: 댓글 없음:
라벨:

jquery - offset() , clone()

  • offset() -  해당 객체의 절대 좌표값을 구할 수 있고 변경 할 수 있다
    • offset(). (top/left) - 해당 객체의 절대 좌표를 구함 - get
    • offset({ top:"100" , left:"200"}) 해당 객체의 절대 좌표를 top:100 , left:200으로 설정 - set
    • 아래와 같은 방식으로 설정 가틍
1
2
3
4
$clone.offset({
                        top:ui.offset.top,
                        left:ui.offset.left
                    })
cs
  • clone() - 해당 객체와 똑같은 객체를 복사해냄
    • $("selector").clone()

작성자: 시간: 댓글 없음:
라벨:

jquery - animate()

  • animate() - 객체의 크기를 변경하거나 위치를 이동시키는 에니메이션 메서드
    • 속성값 {  option , duration , complete}  
      • left , top , height , width - 크기,위치를 변경
      • duration - 에니메이션에 걸리는 시간
      • complete - 에니메이션이 완료되고 나서 실행될 함수
        • queue - 다른 에니메이션과 중복 실행 여부 판단 - boolean type
1
2
3
4
5
6
7
8
9
10
11
12
     $clone.animate({left:"+="+leftDis},function(){
                        
                        //이동한 객체는 에니메이션 종료 후 삭제
                        $(this).remove();
                        
                        //완료될시 모든 객체를 보여줌
                        $contain.children().css("visibility","visible");        
                    });
                    $clone.animate(
                            {top:"+="+topDis},
                            {queue:false}
                    );   
cs

작성자: 시간: 댓글 없음:
라벨:

jquery - $.map()

  • 배열 객체에 특정 로직을 처리한뒤 다시 배열 객체로 반환 해주는 메서드
    • $.map( 사용될 배열 , function ( 변수 ) {
    •  return 변수+? } ) ; 
1
2
3
$.map( [ 0, 1, 2 ], function( n ) { 
 return n + 4;
});
cs
  • 결과
[4, 5, 6]

  • name이 'msgno' 인 input 들의 값을 배열로 return 
1
2
3
4
console.log(
$.map($("[name='msgno']"),function(obj){
            return $(obj).val();
}))
cs

  • 결과
["90", "89", "88", "87", "86", "85", "84", "83", "82", "81", "61", "42", "41", "40", "39", "38", "37"]

  • ctrl에서 받기위해 제대로 배열로 만들기
1
2
3
    var msgnoList = new Array($.map($("[name='msgno']"),function(obj){
            return $(obj).val();
    }));
cs
  • 결과
작성자: 시간: 댓글 없음:
라벨:

Jquery UI - draggable,dropable

jquery ui의 draggable()를 이용해서 특정 객체를 원하는 장소로 정렬해서 이동시키기
  • draggable() 함수 - 객체의 위치를 마우스로 움직여서 바꿀수 있게 해주는 함수
    • 속성값 { options :  "value"} 식으로 설정
    • { option : function( event , ui ) {  } 와 같이 해당 event/ui 객체도 가지고 올수잇음 
      • revert - droppable 함수가 아닌 다른곳에 위치 되었을때 처음의 위치로 돌아가게 할지 여부를 결정
      • helper - drag 할때 그 자신 ( original ) 객체를 가지고 움직일지 혹은 clone을 만들어서 움직일지 결정
      • start - drag 가 시작될때 발생하는 event
      • drag - drag 가 실행되는 동안 계속 발생하는 event
      • stop - drag 가 중단됬을때 발생하는 event
  • droppable() 함수 - draggable 객체의 목표지점을 설정
    • 속성값
      • accept - drop을 허용할 객체 설정
      • drop - drop이 완료된뒤에 발생하는 event ( drag의 stop 이벤트 뒤에 발생 ) 
  • 소스
    • 기본 변수들 설정
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
    //Move Distance
    var topDis=0;
    var leftDis=0;
    
    //boolean to revert check
    var isRevert = true;
    
    //final object loc
    var fTop=0;
    var fLeft=0;
    
    //droppable target 
    $contain=$(".contain");
    
    //draggable target
    $object = $(".test01").eq(0);
    
cs

  • draggable()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
//움직일 객체
    $object.draggable(
        {
            //드래그가 끝난뒤 제자리로 돌아오게 하는 속성값
            revert:function(event,ui){
                //droppable 객체가 아닌곳에 드래그 됫을때
                if(event==false){
                    isRevert=false;
                    return true;
                //droppable 객체에 들어갓을때
                }else{
                    isRevert=true;
                }
            },
            //드래그되는 객체가 본인 자체일지 아니면 그외 다른것일지
            //해당 함수의 return 값이 드래그되어서 움직임
            helper:function(){
                $helper=$(this).clone();
                return $helper; 
            },
            //드래그가 시작됬을때 발생
            start:function(event,ui){
                //최종 더해질 객체
                $final=$(this).clone();
                //잠시 더해져서 에니메이션을 보여줄 객체
                $clone=$(this).clone();
            },
            //드래그 도중 발생
            drag:function(event,ui){
            },
            //드래그가 중지됬을때 발생
            stop:function(event,ui){
                
                //console.log(event.target); 
                //이벤트 중인 타깃 객체 helper객체가아닌
                //original 객체
                
                //console.log(ui.offset); 최종 좌표
                
                //제대로 droppable 객체 안에 들어갔을때
                if(isRevert){
                    
                    //최종 객체를 더해주고
                    $contain.append($final);
                    
                    //최종 객체의 위치를 지정 후 거리 계산
                    //visibility 속성은 해당위치에 존재함으로 밑의 과정이 
                    //display 속성은 해당위치에 존재하지 않기때문에 필요함
                    $finalTop=$final.offset().top;
                    $finalLeft=$final.offset().left;
                    
                    //객체를 숨기고
                    $final.css("visibility","hidden");
                    
                    //이동할 객체를 생성
                    $clone.css("position","absolute");
                    
                    $contain.append($clone);
                    
                    //drop 위치에 객체 배정
                    $clone.offset({
                        top:ui.offset.top,
                        left:ui.offset.left
                    })
                    
                    //거리 계산
                    topDis=$finalTop-ui.offset.top;
                    leftDis=$finalLeft-ui.offset.left;
                     
                    $clone.animate({left:"+="+leftDis},function(){
                        
                        //이동한 객체는 에니메이션 종료 후 삭제
                        $(this).remove();
                        
                        //완료될시 모든 객체를 보여줌
                        $contain.children().css("visibility","visible");        
                    });
                    $clone.animate(
                            {top:"+="+topDis},
                            {queue:false}
                    );   
                }
                
                //$(this).animate({marginLeft:"+="+leftDis});
                
            }
        });
cs

  • droppable
1
2
3
4
5
6
7
8
9
10
 
    
    $contain.droppable({
        accept:".test01",
        drop:function(event,ui){
            //drop 펑션
            //draggable의 stop function이 종료된 후에
            //발생
        }
    })
cs







작성자: 시간: 댓글 없음:
라벨:
피드 구독하기: 글 (Atom)