동해둘리의 IT Study

jQuery UI 가 제공하는 상호작용(Interaction) 기능은 다음과 같다. draggable / droppable / resizable / selectable / sortable 그 중에서 이번 포스팅에서 살펴볼 기능은 Draggable 입니다. 아래 코드와 같이 $( "#draggable" ).draggable(); 이렇게만 넣어주면 바로 drag 가 가능한 상태가 됩니다. jQuery UI Draggable - Default functionality #draggable { width: 150px; height: 150px; padding: 0.5em; } $( function() { $( "#draggable" ).draggable(); } ); Drag me around

IT공부방/jQuery, ajax, java 2016. 8. 2. 11:37

1. addClass() 함수 특정한 엘리먼트에 동적으로 class 속성을 부여하는 함수 This is a heading This is a paragraph.This is another paragraph. Add a class name to the first p element 웹상에서 바로 확인하기 http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_addclass 2. appendTo() 함수 지정한 엘리먼트의 끝에 지정된 엘리먼트를 붙인다. $("Hello World!").appendTo("p"); 위 코드의 경우, 페이지내의 모든 P 엘리먼트의 끝에 Hello World! 이 코드를 붙인다. 웹상에서 바로 확인하기 http://www..

IT공부방/jQuery, ajax, java 2016. 7. 30. 18:42

AngularJS 는 2009년 Miško Hevery과 Adam Abrons에 의해 개발된 MVC(또는 MVW – Model View Whatever) 웹 프레임워크로, SPA(Single Page Application) 형태의 웹 애플리케이션을 빠르게 개발할 수 있도록 도와줍니다. 자료출처 : http://d2.naver.com/helloworld/1172239 ※ Front End에서 jQuery를 사용하다보면 제일 성가신 부분이 동적으로 변하는 데이터 값들에 대한 DOM처리 부분이다. AngularJS를 사용하면 좀 낳아질까...? 자료출처 : http://cafe.naver.com/jjdev/2791[출

IT공부방/jQuery, ajax, java 2016. 7. 29. 12:18

jQuery 플러그인 중에서 파일업로드를 위한 플러그인입니다.아래 사이트에 예제와 소스코드등이 제공됩니다. http://blueimp.github.io/jQuery-File-Upload/basic.html 소스코드와 예제는 GitHub 에서 다운로드 받을 수 있습니다. 다운로드 받은 후에, 압축을 해제하고... 서버의 특정위치로 업로드를 합니다.이때, 소스코드 중에서 아래와 같은 부분이 있는데, // Change this to the location of your server-side upload handler: var url = window.location.hostname === 'blueimp.github.io' ? '//jquery-file-upload.appspot.com/' : 'server/p..

IT공부방/jQuery, ajax, java 2016. 7. 28. 18:49

웹페이지 내의 각 엘리먼트에 움직임을 줄 수 있는 jQuery plugin 을 소개합니다. 위 사이트에서 보듯이 GSGD 에서 개발하여 오픈소스로 제공하며, CDN 도 제공하고 있습니다. 아래 코드가 기능데모 코드입니다. 그대로 복사해서 테스트 해보셔도 되고, 첨부파일 다운로드 받아서 example 폴더에 있는 example.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 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 6..

IT공부방/jQuery, ajax, java 2016. 7. 26. 12:46

1. resize 함수 브라우저의 윈도우 크기가 변할때 마다 호출되는 함수 $(window).resize(function(){ $('span').text(x += 1); }); 아래에, 테스트 URL 이 있음 http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_resize 보통, 페이지가 로드될때 onload 함수가 먼저 실행되므로, onload 함수에서 원하는 페이지 크기를 설정하고 resize 함수에도 같은 페이지 크기를 설정해 놓으면, 로드되는 순간부터 윈도우 크기가 변하는 모든 순간에도, 원하는 페이지 크기가 유지되게 된다. 아래 코드는, 로드되는 페이지가 화면에 꽉차가 할때 사용되는 코드이다. 이때, CSS 에서 marign 과..

IT공부방/jQuery, ajax, java 2016. 7. 25. 14:59

http://www.jplayer.org/ jPlayer 는 JavaScript 로 작성된 무료오픈소스(MIT License) 이다. jPlayer는 아주 쉽고 빠르게 웹페이지내에 Audio 와Video 를 넣을 수 있으며, Cross Platform 을 지원한다. 아래 링크를 통해 바로 확인해 볼 수 있다. http://jsfiddle.net/jPlayer/XLNCY/ 몇가지 특징적인 것은 다음과 같다. 1. 배우기 쉬우며, 쉽게 배치할 수 있다2. 자신의 취향에 맞게 커스터마이징 가능하며, HTML과 CSS 를 이용하여 스킨변경이 가능하다.3. 14KB 밖에 안되기 때문에 가볍다4. 무료이자 오픈소스이며 라이센스 제한이 없다5. 활동적이고 커가는 커뮤니티가 도움을 제공한다.6. 유명한 Platform..

IT공부방/jQuery, ajax, java 2016. 7. 23. 10:51

1. preventDefault 함수 해당 엘리먼트에 발생한 이벤트로 인해 동작하는 URL 오픈을 중지시킨다. $("a").click(function(e){ e.preventDefault(); this.GoToProcess() }); 위의경우, a 엘리먼트가 Click 된 경우 a 태그로 인해 링크하게될 URL 을 열지 않도록 처리하는 기능을 한다. 그 대신에, 특정 동작을 진행하고자 할때 preventDefault() 사용한 후,그 뒤에 하고자하는 동작을 코딩하면 된다. 2. bind 함수 해당 엘리먼트에 이벤트 핸들러 기능을 부여한다. $("p").bind("click", function(){ alert("The paragraph was clicked."); }); 위의 경우, p 엘리먼트에 clic..

