모바일웹60 [책] p250 위치 정보 독자 분들께서 문의 해주신 jQuery Mobile 완벽가이드 책의 위치 정보 관련 내용입니다. 문의) p253의 위치 정보 가져오기가 성공했을 경우에 현재 위치를 지도에 보여줘야 하는데, 초기 변수 값의 위도와 경도의 위치로만 지도에 나타납니다. 답변) 1. 위치 정보 가져오기가 성공했는지 확인해 주세요 위치 정보를 가져오기가 성공했을 때 호출되는 콜백 함수를 아래와 같이 수정합니다.지도 화면이 뜨기 전에 alert 창으로 위도와 경도의 값이 화면에 보여진다면 정상적으로 위치 정보를 가져온 것입니다. function geoSuccess(position){//alert("성공");latitude = position.coords.latitude;longitude = position.coords.longit.. 2012. 5. 12. [책] p271 내부 스크롤 (nested scroll) 독자 분들께서 문의 해주신 jQuery Mobile 완벽가이드 책의 내부 스크롤 관련 내용입니다. 문의) p271의 내부 스크롤 내용 중에서 data-scroll='x'의 경우 스크롤이 원래상태로 돌아가 버립니다.스크롤된 상태를 유지 할려면 어떻게 하면 되는지요? 답변) 1. 예제 파일 : cp4_scroll.html2. 아래와 같이 x 축 스크롤 부분에 class="scrollBtn" 를 첫번째 태그에서 삭제하시고 두번째 div 태그에 추가해주세요 button A...button L 3. CSS를 정의하고 있는 scroll.css 파일을 열어 주시고,4. 아래와 같이 scrollBtn 속성을 변경해 주세요. .scrollBtn{height: 70px;width: 1400px;} 5. 웹페이지에서 다시 .. 2012. 5. 12. [책] jQuery Mobile 완벽 가이드 [jQuery Mobile 완벽 가이드] 저자: 김철우출판사: 디지털북스출간일 : 2012년 4월 10일 작년 말부터 준비하던 책이 드디어 온라인 서점에서 판매를 시작했습니다.^^ 고생도 많이 했지만, 참 뿌듯한 일이였던 것 같습니다. 주위에서도 같이 기뻐해주시고 응원해주신 덕분에 이런 결과가 있을 수 있었던 것이라고 생각합니다. 특히나, 제가 책을 쓴답시고 방에서 노트북과 씨름하고 있을 때 엄청난 인내심으로 내조를 해준 우리 와이프에게 너무 사랑한다는 말을 전합니다. 국내 서적중에서는 단독으로 jQuery Mobile에 대해서 다룬 가장 첫번째 책이 아닌가 싶습니다. 그 동안에는 이런 저런 모바일 기술들과 합쳐서 백과사전 같은 책들이 몇 권 나왔지만, 다루는 내용이 조금만 관심이 있더라도 알 수 있는 .. 2012. 4. 7. jQuery Mobile 1.0.1 released 최근 정식 버젼 이후 첫번째 업데이트가 공개되었습니다. 변경 사항은 다음과 같습니다. 1. 삼성의 bada 플래폼과 Dolphin browser 지원 2. 중국에서 인기 브라우저인 UC browser 지원 삼성 바다도 지원해주다니 jQuery Mobile은 어느 브라우저에서도 동일하게 동작하는 보편화된 프레임워크가 될 것 같습니다. 좀 천천히 업데이트 해도 좋으련만.^^ 2012. 1. 28. Appspresso(앱스프레소) - Pim (연락처) 중요한 연락처 정보를 제어하는 예제입니다. 아~ 아이폰 처음 사고 동기화하면서 연락처 엄청나게 날렸었던 아픈 기억이.ㅋㅋ 이번에도 index.html에서 부터 따라가 보겠습니다. pim.html 로 가보면, 아래와 같이 세개의 항목으로 구성되어 있습니다. Calendar와 Task 기능은 아직 제공되지 않네요. 우리의 목적인 연락처 링크 페이지를 따라가 보겠습니다. 하나의 리스트 항목만 덩그러니 있군요. 이벤트도 없는듯 하니 해당 페이지와 연결된 js파일을 찾아보겠습니다. js/pim-contract.js가 보이니 열어봅니다. 상당히 긴 getContacts()함수가 정의되어 있군요. 내용은 리스트를 초기화하고 연락처 api를 호출해서 결과값을 배열로 받아옵니다. 10개의 연락처를 가져와 이름과 전화번호.. 2011. 8. 13. Appspresso(앱스프레소) - DeviceInteraction(모바일기기 동작) 모바일 단말기의 비프음, 진동, 라이트등을 제어하는 방법의 예제입니다. 현재 아이폰은 진동기능만 제공되고 있고, 안드로이드에서는 진동과 비프음기능이 가능하군요. 그럼, 예제소소를 보겠습니다. 첫 화면 페이지인 index.html에서 두번째 예제가 링크되어 있는 device-interactin.html 파일을 따라가 봅니다. 4가지 리스트로 구성되어 있는데 라이트와 배경화면 기능은 아직 제공되지 않고 있습니다. 아이폰에서는 진동만 되니 vibrator 링크 페이지를 열어보겠습니다. 진둥 기능의 시작과 정지 버튼으로 구성되어 있고, 함수를 호출하고 있으니, 함수가 정의되어 있는 js 파일을 현재 페이지의 id를 참고해 찾아갑니다. js/device-interaction-vibrate.js가 보이네요. 이 파.. 2011. 8. 12. jQuery Mobile Beta 2 released jQuery Mobile 베타2 버젼이 발표되었습니다. 다음달경에 베타3가 발표될 예정이라고 안내하고 있네요. 업그레이드된 주요 내용을 간단히 살펴봤습니다. 1. 지원 플레폼 추가 기존 지원가능한 플레폼에서 안드로이드2.3, 허니폰 타블렛, HP 팝 webos 3.0, 노키아 S60 지원이 추가되었네요. 2. 위젯의 decoupled 여러 위젯이 디커플링 빌드가 가능합니다. 그중에 특히 page 속성인 header, content, footer가 필요하지 않는 경우에 삭제가 가능해졌습니다. 3. 모든 위젯을 한번에 향상시킬 수 있는 "create"이벤트 신규 추가 페이지가 로딩될때 JQM은 마크업 위젯들을 찾아 향상된 버젼으로 변화시킵니다. 그런데, 이런 향상기능을 개별 위젯에 적용할 수 없어서 refr.. 2011. 8. 4. jQuery Mobile - API media, active state 알파 버전에서 있었던 Media Query Helper Classes는 beta 버전으로 오면서 사용이 중지 되었다고 합니다. CSS3를 사용해서 할 것을 추천한다고 되어있네요. 이 내용은 orientation과 breakpoint와 $.mobile.media()를 사용한 미디어 쿼리로 구성되어 있는데, 추천되어진 것처럼 CSS3로 충분히 구현 가능하니, 자세한 내용은 기술하지 않을 생각입니다. 관심 있으신 분은 아래 링크에서 보시면 될 것 같습니다. http://jquerymobile.com/demos/1.0b1/docs/api/mediahelpers.html Global “Active” state jQuery Mobile 프레임워크는 어떤 요소가 선택되었을 때 “active”라고 불려지는 테마를 사용.. 2011. 7. 18. jQuery Mobile - API Methods (API 함수) jQuery Mobile은 사용자 어플리케이션에서 사용할 수 있도록 $.mobile.object의 여러 methods와 properties를 제공합니다. 상세한 인수와 옵션은 JQM 홈페이지에서 참고하세요. http://jquerymobile.com/demos/1.0b1/docs/api/methods.html $.mobile.changePage(method) 페이지 전환시 프로그램적으로 변경합니다. 이 매소드는 폼을 전송하거나 링크를 클릭할 때 발생하는 페이지 로딩이나 페이지 전환시 내부적으로 사용됩니다. // 페이지 이동시 전환효과는 slideup이 되며, about/us.html 페이지로 이동됩니다. $.mobile.changePage( "about/us.html", { transition: "sli.. 2011. 7. 15. jQuery Mobile - API Configuring Defaults(기본 설정 변경) JQM은 다른 jquery와 jquery ui를 사용하는 프로젝트와 다르게, 많은 마크업들의 UI를 로드되기 전에 자동적으로 변형합니다. (document.ready 이벤트가 호출되기 전). 이런 변형은 jQuery Mobile의 디폴트 설정을 기반으로 적용됩니다. 이러한 설정을 쉽게 셋팅할 수 있는 방법에 대해 알아봅니다. The mobileinit event jQuery Mobile이 실행될 때, document 객체의 mobileinit 이벤트를 호출하게 됩니다. 이 mobileinit 이벤트를 바인드 함으로서 JQuery Mobile의 디폴트 설정들을 오버라이드 할 수 있습니다. $(document).bind("mobileinit", function(){ //이곳에 변경하고 싶은 설정을 셋팅합니다.. 2011. 7. 8. 이전 1 2 3 4 ··· 6 다음
