문서의 이전 판입니다!
기존의 HTML과 CSS만으로 모바일에 최적화 된 폼을 만들기 위해서는 많은 시간과 노력이 선행된다. 하지만 jQuery mobile은 적은량의 학습과 적은량의 코드로 하단 그림과 같은 다이나믹한 폼을 구성하는데 도움을 준다.
<리스트 1> Dynamic form layout 사용 방법
<DIV data-role="fieldcontain"> <LABEL for="txtFirstName">First Name:</label> <INPUT type="text" name="txtFirstName" id="txtFirstName" value="" /> </DIV> <DIV data-role="fieldcontain"> <LABEL for="txtLastName">Last Name:</label> <INPUT type="text" name="txtLastName" id="txtLastName" value="" /> </DIV> <DIV data-role="fieldcontain"> <LABEL for="txtPhoneNo">Phone No:</label> <INPUT type="tel" name="txtPhoneNo" id="txtPhoneNo" value="" /> </DIV> <DIV data-role="fieldcontain"> <LABEL for="txtEmail">Email:</label> <INPUT type="email" name="txtEmail" id="txtEmail" value="" /> </DIV>
현실적으로 수없이 많은 송수신 과정에 모두 정밀한 예외처리를 수행하도록 개발하는 것이 그렇게 쉬운 일만은 아니다. 일반적으로 가장 쉬운 대처방법은 사용자에게 현재 네트워크를 경유해 데이터를 송수신하는 것이다.
<화면 7>에서 보이는 로딩 애니메이션 윈도우가 jQuery Mobile이 시간이 걸리는 작업 상황이라는 것을 사용자에게 알려주는 방법이며 보통 페이지 전환이 원격의 페이지를 로딩하면 자동으로 로딩화면이 표시된다.
<화면 7> 로딩 팝업
만약 jQueryMobile이 자동으로 처리하지 못하는 상황이라면 개발자가 직접 로딩화면을 제어할 수 도 있다. <리스트 3>의 코드 중 $.mobile.pageLoading()가 그것이다. $.mobile이라는 객체는 jQueryMobile이 제공하는 기본 객체로 pageLoading 메소드뿐만 아니라 다양한 기능을 제공한다. pageLoading 함수는 하나의 Boolean 인자를 받게 돼 있는데 기본값은 false이며 생략할 수 있다. 만약 false로 입력하면 로딩화면이 표시되고 pageLoading(true) 함수가 호출될 때 까지 화면에 유지된다. 즉, 로딩 처리가 끝났다면 반드시 $.mobile.page Loading(true)를 호출해야 한다는 것이다. 만약 호출하지 않는다면 사용자는 화면이 완전히 로딩된 후에도 로딩 화면을 계속 보고 있게 될 것이다.