Input on one line
single line input field 를 생성할 때 jQuery Mobile 은 너비와 높이 그리고 shaded border 등을 정할 수 있는 CSS classes 들을 해당 <input>
element 에 add 합니다. 이전 글에서 사용했던 소스를 가지고 한번 확인해 보죠. 이전 소스를 fireworks 로 열어서 firebug로 jQuery Mobile 에 의해 생성된 HTML code를 확인해 보세요.
<input>
element에 ui-input-text
CSS class 가 보이시죠? 다른 클래스들은 border 의 테두리 곡선을 관리하는 클래스들입니다.
Input on multiple lines
jQuery Mobile 에 의해 생성된 HTML 을 잘 보세요. 아래는 multiline input field 소스코드를 firebugs 에서 본 모습입니다.
여기서도 ui-input-text
class 를 보실 수 있습니다. 다만 이번에는 <textarea>
element에 적용됐을 뿐이죠.
Search field
같은 방법으로 search field 소스코드를 보겠습니다.
jQuery Mobile 에 의해서 바뀌어진 HTML 은 좀 더 복잡하게 변했죠? <div> element 에 ui-input-search class 가 있고 거기에 <input> element가 포함돼 있구요. 여기에 또 <a> link도 있습니다. field 의 오른쪽에 있는 erase icon 과 관계 있는 버튼을 만들기 위해서죠.
또한 <input>
element 에 type="true"
attribute (instead of type="search") 가 있는 점을 잘 봐두세요. 그리고 새 data-type
attribute 가 "search"로 세팅돼 있습니다.
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| input field 관련 예제들 (0) | 2012.11.10 |
|---|---|
| Input field 를 customize 하기 (0) | 2012.11.10 |
| input field에서 이벤트 관리하기 (0) | 2012.11.09 |
| input field 에 값 할당하기 (0) | 2012.11.09 |
| Ajax 로 input fields 삽입하기 (0) | 2012.11.07 |
| 다이나믹하게 input field 생성하기 (0) | 2012.11.07 |
| 테이블 manipulation 예제 (0) | 2012.11.06 |
| 테이블에서 이벤트 다루기 (0) | 2012.11.06 |
| 다이나믹하게 새 row 를 insert 하기 (0) | 2012.11.06 |
| 다이나믹하게 새로운 컬럼 insert 하기 (0) | 2012.11.06 |