본문 바로가기
jQuery Mobile/JM Forms

jQuery Mobile 폼

by 진격의 파파 2013. 12. 3.
반응형

 

안녕하세요!! 

오늘 포스팅은  jQuery Mobile 폼에 대해서 설명하겠습니다.

 

jQuery Mobile은 폼을 매우 쉽게 만들수 있습니다.

 

Text Inputs - 텍스트 박스
Search Inputs - 검색
Radio Buttons - 라디오 버튼
Checkboxes - 체크박스
Select Menus - 선택 메뉴
Sliders - 슬라이더
Flip Toggle Switches - 플립 토글 스위치

등을 사용할 수 있습니다.

 

기본적인 소스는 아래와 같습니다.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="content">
    <form method="post" action="demo.php">
      <label for="fname">이름 : </label>
      <input type="text" name="fname" id="fname">
      <input type="submit" data-inline="true" value="Submit">
    </form>
  </div>
</div>

</body>
</html>
// 기본적으로 html 형식과 사용법은 유사합니다. 

 

 

위 소스를 실행시킨 화면의 모습입니다.

 

라벨을 숨기고 싶을 경우 <label for="fname" class="ui-hidden-accessible">이름 : </label> 이렇게 변경하여 실행하면 위 이미지에서 "이름" 부분을 숨길수 있습니다.


또 한가지 팁이 있는데 <input type="text" name="fname" id="fname"> -> <input type="text" name="fname" id="fname" data-role="none"처럼 사용하면 텍스트 박스의 크기가 기존 html 에서 사용하던 크기의 모습으로 줄어들게 됩니다.

 

내용을 정리하다보니 텍스트 박스만 정리된듯한데 나머지 라디오 버튼, 체크박스, select 등 한번 테스트 해보시기 바랍니다. 나머지들도 모두 예를들어 설명해드리고 싶은 마음은 굴뚝 같지만 또 내일 아침 일찍 새벽에 출근을 해야해서 오늘은 이것으로 줄입니다. 틈나는데로 jQuery Mobile 를 포스팅 할테니 조금 천천히 포스팅이 올라오더라도 양해바랍니다. ^^;

 

그럼 즐거운 잠자리 되시기 바라고 즐거운 프로그래밍 되세요!

 

반응형