🗒️ Programming/jQuery (24)

1. 2018.02.23 10 jQuery Global Map Plugins

   In this post we are sharing with you a collection of 10 jQuery Global Map plugins that you’ll definitely find useful if you want to display global maps on your site. A collection of jQuery interactive maps and image maps of world or specific country/location. These map plugins no not require Flash. Just JavaScript. Sweet. Enjoy =)Related Posts:10 jQuery Google Maps Plugins1. JQVMapA jQuery plugi..
2. 2017.05.25 swipejs 플러그인 활용하기

   * swipejs 플러그인 - 스마트폰 액정에서 손으로 터치하여 좌우로 밀어 이전 또는 다음 배너로 넘어가는 터치 슬라이드 배너를 쉽고 간단하게 만들 수 있음. - 기본 메서드 적용 방법(기본형) window.mySwipe = $(요소 선택).Swipe({ 옵션 설정 }).data('Swipe'); - swipejs 플러그인의 옵션 종류 종류 설명 startSlide: 숫자 (default:0) 인덱스 값으로 초기에 열릴 슬라이드를 지정함. auto: 밀리초 자동 슬라이드 이동 시간을 설정함. continuous: 논릿값 (default:true) 슬라이드 이동 시 연속적으로 반복, 롤링되어 나오게 할 것인지 설정함. disableScroll: 논릿값 (default:false) 브라우저에 스크롤바를 사..
3. 2017.05.25 Accordion Image 플러그인 활용하기

   * Accordion Image 플러그인 - 문단 태그의 내용을 마치 아코디언 악기처럼 펼쳐졌다 줄여지는 기능을 쉽게 구현시킬 수 있는 플러그인 라이브러리 파일. - 기본 메서드 적용 방법 (기본형) $("요소 선택").AccordionImageMenut({ 옵션 설정 }); - Accordion Image 옵션 종류 종류 설명 position 아코디언 방향을 가로("horizontal")로 할지 세로("vertical")로 할지 설정함. openItem 값을 0으로 설정하면 초기 화면부터 첫 번째 배너가 펼쳐져 있게 됨. 1로 설정하면 두번째 배너가 펼쳐져 있게 됨. openDim 펼쳐져 있는 배너의 너비를 설정함. closeDim 닫혀 있는 배너의 너비를 설정함. width 전체 배너의 너비를 설정함..
4. 2017.05.25 bxSlider 플러그인 활용하기

   * bxSlider 플러그인 - bxSlider 플러그인을 사용하면, 슬라이드 배너나 자동으로 재생되는 슬라이드 배너를 쉽고 간단히 만들 수 있음. - 기본 메서드 적용 방법 (기본형) var 참조 변수 = $('요소 선택').bxSlider({ 옵션 설정 }); - bxSlider 옵션 종류 종류 기본값 데이터 형식 설명 mode "horizontal" "horizontal" "vertical" "fade" 슬라이드 이동 방향을 설정 speed 500 숫자형 값 슬라이드 전환 시 속도를 설정 pager true 논리형 값 현재 위치를 알리는 불릿(동그라미 버튼) 노출 여부를 설정 moveSlides 0 숫자형 값 슬라이드 이동 시 개수를 설정 sliderWidth 0 숫자형 값 슬라이드마다 너비를 설정..
5. 2017.05.25 제이쿼리 UI 플러그인

   * 제이쿼리 플러그인이란? - 제이쿼리 플러그인(plug-in)은 여러 개발자가 드레그 & 드롭, 슬라이드 배너, 툴 팁 기능 등을 구현해 놓은 프로그래밍을 자바스크립트 파이로 제공하는 제이쿼리 라이브러리를 의미함. - 제이쿼리 플러그인을 내 웹 문서에 가져다 연동시키기만 하면 바로 사용할 수 있음. - 제이쿼리 플러그인은 사용하고자 하는 기능의 플러그인을 검색하여 다운로드받고 웹 문서에 연동해 선택한 요소에 기능(Method)만 적용하면, 간단한 코드 삽입만으로도 복잡하고 어려운 기능을 쉽게 구현할 수 있음. - 거의 모든 플러그인에는 예제(Demo) 파일이 포함되어 있어, 이것을 참고하면 누구나 웹 문서에 어렵지 않게 플러그인 기능을 적용할 수 있음. * UI를 개발할 때 유용한 플러그인 - 검색 사..