IT공부방/jQuery, ajax, java 2016. 7. 22. 18:58

1. offset 함수 jQuery 의 offset 함수는 대상이 시작되는 x좌표와 y좌표 값을 리턴한다. 2. width 함수 대상 엘리먼트의 폭을 반환한다. $("button").click(function(){ alert($("div").width()); }); 3. mouseenter 함수 / mouseleave 함수 마우스포인터가 해당 객체위로 올라왔을 경우에 호출된다. 바로 확인하려면 아래 링크 클릭!!!http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_mouseenter_mouseleave 4. click 함수 해당객체에 마우스클릭이 일어났을 때 호출된다. 바로 확인하려면 아래링크 클릭!!!http://www.w3school..

IT공부방/jQuery, ajax, java 2016. 7. 22. 17:51

jQuery 함수 사용방법을 알아보기 전에, jQuery 에 대하여 간략하게 정리해보면 다음과 같다. 1. 개요 1) JavaScript 라이브러리 이다 2) JavaScript 로 만들어놓은 기능(코드)의 집합이다 3) 여전히 문법은 JavaScript 기반이다 4) jQuery = CSS 의 선택자 (태그, 아이디, 클래스 등등) + JavaScript 기능 + 확장기능 2. 사용방법 1) jQuery 기능이 들어있는 코드파일이 필요하다 2) http://www.jquery.com 에서 다운로드 받거나 링크하여 사용한다. 3 jQuery 함수 1) 모든 jQuery 구문은 항상 jQuery 함수로 부터 시작된다. jQuery("#div").css("background-color", "red"); 위 ..

IT공부방/jQuery, ajax, java 2016. 7. 21. 16:58

AJAX를 사용해 콘텐츠를 불러올 경우 지연시간이나 페이지 에러등을 사용자가 인지하기 어렵다. 또한 AJAX가 진행중인지 아닌지를 구분하는 것 역시 아무런 인터페이스가 없을 경우 사용성을 크게 해칠 수 있을 것이다. 만약 페이지 로딩이라도 길어진다면 아무런 반응없는 웹사이트를 보고 에러라고 생각한 뒤 이탈하려는 유저가 많아질 수 밖에 없을 것이기 때문이다. 이런 이유로 로딩중이라는 효과를 가시적으로 나타나기 위해 아이콘 및 이미지 또는 텍스트 문구를 사용할 수 있다. 아래에서는 텍스트를 사용했으나 실제로 계속해서 돌아가는 아이콘등 역시 매우 자주 사용된다. 로딩 중 문구를 출력하는 코드 구현하기 아래 코드는 현재 3개의 콘텐츠 내용을 담고있다. 방문자가 더보기 버튼을 클릭할 경우 숨겨진 로딩중이란 문구가..

IT공부방/jQuery, ajax, java 2016. 7. 21. 11:22

ajax 는 Asynchronous Javascript and Xml 의 약자인데, 비동기식 자바스크립트와 XML 이라고 보면된다 javascript 의 XMLHttpRequest 를 이용하여 직접 구현하여도 되지만, jQuery 를 이용하는 것이 훨씬 더 간단하게 구현할 수 있다. 가장 큰 특징은 현재 페이지에서 페이지의 이동/전환없이, 특정 이벤트를 통해 서버와 http 통신을 할 수 있다는 것이며, 이를 통해 현재 페이지의 일부분을 업데이트 할 수 있다는 것이다. function ajaxAct() { $.ajax ({ type : "GET", // GET 또는 POST url : 'updatetest.htm', // 서버측에서 가져올 페이지 data : 'a=1&b=2&c=3', // 서버측에 전달..

IT공부방/jQuery, ajax, java 2016. 7. 21. 11:19

웹사이트 개발시, PC환경에서 접속을 했는지 모바일에서 접속을 했는지 확인하기 위한 javascript 코드 입니다. navigator 객체의 platform 속성을 이용하여 확인을 하게 됩니다.아래 링크는 navigator 객체의 Platform 속성에 대한 정의입니다. http://www.w3schools.com/jsref/prop_nav_platform.asp 정의에 의하면, platform 속성에 가능한 값은 아래와 같습니다. Win16 : 16비트 윈도위기반 컴퓨터Win32 : 32비트 윈도위기반 컴퓨터Win64 : 64비트 윈도위기반 컴퓨터MacIntel : 인텔CPU 를 가진 매킨토시 컴퓨터Mac : 매킨토시컴퓨터이상, 5가지 정도의 값이 PC접속시 발생가능한 속성이며 기타 속성은 무시하거나..

IT공부방/jQuery, ajax, java 2016. 7. 19. 14:55

jQuery 1.2.6 코드를 살펴보면, 아래와 같은 부분이 있다. jQuery.fn = jQuery.prototype = { init: function( selector, context ) { // Make sure that a selection was provided selector = selector || document; .......... }, }; 이 코드에 나와있는 prototype 과 fn 이, jQuery 에서 하는 역할을 살펴보고자 한다. 모든 object 는 prototype 이라는 속성을 가지고 있다.이것은 단순히 다른 오브젝트들이 상속받을 수 있는 속성이라고 보면 된다. function Person(name) { this.name = name; } Person.prototype.s..

IT공부방/jQuery, ajax, java 2016. 7. 19. 13:41