jQuery 썸네일형 리스트형 [FullCalendar] 풀 캘린더와 구글 캘린더 연동하기 01. 풀 캘린더에서 구글 캘린더의 데이터 값을 받아다 사용하기 위해서는 풀 캘린더에서 제공하는 gcal.js 라이브러리가 필요하다. 02. 구글 캘린더의 캘린더 세부정보에서 캘린더 주소를 복사해 오자. 03. 위에서 복사한 캘린더 주소를 사용하여 아래코드의 googleCalendarId에 기입하는 식으로 아래 코드를 작성해 보자. calendar_google.php 풀캘린더::구글캘린더 loading... 04. 출력결과는 아래와 같이 한국, 미국, 일본의 국가 휴일이 나타나는것을 확인 할 수 있다. 더보기 [jQuery] Datepicker(캘린더) 위치 수정 참고 : 서제떼의블로그 아래와 같이 jQuery 다이얼로그 창에서 jQuery Datepicker를 사용중에 Datepicker 캘린더의 위치가 텍스트박스 바로 아래가 아닌 이상한 곳에서 나타나는 에러가 발생했다. #01. 에러 상황 기존코드 jQuery("#calendar").datepicker({}) #02. 에러 해결방법 수정코드 jQuery("#calendar").datepicker({ beforeShow: function(input) { var i_offset = jQuery(input).offset(); // 클릭된 input의 위치값 체크 setTimeout(function(){ jQuery("#ui-datepicker-div").css({"left":i_offset}); // datepic.. 더보기 [Masonry] Masonry 실행 예제 파일첨부 : ■ Masonry 실행 예제 ※ Masonry 플러그인 메소드 -. appended : 기존영역에 블록을 새롭게 추가한다. -. destroy : 블록을 완전히 제거한다. -. layout : 모든 블록 요소를 배치한다. layout 항목의 크기를 변경하고, 모든 항목을 다시 배치 할 필요가 있을경우 유용하다. -. reloadItems : 블록을 재배치 한다. -. remove : 블록의 DOM 요소를 제거한다. 01. 아래 masonry_deepen.html은 appended와 remove 메소드 효과를 적용한 예제이다. masonry_deepen.html consectetur adipiscing elit Lorem ipsum dolor sit amet Vivamus tempus mole.. 더보기 [jQuery] 이미지 슬라이드 만들기 파일첨부 : ■ jQuery 이미지 슬라이드 만들기 01. 캔버스와 구성요소. 자바스크립트와 jQuery를 사용해서 슬라이드를 시각적 효과를 구현하여 적용하려면 다음 세 가지 사항을 CSS로 미리 지정해야 한다. · 캔버스의 width 스타일 속성과 height 스타일 속성은 반드시 지정한다. · 캔버스의 position 스타일 속성은 Relative로 지정한다. · 캔버스의 overflow 스타일 속성은 hidden으로 지정한다. · 구성 요소의 position 스타일 속성은 Absolute로 지정한다. 02. 이미지 슬라이더의 HTML 태그 구성 jQuery 슬라이더에는 다음과 같은 특성이 있다. · slider_panel : 이미지를 담는 패털로, 움직이며 이미지가 전환되는 효과를 만든다. · sl.. 더보기 [jQueryMobile] jQueryMobile의 초기화 이벤트 ■ mobileinit 를 이용한 이벤트 jQuery Mobile의 mobileinit 이벤트는 페이지가 형성될때 실행된다. 이때 주의할 점은 jQuery Mobile과 관련된 자바 스크립트 파일을 읽을 때 실행하는 이벤트이므로 mobileinit 이벤트가 실행된 이후에 jQueryMobile.js파일이 추가되어야 한다. 01. mobileinit 이벤트의 실행 방법은 아래와 같다. mobileinit_event.php MOBILE Hello Wicked FOOTER 02. 출력결과는 아래와 같다. ■ 뒤로가기 버튼 자동으로 생성하기 01. 일반적으로 mobileinit 이벤트가 발생할 때 mobile 페이지의 기본 설정을 바꾼다. 아래와 같이 뒤로 가기 버튼을 따로 입력하지 않고 자동으로 생성하여 사용.. 더보기 이전 1 2 3 4 5 ··· 21 다음
