프로그래밍/jQuery237 UI Droppable, 이미지 갤러리 휴지통 기능 구현 droppable 원문 링크 http://jqueryui.com/demos/droppable/ 필요한 모듈 ( Dependencies ) UI Core UI Widget UI Mouse UI Draggable 드래그 앤 드롭으로 휴지통에 버리기 구현 source view High Tatras View larger Delete image High Tatras 2 View larger Delete image High Tatras 3 View larger Delete image High Tatras 4 View larger Delete image 휴지통 휴지통 2012. 7. 20. Droppable, visual 효과 처리, revert 기능 제어 droppable 원문 링크 http://jqueryui.com/demos/droppable/ 필요한 모듈 ( Dependencies ) UI Core UI Widget UI Mouse UI Draggable 드롭 visual 효과처리 source view 개요 : 드롭될 요소에 따라 시각적인 효과 처리를 달리 합니다. hover가 되야 클래스 변경 : Drag me to my target Drop here 요소를 움직이면 클래스 변경 : Drag me to my target Drop here 드롭 복귀 기능 제어source view 개요 : 다시 제자리로 돌아가는 두가지 패턴의 예제입니다. 타겟 영역에 올리면 복귀 기능을 가집니다. 타겟 영역에 드롭된 후에 타겟 영역으로 복귀되는 기능을 가집니다. Dr.. 2012. 7. 20. Droppable, 드롭 기본사용, 드롭 비활성, 전달 방지 droppable 원문 링크 http://jqueryui.com/demos/droppable/ 필요한 모듈 ( Dependencies ) UI Core UI Widget UI Mouse UI Draggable 드롭 기본사용 source view 개요 : 드롭 기능의 기본 사용법입니다. target에 드래그 드롭하세요! Drop here 드롭 기능 활성/비활성source view 개요 : 드롭을 가능하게 하거나 불가능하게 옵션을 제어합니다. 드래그는 되지만 드롭은 안됨!! 타겟에 드래그 드롭 가능 accept: '#draggable3' 전달 방지 source view 개요 : greedy 옵션을 이용하여 타겟에 드롭 됬을 경우, 상위 요소로 드롭 효과가 전달되는 것을 방지하거나 허용 내부요소로 움직여 보세.. 2012. 7. 20. Draggable, 핸들러 제어, 드래그 + 정렬(Sortable) 기능 Draggable 원문 링크 http://jqueryui.com/demos/draggable/ 필요한 모듈 ( Dependencies ) UI Core UI Widget UI Mouse 핸들러 설정 source view 개요 : 핸들러를 설정하여 드래그 제어 요기를 잡아야 움직임 여기를 잡아야 움직임 여기는 안 움직임 여기는 안 움직임 여기는 안 움직임 핸들 제어하기source view 핸들과 커서를 제어하기 항상 center로 이동 커서 위치가 좌상단 -5, -5 로 이동 커서가 bottom으로 이동 드래그 + 정렬(sortable) source view 드래그가 가능하고 순서를 바꿀수 있습니다. 아래로 드래그하세요. Item 1 Item 2 Item 3 Item 4 Item 5 2012. 7. 11. Draggable, 드래그 Delay 주기, snap효과, 복원 Draggable 원문 링크 http://jqueryui.com/demos/draggable/ 필요한 모듈 ( Dependencies ) UI Core UI Widget UI Mouse Delay 주기 source view 개요 : 드래그 함수 Delay 주기 바로 드래그 가능 클릭 후 1초를 기다려야 드래그 가능 자석/그리드 효과주기source view 특정 영역에 자석효과 및 그리드 효과 주기 snap 타겟 박스입니다. 기본타입 (snap: true), 드래그가 되는 다른 모든 요소에 snap 됩니다. 오로지 타겟박스에만 snap 됩니다. 오로지 타겟박스 바깥에만 snap 됩니다. 20 x 20 그리드 형태로 움직임 80 x 80 그리드 형태로 움직임 제자리로 돌아가기 source view 드래그 후.. 2012. 7. 10. Draggable, 드래그 기본사용, 이벤트 제어, 움직임 제한 Draggable 원문 링크 http://jqueryui.com/demos/draggable/ 필요한 모듈 ( Dependencies ) UI Core UI Widget UI Mouse 기본 사용법 source view 개요 : 드래그 함수 기본 드래그 하세요. 드래그 이벤트 보기 source view 드래그 함수 이벤트 작동 방식 보기 드래그 하면 이벤트 발생 횟수를 볼 수 있습니다. "start" invoked 0x "drag" invoked 0x "stop" invoked 0x 드래그 제약 조건 걸기 source view 특정영역 안에서만 움직이거나 움직임의 방향을 제어할 수 있음 좌우, 상하 이동 제어 위 아래 이동만 가능 좌 우로만 이동 가능 부모 창 내에서만 이동 가능하도록 제어 부모 박스 안.. 2012. 7. 10. jQuery.unique(), DOM 요소 배열에서 중복된 노드를 제거 jQuery.unique() 원문 링크 http://api.jquery.com/jQuery.unique/ jQuery.unique( array )Returns : Array 개요 : DOM 요소 배열에서 중복된 노드를 제거하고 정렬합니다. 이 함수는 오로지 DOM 요소 배열에만 사용할 수 있습니다. jQuery.unique( array ) array DOM elements 배열. $.unique() 함수는 오브젝트 배열을 정렬하고 중복된 노드를 제거합니다. 이 함수는 DOM 요소들로 구성된 배열에만 사용할 수 있으며 주로 jQuery 내부 작업용으로 사용합니다. jQuery 1.4 부터 document 순서에 따라 결과가 정렬됩니다. 예 제 소스닫기 중복되는 div 를 추출해서 제거합니다. There a.. 2012. 7. 2. jQuery.type(), object 타입 알아내기 jQuery.type() 원문 링크 http://api.jquery.com/jQuery.type/ jQuery.type( obj )Returns : String 개요 : object의 type을 알아냅니다. jQuery.type( obj ) obj type을 알아낼 인자/li> 아래와 같은 데이터 타입을 알아낼 수 있습니다. object가 undefined, null일 경우, "undefined" 이나 "null" 이 반환되게 됩니다. jQuery.type(undefined) === "undefined" jQuery.type() === "undefined" jQuery.type(window.notDefined) === "undefined" jQuery.type(null) === "null" 만약 브라우저.. 2012. 7. 2. jQuery.trim(), 양쪽 끝 공백 제거 jQuery.trim() 원문 링크 http://api.jquery.com/jQuery.trim/ jQuery.trim( str )Returns : String 개요 : 문자열 양쪽 끝의 공백을 제거합니다. jQuery.trim( str ) str 문자열 $.trim() 함수는 양쪽 끝의 공백 문자열을 제거합니다. 예 제 소스닫기 trim 함수 예제 미리보기 이 함수는 궁극의 함수이죠? 정말 활용도도 많고 자주 사용하기도 합니다. javascript 자제에 이 함수가 없죠. 그래서 정규식으로 많이 만들어서 사용합니다만.. jQuery에서 멋진 함수를 구현해 놓았네요. 그럼 즐프하세요. ※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다. 2012. 7. 2. jQuery.removeData(), 데이터를 제거 jQuery.removeData() 원문 링크 http://api.jquery.com/jQuery.removeData/ jQuery.removeData( element [, name] )Returns : jQuery 개요 : 데이터를 제거합니다. jQuery.removeData( element [, name] ) element 제거할 데이터가 있는 DOM 요소 name 제거할 데이터의 name jQuery.removeData() 함수는 jQuery.data() 함수를 이용해 세팅했던 이전 데이터를 제거합니다. key를 알아서 그 key로 접근하면 실제 value가 제거되게 되는 것입니다. 인자를 주지 않으면 모든 value가 한꺼번에 삭제됩니다. 예 제 소스닫기 2개의 데이터를 세팅하고 그중 하나의 데이.. 2012. 7. 2. jQuery.parseXML(), XML 문서를 파싱 jQuery.parseXML() 원문 링크 http://api.jquery.com/jQuery.parseXML/ jQuery.parseXML( data )Returns : XMLDocument 개요 : XML 문서를 파싱합니다. jQuery.parseXML( data ) data well-formed XML 문자열 jQuery.parseXML는 유효한 XML 문서에 대해 브라우져의 기본적인 기능으로 파싱을 합니다. 이 문서는 jQuery의 탐색과 조작 기능을 이용할 수 있습니다. 예 제 소스닫기 XML 문자열을 이용해 jQuery 오브젝트를 만들고 title 노드에 값을 추가합니다. 미리보기 XML 데이터 파싱해서 사용해야 합니다. 요 함수는 필수 유틸리티 함수네요. 잊지 마세요. 그럼 즐프하세요. ※ .. 2012. 7. 2. jQuery.parseJSON(), JSON 문자열을 JavaScript object로 변환 jQuery.parseJSON() 원문 링크 http://api.jquery.com/jQuery.parseJSON/ jQuery.parseJSON( json )Returns : Object 개요 : well-formed JSON 문자열을 JavaScript object 로 반환합니다. jQuery.parseJSON( json ) json JSON 문자열 형식이 어긋난 JSON 문자열을 인자로 사용하면 exception을 발생시킵니다. 아래에 잘못된 JSON 형식을 설명합니다. {test: 1} 쌍따옴표를 사용하지 않았음 {'test': 1} 쌍따옴표로 사용해야 함 인자가 없거나 빈 문자열, null, undefined를 사용하여 호출하면, 'null' 이 반환됩니다. jQuery 브라우저의 기본 방식인 .. 2012. 7. 2. jQuery.now(), 현재 시간을 number로 반환 jQuery.now() 원문 링크 http://api.jquery.com/jQuery.now/ jQuery.now()Returns : Number 개요 : 현재 시간을 number로 반환 jQuery.now() $.now() 함수는 (new Date).getTime() 구문을 실행하여 Number 데이터를 반환합니다. 예 제 $('div').text(jQuery.now()); //Result : 1340954729007 시간값으로 나온다는 것이 함정;;;; 그럼 즐프하세요. ※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다. 2012. 7. 2. jQuery.merge(), 두 개의 배열을 합치기 jQuery.merge() 원문 링크 http://api.jquery.com/jQuery.merge/ jQuery.merge( first, second )Returns : Array 개요 : 두 개의 배열을 첫번째 배열에 합칩니다. jQuery.merge( first, second ) first 합칠 기준이 되는 첫번째 배열 second 첫번째 배열에 합쳐질 두번째 배열, 변하지 않음. $.merge() 함수는 두 개의 배열을 합칩니다. 배열의 아이템들의 순서는 유지됩니다. 이 함수가 실행되면 첫번재 배열은 바뀌게 됩니다. 만일 첫번째 원본 배열이 나중에도 필요하다면, $.merge() 함수 호출전에 복사를 해 놓아야 합니다. var newArray = $.merge([], oldArray); 위 예제로.. 2012. 7. 2. jQuery.map(), 새로운 배열 요소로 변경 jQuery.map() 원문 링크 http://api.jquery.com/jQuery.map/ jQuery.map( array, callback(elementOfArray, indexInArray) )Returns : Array 개요 : 배열의 모든 요소(items)를 새로운 배열 요소로 변경합니다. jQuery.map( array, callback(elementOfArray, indexInArray) ) array 변환할 배열 callback(elementOfArray, indexInArray) 모든 요소에 대해 실행될 함수. 첫번째 인자는 배열 요소(item), 두번째 인자는 배열 인덱스. jQuery.map( arrayOrObject, callback( value, indexOrKey ) ) arr.. 2012. 7. 2. jQuery.makeArray(), 자바스크립트 배열로 변환 jQuery.makeArray() 원문 링크 http://api.jquery.com/jQuery.makeArray/ jQuery.makeArray( obj )Returns : Array 개요 : 진정한 자바 스크립트 배열로 변환합니다. jQuery.makeArray( obj ) obj 배열로 변환할 오브젝트 jQuery와 JavaScript 의 많은 일반적인 함수들은 배열과 비슷한 오브젝트들을 반환합니다. 예를 들어, jQuery 함수를 의미하는 $()은 배열로 이루어진 속성들을 지닌 jQuery 객체를 반환합니다. 그러나 이것을 정확하게 배열과 같다고 할 수는 없습니다. 예 제 소스닫기 HTMLElements 집합을 배열로 만든 후 순서를 바꿉니다. First Second Third Fourth 미리보.. 2012. 7. 2. jQuery.isXMLDoc(), XML 문서인지 확인 jQuery.isXMLDoc() 원문 링크 http://api.jquery.com/jQuery.isXMLDoc/ jQuery.isXMLDoc( object )Returns : Boolean 개요 : XML 문서의 DOM 노드 또는 XML 문서인지 체크합니다. jQuery.isXMLDoc( node ) node XML 문서라면 DOM 노드인지 체크할 인자 예 제 소스닫기 XML 문서라면 DOM 노드인지 체크 jQuery.isXMLDoc(document) // false jQuery.isXMLDoc(document.body) // false 짧아 좋네요. ㅎㅎ 그럼 즐프하세요. ※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다. 2012. 7. 2. jQuery.isWindow(), Window 인지 확인 jQuery.isWindow() 원문 링크 http://api.jquery.com/jQuery.isWindow/ jQuery.isWindow( object )Returns : Boolean 개요 : Window 인지 판별합니다. jQuery.isWindow( object ) object window인지 확인할 인자. This is used in a number of places in jQuery to determine if we're operating against a browser window (such as the current window or an iframe). 위 문장의 의미는 도저히 모르겠습니다. 그래서 그냥 남겨둡니다. 예 제 소스닫기 window인지 확인합니다. Is 'window' a .. 2012. 7. 2. jQuery.isPlainObject(), object인지 확인 jQuery.isPlainObject() 원문 링크 http://api.jquery.com/jQuery.isPlainObject/ jQuery.isPlainObject( object )Returns : Boolean 개요 : 인자가 일반적인 object(plain object) 인지 확인합니다. (plain object : "{}" 나 "new Object" 로 만들어진). jQuery.isPlainObject( object ) object plain object인지 확인할 인자. Note: Host object(개발자가 작성한 스크립트에 의한 객체)는 브라우져 별로 객체를 다루는 상황이 달라 몇가지 어려운 점을 가지고 있습니다. 이런 이유로, 브라우져별로 $.isPlainObject() 사용을 확인해 .. 2012. 7. 2. jQuery.isNumeric(), 숫자인지 확인 jQuery.isNumeric() 원문 링크 http://api.jquery.com/jQuery.isNumeric/ jQuery.isNumeric( value )Returns : Boolean 개요 : 인자가 숫자인지 판별합니다. jQuery.isNumeric( value ) value 숫자인지 확인할 인자 $.isNumeric() 함수는 인자가 숫자 값인지 확인합니다. 숫자라면 true. 아니라면 false를 반환합니다. 인자는 뭐든지 사용가능합니다. 예 제 소스닫기 다양한 값들을 체크해 봅니다. $.isNumeric("-10"); // true $.isNumeric(16); // true $.isNumeric(0xFF); // true $.isNumeric("0xFF"); // true $.isNum.. 2012. 7. 2. 이전 1 2 3 4 ··· 12 다음