프로그램/jQuery Mobile30 30. jQuery Mobile, AJAX 통신 Index 28. 페이지 트랜지션 이벤트 29. 페이지 초기화 이벤트 30. jQuery Mobile, AJAX 통신 jQuery Mobile은 첫(홈) 페이지는 서버에서 풀브라우징으로 실행한다. 그 이후 부터 다른 페이지에 대한 요청은 jQuery Mobile이 내부적으로 AJAX통신으로 처리해 DOM객체에 추가해 준다. 개발자는 AJAX를 위한 코드를 작성할 필요없이 가져오고자 하는 결과물에 해당하는 HTML만 작성하면 된다. 다음은 응답페이지에 대한 기본 형태이다. //페이지 내용 [영어회화] Be my guest. 사양하지 마세요 2014. 1. 5. 29. 페이지 초기화 이벤트 Index 27. 페이지 이동 전에 발생하는 pageremove 이벤트 28. 페이지 트랜지션 이벤트 29. 페이지 초기화 이벤트 30. jQuery Mobile, AJAX 통신 jQuery Mobile은 웹앱에서 페이지를 초기화 할 수 있도록 초기화 이벤트를 제공한다. 초기화 이벤트는 pagebeforecreate, pagecreate, pageinit 가 있으면 3개 이벤트는 페이지 로드 이벤트인 pagebeforeload 와 pageload 사이에 순차적으로 발생한다. 이벤트 핸들러 바인딩 $(document).bind("mobileinit", function(){ $("외부 페이지 아이디").live("pagebeforecreate", function(event){ } $("외부 페이지 아이디").. 2014. 1. 3. 28. 페이지 트랜지션 이벤트 Index 26. 페이지 로드 이벤트 27. 페이지 이동 전에 발생하는 pageremove 이벤트 28. 페이지 트랜지션 이벤트 29. 페이지 초기화 이벤트 30. jQuery Mobile, AJAX 통신 페이지 트랜지션 이벤트는 페이지 이동시에 발생한다. 발생하는 이벤트로는 pagebeforehide, pagehide, pagebeforeshow, pageshow 이벤트가 있다. 페이지가 사라질 때 pagebeforehide, pagehide 이벤트가 발생하고 새로운 페이지가 나타날때 pagebeforeshow, pageshow 이벤트가 발생한다. $(document).bind("mobileinit", function(){ $("#페이지아이디").live("pagebeforeshow", function.. 2014. 1. 2. 27. 페이지 이동 전에 발생하는 pageremove 이벤트 Index 25. mobileinit 이벤트 26. 페이지 로드 이벤트 27. 페이지 이동 전에 발생하는 pageremove 이벤트 28. 페이지 트랜지션 이벤트 29. 페이지 초기화 이벤트 jQuery Mobile 은 DOM에 추가된 외부 페이지에서 다른 페이지로 이동 시에 해당 페이지를 DOM에서 제거한다. 이 때, 페이지가 DOM에서 제거되기 직전에 pageremove 이벤트가 발생한다. 주로 해당 페이지가 제거되기 전에 가지고 있는 값을 보존하기 위해서 사용된다. $(document).bind("mobileinit", function(){ $("#페이지아이디").live("pageremove", function(event"{ //페이지 이동 전에 처리하고자 하는 내용 }); }); [영어회화] O.. 2014. 1. 1. 26. 페이지 로드 이벤트 Index 24. flip toggle 양식 25. mobileinit 이벤트 26. 페이지 로드 이벤트 27. 페이지 이동 전에 발생하는 pageremove 이벤트 28. 페이지 트랜지션 이벤트 페이지 로드 이벤트는 웹앱 DOM에 외부 페이지가 통합될 때 발생한다. 이벤트 발생 순서는 다음과 같다. pagebeforeload : 외부 페이지가 통합되기 직전에 발생 pageload : 웹앱 DOM에 외부 페이지 통합이 완료되면 발생 pageloadfailed : 통합에 실패하면 발생 (서버 접속 에러 또는 서버 실행 에러시 발생) 페이지 핸들러 등록 $(document).bind("mobileinit", function(){ $(document).bind("pagebeforeload", function(.. 2013. 12. 30. 25. mobileinit 이벤트 Index 23. checkbox, radio 버튼 양식 24. flip toggle 양식 25. mobileinit 이벤트 26. 페이지 로드 이벤트 27. 페이지 이동 전에 발생하는 pageremove 이벤트 mobileinit 이벤트는 웹앱이 시작되자마자 발새하는 이벤트로 jQuery Mobile 라이브러리가 로딩되자마자 발생한다. 따라서, mobileinit 이벤트 핸들러는 jQuery Mobile 라이브러리가 로딩되기 전에 바인딩 되어야 한다. mobileinit 이벤트 핸들러에서는 주로 jQuery Mobile의 기본 설정 값을 변경할 때 사용된다. jQuery Mobile의 주요 기본 설정 내용은 다음과 같다. 기본 설정 내용 설명 값 defaultPageTransition 페이지 트랜지션 .. 2013. 12. 29. 24. flip toggle 양식 Index 22. select 양식 23. checkbox, radio 버튼 양식 24. flip toggle 양식 25. mobileinit 이벤트 26. 페이지 로드 이벤트 플립 토글(Flip Toggle)은 한쪽으로 밀어서 선택하도록 하는 UI이다. 주로 on/off 와 같이 둘 중 하나를 선택하는 경우에 사용될 수 있다. jQuery Mobile은 태그에 data-role="slider" 속성을 추가해서 플립 토글 버튼을 만든다. 단, 이때 은 두개만 지정해야 한다. On/Off : OFF ON 에 사용할 수 있는 data-* 속성 data-* 속성 설명 값 data-theme 체크박스 테마 swatch letter (a-z) data-track-theme 트랙 테마 (off 테마) swatch .. 2013. 12. 28. 이전 1 2 3 4 5 다음
