IT 기술 따라잡기

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"로 세팅돼 있습니다.

input fields는 single line 과 multiline 두가지 타입이 있습니다. 첫번째것은  <input> elements 에 type="text" attribute 가 들어가고 두번째 것은 <textarea> elements가 들어갑니다. jQuery Mobile 에는 이 외에 search field가 있습니다. 어떤 값을 입력하거나 어떤 문자를 찾을 때 사용하죠. 이 세가지의 input field 들은 jQuery 의 standard methods 에 의해 관리 됩니다. 그리고 jQuery Mobile에는 textinput () method가 추가로 있습니다. input field 는 textinput standard component 와 연관이 있습니다.

Input on one line

JavaScript 로 single line 의 input field를 다이나믹하게 생성하겠습니다. 간단하게 type="text" attribute를 가지고 있는 <input> element를 생성하면 됩니다.

Create an input field dynamically

Input on multiple lines

multiline text field 를 표시할 수 있는 <textarea> element 를 생성해 보죠.

Create a multiline text field dynamically

Search field

search field 는 <input> element 안에 type="search" attribute를 넣으시면 됩니다.

Dynamic creation of a search field

안녕하세요?

지난 주 월요일(10/29) 부터 11/06 (화) 까지 진행된 jQuery Conference Asia 2012 이벤트가 마무리 됐습니다.

참여해 주신분께 감사드립니다.

추첨은 제 직장 동료인 Akshay 가 해 주었습니다.

점심시간에 짬을 내서 추첨 해 준 Akshay 에게도 감사드립니다.

당첨되신 분은 조연성님입니다.

조연성님께는 이번 jQuery Conference Asia 2012 행사에 무료로 참가할 수 있는 기회를 드립니다.

제가 이번 행사를 주최하는 인크로스의 담당자 분께 조연성님의 이메일 주소를 알려드리면 담당자분이 Contact 을 할 겁니다.

아쉽게 추첨되지 못하신 분들께는 죄송합니다.

저도 행사에 참가하지 못해서 행사 후에 관련 자료를 받기로 했거든요.

이번에 참여하셨다가 추첨되지 못하신 분 들께도 이 자료 공유해 드릴께요.

이번 jQuery Conference Asia 2012 행사는 11월 12일 월요일에 서울 역삼동 르네상스 호텔에서 개최됩니다.

자세한 소식은 위 링크를 따라 가시거나 아래 파일을 다운 받아서 열어보시면 알 수 있습니다.

join_auth.html