6. 2017.05.24 효과 제어 메서드

   * 효과 제어 메서드란? - 효과 또는 애니메이션이 적용된 요소에 동작을 정지시키거나 동작 초기 실행을 지연시키는 등의 제어를 할 수 있는 메서드 - 효과 제어 메서드의 종류 종류 풀이 stop() 현재 실행 중인 효과를 모두 정지시킴. delay() 스택에 대기 중인 애니메이션 효과를 지연시킴. 다시 말하면, 대기 중인 효과가 지정한 시간만큼 지연된 후 발생됨. queue() 선택된 요소의 스택에 대기 중인 큐를 반환하거나 함수에 실행문을 큐로 추가시킬 수 있음. clearQueue() 첫 번째 큐에 해당하는 효과 또는 애니메이션만 실행하고 대기 중인 큐를 모두 삭제함. dequeue() 스택에 쌓인 큐를 모두 제거함. finish() 선택한 요소의 진행 중인 애니메이션이 강제로 완료 시점으로 간 후 ..
7. 2017.05.24 효과 및 애니메이션 메서드

   * 효과 및 애니메이션 메서드 - 문서 객체를 보이게 했다가 숨기려면 스타일(CSS)에 display 속성을 사용해야 함. - 스타일을 이용하면 객체는 단순히 보였다가 숨겨짐. - 하지만 효과(Effect) 메서드를 사용하면 스타일(CSS)을 사용하는 것보다 좀 더 역동적인 동작을 적용하여 객체를 화려하게 숨기거나 보이게 만들 수 있음. - 효과에 애니메이션 메서드까지 사용하면 선택한 요소에 다양한 동작(Motion)을 적용시킬 수 있음 * 효과 메서드 - 효과(Effect) 메서드에는 선택한 요소를 역동적으로 숨겼다가 보이게 만드는 기능을 가진 메서드, 선택한 요소에 동작을 적용시킬 수 있는 애니메이션 메서드가 있음. - 효과 메서드의 종류 종류 풀이 hide() 노출되어 있는 요소를 숨김. show(..
8. 2017.05.24 그룹 이벤트 등록 및 삭제하기

   * 그룹 이벤트 등록 메서드 - 그룹 이벤트 등록 메서드를 상요하면 한 번에 2개 이상의 이벤트를 등록할 수 있음. - 예를 들어, 선택한 요소에 메서드를 한 번만 적용하여 '마우스를 올렸을 때'와 '포커스가 생생되었을 때'와 같이 두 이벤트가 발생되도록 만들 수 있음. - 그룹 이벤트 등록 메서드의 종류 종류 설명 on() 선택한 요소에 한 개 이상의 이벤트를 등록할 수 있음. 그리고 사용 방식에 따라 이벤트를 등록한 이후에도 동적으로 생성된 이벤트를 등록한 요소와 동일한 새 요소에도 이벤트가 등록됨. 이 메서드는 제이쿼리 1.7 버전 이상부터 지원하고 있음. bind() 선택한 요소에 한 개 이상의 이벤트를 등록할 수 있음. delegate() 선택한 요소의 지정한 하위 요소에 이벤트를 등록함. 이벤..
9. 2017.05.23 자주 사용되는 기타 이벤트 메서드

   (1) change() 이벤트 메서드 - 선택한 입력 요소의 값(value)이 새 값으로 바뀌고 포커스가 다른 요소로 이동되었을 때 발생함. - 주로 폼 요소에 입력된 새 값을 스크립트에 이용할 때 사용됨. - 또는 change 이벤트를 강제로 발생시킬 수 있음. - 기본형 1. $(요소 선택).change(function() {...}); // 선택한 입력 요소의 값(value)이 새 값으로 바뀌고 포커스가 다른 요소로 이동되었을 때 이벤트 핸들러에 있는 실행문을 실행함. 2. $(요소 선택).change(); // 선택한 요소에 강제로 change 이벤트 메서드를 발생시킴. - 예) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 사이트 선택 네이버 네이트 ..
10. 2017.05.23 이벤트 등록 메서드 - 키보드 이벤트

    * 키보드 이벤트 - 키보드로만 이벤트를 발생시킬 수 있는 이벤트. - 예를 들어, 키보등 있는 키를 눌렀을 때나 키에서 손을 떼었을 때 이벤트가 발생하는 것. * keydown() / keyup() / keypress() 이벤트 메서드 - keydown()와 keypress() 이벤트 메서드는 선택한 요소에서 키보드 자판을 눌렀을 때 이벤트를 발생시킴. - 또한 강제로도 이벤트를 발생시킬 수 있음. - keydown() 이벤트 메서드는 이벤트가 발생했을 때 이벤트의 객체를 이용하면 눌려진 모든 자판에 대한 고유 키 코드값을 받아올 수 있지만, keypress() 이벤트 메서드는 문자(a~z, !, @, #... 등) 자판에 대한 고유 키 코드값은 받아오지 못함. - 키보드에 눌려진 자판 고유 키 코드값..
11. 2017.05.23 키보드 접근성을 위한 이벤트 등록법

    * 키보드 접근성을 위한 이벤트 등록법 - 키보드 접근성이란, 마우스 이벤트를 등록했을 때 만약 현재 마우스가 없더라도 제이쿼리로 만든 최소한의 기능을 키보드만으로 사용할 수 있도록 보장하는 것을 말함. - 키보드 접근성을 고려하여 마우스 이벤트를 등록할 때는 포커스를 이동할 수 있는 요소들인 와 태그, 또는 입력 요소인 , , 태그에 이벤트를 등록해야 함. [마우스에 대응하는 키보드 이벤트] - 마우스 이벤트를 등록할 때는 마우스에 대응하는 키보드 이벤트도 함께 등록해야 함. - 그래야 마우스가 없는 방문객이 사이트를 방문했을 때 키보드만으로도 접근할 수 있어 방문자가 불편함을 느끼지 않을 수 있음. - 마우스 이벤트에 대응하는 키보드 이벤트 마우스 이벤트 마우스 이벤트에 대응하는 키보드 이벤트 mou..
12. 2017.05.23 이벤트 등록 메서드 - 마우스 이벤트

    * 마우스 이벤트 - 방문자가 사이트에서 마우스를 이용해 취하는 모든 행위를 말함. - 예) 방문자가 지정한 요소에 마우스를 올리거나 클릭하는 등의 행위. (1) click() / dblclick() 이벤트 메서드 - click() 이벤트 메서드는 선택한 요소를 클릭했을 때 이벤트를 발생시킴. - 또는 선택한 요소에 강제로 클릭 이벤트를 발생시킬 때 사용. - 기본형 1. $(요소 선택).click(function() {...}); // 선택한 요소를 클릭할 때마다 이벤트 핸들러에 일련의 실행문을 실행시킴. 2. $(요소 선택).click(); // 마치 사이트 방문자가 선택한 요소를 클릭한 것처럼 선택한 요소에 강제로 click 이벤트가 발생함. - dblclick() 이벤트 메서드는 선택한 요소를 연..
13. 2017.05.23 이벤트 등록 메서드 - 로딩 이벤트 메서드

    * 로딩 이벤트 메서드 - 로딩 이벤트 메서드는 브라우저에서 HTML 문서를 불러올 때 HTML 문서 객체를 로딩(Loading)해 옴. - 이때 지정한 객체의 로딩이 완료되면 이벤트 핸들러가 실행됨. * ready() / load() 이벤트 메서드 - ready()와 load() 이벤트 메서드는 HTML에 지정된 문서 객체의 로딩이 완료된 후 이벤트 핸들러가 실행됨. - 어떤 선택자(Selector)를 사용하려면 먼저 문서 객체를 불러와야 함. - 문서 객체를 먼저 불러와야할 때 ready() 이벤트 메서드를 사용함. - 이때 문서 객체가 완전히 로딩되더라도 이미지나 프레임에 연동된 소스는 그 이후 로딩됨. - load() 이벤트 메서드는 이런 이미지나 프레임에 연동된 소스가 로딩이 완료되면 이벤트 핸..
14. 2017.05.23 이벤트 등록 메서드란?

    * 이벤트 등록 메서드란? - 이벤트 : 사이트에서 방문자가 취하는 모든 행동 - 이벤트 핸들러 : 이벤트가 발생했을 때 실행되는 일련의 실행 코드 - 이벤트 등록 메서드를 사용하면 방문자가 지정한 요소에서 어떠한 특정 동작이 일어났을 때 저장된 실행문을 실행시킬 수 있음. - 이벤트 등록 메서드에는 단독 이벤트 등록 메서드와 그룹 이벤트 등록 메서드가 있음. - 단독 이벤트 등록 메서드 : 한 동작에 대한 이벤트를 등록할 때 사용하는 메서드 - 그룹 이벤트 등록 메서드 : 하나 이상의 이벤트를 등록할 때 사용하는 메서드 - 이벤트 사용의 기본형 버튼 : 이벤트 대상 : 이벤트 등록 메서드 : 이벤트 핸들러 - 이벤트 등록 메서드의 종류 구분 종류 설명 로딩 이벤트 load() 선택한 이미지 또는 프레임..
15. 2017.05.22 객체 조작 메서드 - 객체 편집 메서드

    (3) 객체 편집 메서드 - 선택한 요소를 복제/새 요소를 생성/복제하거나 새로 생성한 요소를 위도한 위치에 삽입/선택한 요소를 삭제하는 기능을 갖고 있는 메서드. - 객체 편집 메서드의 종류 종류 사용법 설명 before() $("요소 선택").before("새 요소"); 선택한 요소 이전 위치에 새 요소 추가 after() $("요소 선택").after("새 요소"); 선택한 요소 다음 위치에 새 요소 추가 append() $("요소 선택").append("새 요소"); 선택한 요소의 마지막 위치에 새 요소 추가 appendTo() $("새 요소").appendTo("요소 선택"); 선택한 요소의 마지막 위치에 새 요소 추가 prepend() $("요소 선택").prepend("새 요소"); 선택한 ..
16. 2017.05.22 객체 조작 메서드 - 수치 조작 메서드

    (2) 수치 조작 메서드 - 속성 조작 메서드와 성격이 비슷하지만, 선택한 요소의 수치 관련된 속성을 변경하거나 기존에 입력된 값을 불러올 때 사용. - 예를 들어, 요소의 너비 또는 높이의 속성값을 바꾸거나 불러올 때 사용. - 수치 조작 메서드 종류 사용법 설명 height() $("요소 선택").height(); $("요소 선택").height(100); 안쪽 여백과 선을 제외한 높잇값을 반환하거나 변환 width() $("요소 선택").width(); $("요소 선택").width(100); 안쪽 여백과 선을 제외한 너빗값을 반환하거나 변환 innerHeight() $("요소 선택").innerHeight() $("요소 선택").innerHeight(300); 안쪽 여백을 포함한 높잇값을 반환하거..
17. 2017.05.22 객체 조작 메서드 - 속성 조작 메서드

    * 객체 조작 메서드 - 객체 조작 메서드는 속성 조작 메서드와 수치 조작 메서드 그리고 객체 편집 메서드로 나눌 수 있음. - 속성 조작 메서드는 요소의 속성을 바꿀 때 사용하고, 수치 조작 메서드는 요소의 너비 또는 높잇값과 같은 수치를 바꿀 때 사용 -> 선택한 요소의 속성을 바꾸는 메서드이므로 성격이 비슷하다고 볼 수 있음. - 객체 편집 메서드는 객체를 생성하거나 삭제 또는 복제할 때 사용하는 메서드임. (1) 속성 조작 메서드 - 요소의 속성을 조작할 때 사용하는 메서드 - 속성 조작 메서드 종류 사용법 설명 html() $("요소 선택").html(); $("요소 선택").html("새 요소"); 선택한 요소의 하위 요소들을 반환하거나 새 요소로 변환함. text() $("요소 선택").te..
18. 2017.05.22 선택자와 함께 사용하면 편리한 메서드들

    [선택자와 함께 사용하면 편리한 메서드들] - 메서드 종류 종류 사용법 설명 is() $("li").is(".visible") 선택한 요소가 보이면 true를 반환함. noConflict() var m=$.noConflict(); m("h1").width(100); 선택자 메서드를 사용할 때 "$"를 앞에 붙여 사용했음. $.onConflict()를 사용하면 "$" 메서드를 변수에 참조시켜 "$"문자 대신 임의의 문자를 지정하여 사용할 수 있음. get() $("li").get(0).style.color="red" 제이쿼리로 선택한 요소에 get(0) 메서드를 적용하면 자바스크립트에 DOM 선택자로 선택한 태그로 인식되어 이전 자바스크립트의 DOM 방식을 따름. each() / $.each() $("lI..
19. 2017.05.22 탐색 선택자 - 콘텐츠 탐색 선택자

    [그 외의 선택자 - 콘텐츠 탐색 선택자] - 콘요소 또는 속성의 포함 여부에 따라 특정 요소를 선택하는 선택자. - 콘텐츠 탐색 선택자의 종류 종류 사용법 설명 $("요소 선택":contains(텍스트)") $("li:contains('내용2')") 요소 중 '내용2'라는 텍스트를 포함하는 요소만 선택 $("요소 선택").contents() $("p").contents() 선택한 요소의 하위 요소 중 가장 가까운 하위 요소를 선택 $("요소 선택:has(요소명)") $("요소 선택").has(요소명) $("li:has('span')") $("li").has('span') 요소 중 을 포함하는 요소만 선택 $("요소 선택:not(:제외 요소)") $("요소 선택").not("제외 요소) $("li:not..
20. 2017.05.22 탐색 선택자 - 속성 탐색 선택자

    [속성 탐색 선택자] - 선택해 온 요소를 기준으로 일치하는 속성의 포함 여부를 따져서 요소를 선택해오는 선택자. - 속성 탐색 선택자 종류 종류 사용법 설명 $("요소 선택[속성]") $("li[title]") 요소 중 title 속성이 포함된 요소만 선택 $("요소 선택[속성=값]") $("li[title='리스트']") 요소 중 title 속성값이 '리스트'인 요소만 선택 $("요소 선택[속성^=텍스트]") $("a[href^='http://']") 요소 중 href 속성값이 'http://'로 시작하는 요소만 선택 $("요소 선택[속성$=텍스트]") $("a[href$='.com']") 요소 중 href 속성값이 '.com'으로 끝나는 요소만 선택 $("요소 선택[href*=텍스트]") $("a[..
21. 2017.05.22 탐색 선택자 - 위치 탐색 선택자

    * 탐색 선택자 - 탐색 선택자를 사용하면 직접 선택자를 이용해 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 정확히 선택할 수 있음. - 탐색 선태자는 선택한 요소 중 요소의 위치를 기준으로 선택하는 위치 탐색 선택자, 요소의 지정된 속성을 기준으로 선택하는 속성 탐색 선택자가 있음. - 그 외의 탐색 선택자로 요소 내에서 콘텐츠의 포함 여부를 따져 선택하는 콘텐츠 탐색 선택자, 선택한 요소를 한 번 더 필터링할 수 있는 필터링 선택자 등이 있음. [위치 탐색 선택자] - 기본 선택자로 선택한 요소 중 요소의 위치 또는 인덱스 번호를 이용하여 특정 요소를 좀 더 정확히 선택. - 위치 탐색 선택자 종류 종류 사용법 설명 $("요소 선택:first") $("요소 선택").first() $("li:fi..
22. 2017.05.22 직접 선택자와 인접 관계 선택자

    * 제이쿼리의 직접 선택자 및 인접 관계 선택자 - 앞으로 '문서 객체'라는 말을, '요소' 또는 '태그'라 표현하겠음. - 자바스크립트의 DOM(Document Object Model) 서낵자는 IE 8 이하와 그 외의 브라우저 사이에 호환성에 대한 문제점이 있었음. - 하지만 제이쿼리는 이러한 호환성과 관련된 문제들을 모두 해결함. - 제이쿼리 선택자는 자바스크립트의 DOM 선택자보다 사용이 편리하고 쉬움. - 제이쿼리의 선택자에는 크게 직접 선택자와 인접 관계 선택자로 나눌 수 있음. - 직접 선택자에는 전체 선택자, 아이디 선택자, 클래스 선택자, 요소명(tag Name) 선택자, 그룹 선택자가 있음. - 인접 관계 선택자에는 부모 요소 선택자, 자식 요소 선택자, 형(이전) 요소 선택자, 동생(..
23. 2017.05.22 선택자 (Selector)

    * 선택자란? - 선택자(Selector)를 사용하면 지정한 문서 객체를 선택해 올 수 있음. - 제이쿼리 선택자에는 직접 선택자, 이미 선택한 요소를 기준으로 근접한 요소의 관계를 따져 선택하는 인접 관계 선택자, 선택된 요소 중 더 세밀하게 선택할 수 있는 탐색 선택자가 있음. * 제이쿼리 선택자 사용 준비하기 - 선택자를 사용하기 위해서는 문서 객체가 필요함. 1. 잘못된 적용 1 2 3 4 5 6 7 8 9 10 11 12 13 14 잘못된 선택자 적용 문단 요소보다 먼저 실행됨 문단 요소 Colored by Color Scripter cs -> 자바스크립트가 인터프린터 언어이기 때문에 제이쿼리가 먼저 실행되고 난 후 영역에 문서 객체가 로딩됨. -> 선택자가 먼저 실행되어 문서 객체를 선택할 수..
24. 2017.05.22 제이쿼리란?

    * 제이쿼리란? - 제이쿼리는 모질라 사의 자바스크립트 개발자였던 존 레식(John Resig)이 창시함. - 제이쿼리는 자바스크립트를 이용해 만든 라이브러리 언어(자바스크립트로 만들어진 다양한 한수들의 집합). - 제이쿼리에서 개선된 사항 1) 호환성 문제점 해결 - 자바스크립트는 호환성(크로스 브라우징)이 떨어짐. - 자바스크립트에서는 이벤트 객체를 생성할 때 IE 브라우저 8 이하 버전과 그 외의 브라우저(파이어폭스, 크롬, 사파리, 오페라, IE 9 이상 버전)는 코드를 실행했을 때 그 결과에 많은 차이가 있었음. - 제이쿼리에서는 이 문제들을 모두 해결함. 2) 쉽고 편리한 애니메이션 효과 기능 구현 - 자바스크립트로 애니메이션 효과를 구현하려면 많은 코드를 사용해야 했고, 개발하는 데도 많은 ..