본문 바로가기

jQuery

[jQuery] 제이쿼리를 사용한 드래그, 터치 이미지 슬라이드 샘플 [jQuery] 제이쿼리를 사용한 드래그, 터치 이미지 슬라이드 샘플 모바일 기기에서 터치로 동작하는 이미지 슬라이더는 이미 한번 작업한 적이 있었습니다. 당시에는 모바일웹 초창기라 그것도 괜찮았었는데... 이제는 반응형 웹이라고 해서 웹상에서 드래그까지 지원하는 이미지 슬라이드가 필요하게 되었네요. 그래서 급 공부(?)를 했습니다. 그 결과로 샘플 페이지를 작업해서 기록의 목적으로 저장해봅니다. 관심있으신 분들은 다운로드 받아서 분석하시면 좋으실 것 같습니다. 2015.3.23.
CSS3로 구현한 여러 애니메이션 효과를 간단하게 구현할 수 있는 Magic Animations CSS3 CSS3로 구현한 여러 애니메이션 효과를 간단하게 구현할 수 있는 Magic Animations CSS3 간결하면서도 다이나믹한 효과들이 여러가지 있네요. 이번에 사용해봐야겠습니다.ㅋ 2015.3.11.
CSS와 jQuery로 구현한 3D 박스효과 Turnbox.js CSS와 jQuery로 구현한 3D 박스효과 Turnbox.js 언제가 기회가 되면 한번 사이트에 적용해보고 싶네요 ^^; 2015.3.10.
이미지내 지정한 포커스에 따라 이미지사이즈가 변경되는 반응형 jQuery 플러그인 Intelligent cropping for flexible image containers 유연한 이미지 컨테이너 반응형 플러그인 사실 이 기능을 찾기 위해 검색을 한 것은 아니지만, 아주 유요한 플러그인을 우연히 발견하여 이렇게 기록용으로 포스팅합니다. 간략하게 설명하자면, 반응형 사이트에서 사이트내에서 사용하는 이미지가 자동으로 크롭되잖아요. 이때 이미지의 정렬은 보통 left, right, center 인데요. 이 플러그인은 이미지내에 포커스 좌표를 지정하여, 그 포커스를 center로 정렬하는 플러그인입니다. 아래 이미지를 예로 들면, 넓은 창일때의 이미지 좁은 창일때의 이미지 도마뱀의 눈에 포커스를 맞추어 이미지가 반응형으로 크롭된다는 것이지요. 이 기능이 유용한지 안한지에 대해서는 모바일 사이..
[jQuery] 제이쿼리를 사용한 간단한 그래프 플러그인, jqBarGraph Plugin [jQuery] 제이쿼리를 사용한 간단한 그래프 플러그인, jqBarGraph Plugin 사이트 작업을 하다보면 그래프를 표현해야 할때가 있습니다. 이전에는 그냥 이미지로 대체했었는데, 동적으로 구현하기 위해서는 스크립트 사용이 필수불가결이지요. 여러가지 그래프 플러그인이 있습니다. 모두는 아니지만 그래도 많이 검색해보고 여러가지 플러그인을 테스트를 해보았는데요. 이 플러그인 처럼 심플한 것은 못 봤네요 ㅋ 추천합니다. ㅋ 아래 파일은 여러 버전중 다운받은 js 중 하나입니다. ㅎ
여러가지 타일 효과 애니메이션을 위한 jQuery 플러그인 여러가지 타일 효과 애니메이션을 위한 jQuery 플러그인
[jQuery] 제이쿼리 jQuery와 prototype.js 충돌 해결법 [jQuery] 제이쿼리 jQuery와 prototype.js 충돌 해결법 사실 jQuery 와 prototype.js 가 충돌나는지도 몰랐었다. 문법에는 오류가 없는데 왜 계속 스크립트 오류가 날까?... 그래서 혹시나 충돌이라고 검색을 해보니 주르륵~~ 인터넷에서 알려주는 해결방법은 이러하다. 해결방법 jquery 라이브러리를 먼저 선언하고 아래 부분 코드를 넣은 뒤 다시 prototype.js를 선언한다 충돌의 원인은 식별자 '$' 같은 방식으로 다른 문법으로 사용하기 때문이다. 중간에 들어간 코드는 이 제이쿼리를 권한을 없애고 다른 변수로 처리를 한 것이다. jq$는 변수니까 입맛에 바꾸어도 된다. 그 다음, 이후에 나오는 제이쿼리 명령어에는 jq$라는 변수를 사용해야 한다. 최종적으로는 제이쿼리..
부트스트랩 Bootstrap 혼자 공부하기 좋은 사이트, 그냥 한번 정독해보세요. 읽고 또 읽고, 보고 또 보고 해야 할 것 같아요 ㅎ 언제부터인가 사이트를 개발하는 과정에서 어깨넘어로 부트스트랩를 활용해라. 부트스트랩을 공부하라. 부트스트랩을 사용하면 작업속도가 빠르다. 라는 말들을 듣곤 했습니다. 그래서 그 당시 잠깐 검색을 해보니 하나의 사이트 템플릿이라는 사람들도 있고, 제이쿼리 묶음이라는 사람들도 있고, 그렇더라구요. 모두다 틀린 말은 아닙니다. 그리고, 필요성을 잘 느끼지 못하다가 약간 여유가 생겨 이번 기회에 부트스트랩이 뭔가 한번 공부해보기로 했습니다. 책을 살까? 학원을 다닐까? 생각해보았지만 먼저 인터넷에서 정보를 모아보자 해서 찾은 사이트~! 영어로 된 원문사이트도 있고, 한글로 번역된 사이트도 있었습니다. http://bootstrapk.com/BS3/ 약간은 아..
jQuery AJAX ajax() Method jQuery AJAX ajax() Method [예제] AJAX 요청을 사용하여 div 엘리먼트의 텍스트를 변경시킵니다. AJAX를 사용하여 이 부분의 텍스트를 바꿉니다. 내용바꾸기 [정의 및 사용법] ajax() 메소드는 AJAX(비동기식 HTTP) 요청을 수행할 때 사용합니다. 모든 jQuery AJAX 메소드는 ajax() 메소드를 사용합니다. 이 메소드는 다른 메소드로는 할 수 없는 요청들을 수행할 때 사용합니다. [문법] $.ajax( { name:value, name:value, ... } ) 파라메터는 한 개 이상의 name/value 쌍으로 표시합니다. 아래는 사용가능한 name/value입니다. Name Value/Description async Boolean 값 요청이 비동기식으로 처리..
jQuery ETC Methods References jQuery ETC Methods References Method Description data() 선택된 엘리먼트에 데이터를 추가하거나, 선택된 엘리먼트로부터 데이터를 얻습니다. each() selector와 일치하는 각각의 엘리먼트에 수행할 함수를 명시합니다. get() selector와 일치하는 DOM 엘리먼트를 얻습니다. index() 선택된 엘리먼트 중에서 특정 엘리먼트의 index 값을 찾을 수 있습니다. $.noConflict() 자신이 원하는 특정 이름으로 $표시를 대체할 수 있습니다. removeData() data()메서드를 사용하여 이전에 설정된 데이터를 삭제합니다. size() selector와 일치하는 DOM 엘리먼트 개수를 리턴합니다. toArray() [출처 - http://b..
jQuery AJAX Methods References jQuery AJAX Methods References Method Description $.ajax() AJAX 요청을 수행합니다. ajaxComplete() AJAX 요청을 완료했을 때 수행할 함수를 명시합니다. ajaxError() AJAX 요청을 완료했으나 오류가 있을때 수행할 함수를 명시합니다. ajaxSend() AJAX 요청을 보냈을 때 수행할 함수를 명시합니다. $.ajaxSetup() AJAX 요청하기 위해 디폴트 값을 설정합니다. ajaxStart() 가장 첫 AJAX 요청을 시작할 때 수행할 함수를 명시합니다. ajaxStop() 모든 AJAX 요청이 완료됐을 때 수행할 함수를 명시합니다. ajax.Success() 모든 AJA 요청이 성공했을 때 수행할 함수를 명시합니다. $.get..
jQuery CSS Methods References jQuery CSS Methods References MethodDescriptionaddClass()선택된 엘리먼트에 한 개 이상의 class를 추가합니다.css()선택된 엘리먼트에 한 개 이상의 style 속성(property)를 설정합니다.hasClass()선택된 엘리먼트가 특정 class를 가지고 있는지 여부를 체크합니다.height()선택된 엘리먼트의 높이(height)를 설정하거나 리턴합니다.offset()선택된 엘리먼트의 위치를 설정하거나 리턴합니다. (문서상의 위치)offsetParent()특정위치에 있는 바로 위의 부로 엘리먼트를 리턴합니다.position()가장 처음으로 선택된 엘리먼트의 위치를 리턴합니다. (부모엘리먼트의 위치)removeClass()선택된 엘리먼트에서 한 개 이상의 ..
jQuery HTML Methods References jQuery HTML Methods References html() 메소드를 제외한 아래의 모든 메소드는 HTML / XML 문서에서 작동합니다. Method Description addClass() 선택된 엘리먼트에 한 개 이상의 class를 추가합니다. (CSS) after() 선택된 엘리먼트 뒤에 또 다른 내용을 추가합니다. (내용이 분리됨) append() 선택된 엘리먼트의 끝에 내용을 추가합니다. (내용이 이어짐) appendTo() 선택된 엘리먼트의 끝에 내용을 추가합니다. (내용이 이어짐) attr() 선택된 엘리먼트에 속성과 값을 설정하거나 리턴합니다. before() 선택된 엘리먼트 앞에 내용을 추가합니다. clone() 선택된 엘리먼트를 복사합니다. detach() 선택된 엘리먼트를 제..
jQuery Effects Methods References jQuery Effects Methods References MethodDescriptionanimate()선택한 엘리먼트를 clearQueue()선택한 엘리먼트에 대해서 아직은 실행되지 않은 대기열에 있던 모든 함수를 멈춥니다.delay()선택한 엘리먼트에 대해서 대기열에 있는 모든 함수의 실행을 딜레이시킵니다.dequeue()선택한 엘리먼트에 대한 다음 대기열 함수를 실행시킵니다.fadeIn()선택한 엘리먼트에 대해서 투명도를 점차적으로 변화시킵니다. (hidden에서 visible 상태로 변화)fadeOut()선택한 엘리먼트에 대해서 투명도를 점차적으로 변화시킵니다. (visible에서 hidden 상태로 변화)fadeTo()선택한 엘리먼트에 대해서 특정 투명도까지 투명도를 점차적으로 변화시킵니다...
jQuery Selector References jQuery Selector References Selector사용예선택되는 요소*$("*")모든 엘리먼트#id$("#lastname")id=lastname인 엘리먼트.class$(".intro")class=intro인 엘리먼트element$("p")모든 p 엘리먼트.class.class$(".intro.demo")class가 intro 및 demo인 모든 엘리먼트 :first$("p:first")첫 번째 p 엘리먼트:last$("p:last")마지막 p 엘리먼트:even$("tr:even")모든 짝수번째의 tr 엘리먼트:odd$("tr:odd")모든 홀수번째의 tr 엘리먼트 :eq(index)$("ul li:eq(3)")list 에서 4번째 엘리먼트:qt(no)$("ul li:gt(3)")3보다 큰 인..
[HTML5+CSS3]제이쿼리(jQuery)와 Swipe JS 파일을 활용한 터치슬라이드 갤러리 소스 터치 슬라이드 갤러리 소스 swipejs.com 에서 받은 자바스크립트 라이브러리를 사용한 소스입니다. 버튼으로도 이미지를 슬라이드 시킬 수 도 있고, 터치로도 슬라이드 시킬수 있답니다. ㅋ 다시한번, 말씀드릴께요 슬라이드 모션을 확인하기 위해서는 터치기반 디바이스에서 확인하셔야 해요. ㅎㅎ 일단, 웹에서 확인하기 위해서 버튼은 넣어놨구요 ㅎㅎ 아래 파일을 다운 받으셔서 분석하시기 바랍니다. 참조 - http://ryuseunghyun.tistory.com/2750