jquery 를 이용하여 태그의 좌표(절대위치)를 구해보자. 위와 같은 그림에서 태그가 있는 위치의 값이 필요할 경우가 생긴다. 예를 들면 클릭한 곳에서 tool tip 을 보여준다거나 특정 위치에서 어떤 이벤트나 작업을 해야할 경우가 종종 있다. 그래서 이번에는 웹페이지에서 특정 태그의 좌표를 구해본다. 좌표를 구하는 방법을 요약하자면 특정 태그의 절대위치를 가져온다. 끝. 아주 간단하다. 절대위치를 가져오는 방법은 아래의 글에서 설명하고 있다. 2016/05/11 - [language/jquery] - jquery 를 이용해서 원하는 태그(위치)로 스크롤 이동하기 위 링크의 내용 중 일부를 발췌했다. 태그의 위치를 가져오는 함수는 offset, position 이 있다. 두 함수의 차이점에 대해 간단..

jquery mobile 에서 alert 만들기 (jquery plugin 사용) pc 웹에서도 사용가능합니다. jquery mobile 을 사용해서 하이브리드 앱을 만들다 보니 alert 창이 너무 거슬린다. 이유는 alert 창에 웹주소가 표시되기 때문이다. 그래서 jquery mobile dialog (다이얼로그 팝업)를 이용해보니 알림이라기 보다는 팝업의 느낌이 강했다. 화면도 사라지고 별도에 다이얼로그 창 하나가 떠서 페이지를 이동한 느낌이 강했다. http://cofs.tistory.com/154

Listview 를 이용한 커스텀 accordion 만들기 / 아래로 펼치기, 접기 Listview 를 이용해서 accordion 을 만드는 방법에 대해서 설명한다. 이 방법은 api 에 있는 기본적인 방법이 아닌 jquery animate 를 사용하여 다른 방식으로 구현한 방법이다. 먼저 기본적인 api 에 있는 방법은 아래 링크에서 설명하고 있다. http://cofs.tistory.com/161 내가 구현하고 싶은 모양은 이런 모양이였다. ( 머리속에만 있어서 완성된 화면으로 대체합니다. ) 두 이미지는 완성된 이미지를 스크린샷 찍은 것이다. 기본적인 accordion 과는 조금 다른 모양이다. 펼치기/접기를 하는 버튼이 하단에 위치한다. 만드는 방법은 그리 어렵지 않다. jquery 를 다룰 줄 ..

jquery 를 이용해서 원하는 태그(위치)로 스크롤 이동해 보자. 맨 아래에서 절대위치와 상대위치를 구하는 offset 함수와 position 함수에 대해서 간단히 설명한다. 특정 태그가 있는 곳까지 자동으로 스크롤이 되서 이동해야 하는 경우들이 종종 있다. 그럴 경우에 쉽게 사용할 수 있는 방법이다. 소스를 직접 설명한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 div {margin-bottom:1000px;} function fnMove(seq){ var offset = $("#div" + seq).offset(); $('html, body').animate({scrollTop : offset.top}, 400); } div1로 이동 div2..

이벤트에 대해서 알아보겠습니다. 이벤트(event)란 모든 행위(?)를 말하는 것으로 프로그램에서는 미리 사용자의 행위를 예측하여 미리 사용할 수 있도록 이벤트를 많이 준비해 놓고 있습니다. 예를 들어 사용자가 마우스를 클릭합니다. 그러면 사용자가 클릭했다는 것을 알려줍니다. 클릭했을때 어떤 동작을 하기 위해서 click 이벤트가 준비되어 있습니다. 이게 없다면 우리는 사용자가 마우스를 클릭했는지 부터 알아내고 그 다음 작업을 할 수 있을 것입니다. 이것이 일종의 이벤트입니다. 이벤트 핸들러란 이벤트와 우리가 준비한 프로그램을 연결해 주는 역할을 합니다. 우리가 해야할 일은 이벤트가 일어났을 때 수행할 작업을 준비하고 이벤트 핸들러에게 그 일을 하도록 연결해 주면 됩니다. 이벤트와 이벤트 핸들러를 연결하..

