본문 바로가기

웹앱63

[책] 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(앱스프레소) - curl (Url 통신) Url 기반의 통신 기능을 제공하는 예제입니다. Ajax 통신과 비슷하면서 json기반의 요청, 응답을 처리할 수 있습니다. index.html부터 살펴보겠습니다. 5번째 항목의 링크를 따라가 보겠습니다. 요청 url과 전송하려는 text 구문을 입력 받습니다. 요청 버튼을 클릭하면 curlDemo()함수를 호출하는군요. js/extapi-curl.js 를 열어보면 해당 함수가 정의되어 있습니다. 옵션 객체를 선언하여 요청할 데이터를 셋팅하고, 콜백함수와 함께 인수로 사용됩니다. ax.ext.net.curl API를 이용하여 외부 url로 요청을 하고 그 걸과 객체를 받아옵니다. 서버에서 응답을 json객체로 넘겨주면 json 파서를 이용해서 사용하는 것도 가능합니다. 시뮬레이터에서 실행시킨 아이폰의 화.. 2011. 9. 3.
Appspresso(앱스프레소) - Upload (파일 업로드) 이번에는 단말기에 파일을 서버로 업로드 하는 예제입니다. 앞에서 다운받은 이미지 파일을 서버로 업로드 해보겠습니다. 처음 index.html 입니다. 세번째 항목인 업로드 링크를 따라가 보겠습니다. 파일을 업로드할 서버 url과 업로드할 대상 파일을 셋팅합니다...셋팅되어 있네요.^^ 업로드 버튼을 클릭하게 되면 uploadFile() 함수를 호출하는군요. js/extapi-upload.js 파일을 열어보면, 해당 함수가 정의되어 있습니다. url과 file을 선언하고, 간단하게 ax.ext.net.upload API를 이용하여 업로드가 가능하군요. 시뮬레이터에서 실행한 아이폰 화면을 보겠습니다. 2011. 9. 2.
Appspresso(앱스프레소) - Download (파일 다운로드) 외부 파일을 다운로드 하는 예제를 살펴 보겠습니다. 이미지 파일을 하나 다운받아서 저장하고 파일을 미리보기가 가능합니다. 최초 시작인 index.html 부터 보겠습니다. 세번째 항목인 다운로드 링크를 따라갑니다. 파일을 다운로드 할 경로와 저장할 경로를 설정하는 화면입니다. 다운로드 버튼을 클릭하면 downloadFile()함수를 호출하게 되는 군요. js/extapi-download.js 를 열어보면 다운로드 함수가 정의되어 있습니다. ax.ext.net.download API를 이용하여 url의 파일을 다운로드하고, 콜백 함수를 호출합니다. 귀엽게도 슬라이더를 이용해서 다운로드 상태를 표시해 주도록 구현되어 있네요. 파일 폴더 열기 버튼을 클릭하면 아래 함수가 호출되면서, 페이지 이동과 동시에 do.. 2011. 9. 1.
Appspresso(앱스프레소) - Cross Domain Ajax (크로스 도메인 Ajax) 외부 도메인와 Ajax 통신하는 예제입니다. 날코딩으로 이를 구현하려면 많은 내공이 필요한데, 아주 간단하게 사용할 수 있도록 기능을 지원해주고 있습니다. 최초 index.html부터 살펴보겠습니다. 예제 항목중에 마지막 이네요. 링크를 따라가 보겠습니다. 여러 리스트 항목중에서 첫번째 항목의 예제를 보겠습니다. 세가지 navbar로 구성되어 있네요. 클릭하면 getRSSFeed함수를 호출하게 되어 있군요. js/extapi-cross-domail.js 를 열어보면 아래와 같이 해당 함수가 정의되어 있습니다. 첫번째 인수로 주어진 url를 통해 ax.ext.net.get API를 호출하여 get방식의 ajax통신을 하고, 콜백함수로 받아온 xml파일을 파싱하고 결과 리스트 항목을 생성하고 있습니다. 또,.. 2011. 8. 31.
Appspresso(앱스프레소) - File explorer (파일 탐색기) 이번에는 파일 탐색기 예제를 살펴 보겠습니다. 파일 제어 기능의 결정판인듯 싶네요.^^ 최초 index.html부터 보겠습니다. 파일시스템 데모의 링크를 따라가 보겠습니다. 첫번째 파일 읽고 쓰기는 앞에서 살펴봤으니, 이번에는 두번째 항목인 explorer 링크를 따라가 보겠습니다. index.js를 보면 페이지 이벤트와 함께 아래 함수가 호출됩니다. 디렉토리를 지정하고 있고, 기본 파라미터를 등록하고 있네요. root디렉토리와 파일 탐색기를 보여줄 target 요소를 지정하고 있습니다. 핵심인 fileExplorer객체를 살펴보겠습니다. js/file-explorer.js를 열어보면 fileExplorer객체가 정의되어 있습니다. this객체의 init함수를 호출하는군요. 아래부분에 정의되어 있는 in.. 2011. 8. 30.
Appspresso(앱스프레소) - Email (이메일 전송) 이번에는 Email전송 기능에 대한 예제를 보겠습니다. 처음인 index.html에서 시작합니다. Email링크를 따라 가보겠습니다. 메일을 보내기 위한 입력 화면이 있고, 전송버튼이 보입니다. 전송버튼 클릭시 호출되는 sendMail() 함수를 찾아보겠습니다. js/extapi-sendmail.js 를 열어보니, 호출되는 함수가 있군요. 콜백 함수와 메일을 보내기 위한 정보를 담는 객체를 생성하고, ax.ext.net.sendMail함수를 호출하게 됩니다. 실제 아이폰에서는 메일 송신 창이 뜨게 되고, SMS와 마찬가지로 한번더 확인하고 전송버튼을 눌러야 메일이 전송되게 됩니다. 화면은 아래와 같습니다. 2011. 8. 27.
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.