화면을 좌, 우로 밀어서 페이지를 이동하는 방법에 대해 설명합니다. swipeleft, swiperight 이벤트를 사용합니다. swipeleft는 사용자가 왼쪽으로 30픽셀 이상 쓸어 넘겼을 경우 발생합니다. swiperight는 사용자가 오른쪽을 30픽셀 이상 쓸어 넘겼을 경우 발생합니다. 만들 파일은 총 4개입니다. 먼저 페이지 이동에 사용될 html 파일 3개를 만듭니다. 처음에는 파일명을 똑같이 만드세요. 소스가 눈에 익고 이해될 때 본인의 입맛에 맞게 파일명도 바꿔보는걸 추천합니다. 014event.html 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 jquery mobile j..

jquery 를 이용하여 화면 맨위로 자연스럽게 올라가는 기능을 구현해 보겠습니다. 스크롤을 많이 내리면 맨위로 한번에 올라가는 이벤트가 필요합니다. 한번에 화면 최상단으로 올라가는 방법도 있지만 animation을 사용하여 자연스럽게 올라가는 기능을 구현해 보겠습니다. 기능 요약 - 스크롤의 위치에 따라서 맨위로 올라가는 버튼을 나타내거나 사라지도록 한다. - 맨위로 올라가는 버튼을 클릭하면 자연스럽게 화면 최상단으로 이동한다. jquery import는 필수입니다. 1. Html A 태그를 만듭니다. 버튼도 관계없습니다. 필자는 A 태그로 작성하였고 설명은 버튼으로 칭하겠습니다. 1 TOP cs 2. CSS style을 작성합니다. 1 2 3 4 5 6 7 8 9 a#MOVE_TOP_BTN { pos..

객체 관련 명령어에 대해서 알아봅니다. 객체 관련 명령어는 for ~ in 과 with 가 있습니다. for ~ in 문은 반복적으로 객체의 변수를 출력하는 명령어는입니다. with 문은 객체변수를 미리 정의하여 보다 간편하게 사용할 수 있게 만듭니다. 객체변수의 유효범위 체인을 변경하는데 사용됩니다. 먼저 for ~ in 문에 대해 설명합니다. 작성방법은 다음과 같습니다. for(변수 in 객체변수){ 처리할 내용들; ... } 예제 소스입니다. 1 2 3 4 5 6 7 8 9 10 11 12 function Car(col, num){ this.color = col; this.number = num; } myCar = new Car("파랑","서울 35 다 8984"); document.write("m..

HTML 5 javascript 에서 업로드한 file 을 썸네일로 만들어 보겠습니다. 모바일 작업을 하는 중에 스마트폰에서 업로드 하는 이미지는 용량이 꽤 크기 때문에 웹 메모리상에 부하가 너무 심해서 썸네일로 줄여볼 방법이 없을까 하다가 찾게 되었습니다. FileReader 객체를 사용합니다. 지원 범위는 다음과 같습니다. 출처 : http://caniuse.com/#feat=filereader Jquery Import는 기본입니다. 먼저 파일 태그와 썸네일을 배치할 div 태그를 만듭니다. 1 2 3 Colored by Color Scripter cs 다음으로 Img File을 업로드한 후 작업 소스입니다. (javascript) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16..

jquery 에서 form serialize를 이용하여 json 을 만들수 있습니다. 먼저 serialize 에 대해서 간단히 설명하겠습니다. serialize 함수는 2개가 있습니다. 첫번째로 serialize() 입니다. URL-encoded 표기법으로 form 의 객체들을 텍스트화 하고 그 결과를 return 합니다. 형식은 inputName=inputValue&inputName2=inputValue2 입니다. 두번쨰로 serializeArray() 입니다. Json 문자열 형태의 배열을 return 합니다. 형식은 [{name:"name",valeu:"valeu"},{name:"name2",value:"value2"}] 입니다. 지금 만들 형식은 { inputName:"inputVlaue", in..