[JQuery UI]폼 UI

2013. 1. 25. 11:51 Web/Mobile


1. 제이쿼리 모바일 폼UI를 이용하기 위해서는 감싸는 영역에 data-role="fieldcontain"을 지정해야 한다

  <div data-role="content">
   <div data-role="fieldcontain">
//한줄 텍스트
: 기본 브라우저 UI 사용할 경우 data-role="none"
     <label for="">„</label>
     <input type="text/password/email/url/tel/number" id="">

//검색영역
     <label for="search">‰</label>
     <input type="search" id="search">

//두줄이상 텍스트
     <label for="contact"></label>
     <textarea id="contact"></textarea>

//슬라이더
     <label for="year">…„</label>
     <input type="range" name="year" id="year" value="1980" min="1900" max="2013" />

//두개중 하나 선택 슬립 스위치
      <label for="gender">성별</label>
      <select name="gender" id="gender" data-role="slider">
        <option value="남자">남자</option>
        <option value="여자">여자</option>
      </select> 

//라디오버튼: 디폴트는 세로...
      <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>구입횟수</legend>
        <input type="radio" name="number" id="n1" value="1번" checked="checked" />
        <label for="n1">1번</label>
        <input type="radio" name="number" id="n2" value="2번" />
        <label for="n2">2번</label>
        <input type="radio" name="number" id="n3" value="3번" />
        <label for="n3">3번</label>
        <input type="radio" name="number" id="n4" value="4번" />
        <label for="n4">4번 이상</label>
      </fieldset>

//체크박스
      <fieldset data-role="controlgroup">
        <legend>주제별 문의</legend>
        <input type="checkbox" name="type1" id="type1" value="HP 신규작성">
        <label for="type1">HP 신규작성</label>
        <input type="checkbox" name="type2" id="type2" value="HP 리뉴얼">
        <label for="type2">HP 리뉴얼</label>
        <input type="checkbox" name="type3" id="type3" value="시스템 개발">
        <label for="type3">시스템 개발</label>
        <input type="checkbox" name="type4" id="type4" value="컨설팅">
        <label for="type4">컨설팅</label>
      </fieldset>

//셀렉트메뉴
: 팝업으로뜨게 할 경우 data-native-menu="false"
: 복수 지정 가능 multiple="multiple"
     <label for="number">구입횟수</label>
     <select name="number" id="number" multiple="multiple" data-native-menu="false">
       <option value="">선택하세요.</option>
       <option value="n1">1번</option>
       <option value="n2">2번</option>
       <option value="n3">3번</option>
       <option value="n4">4번 이상</option>
     </select>

//버튼영역
: 버튼크기를 문자에 맞추기 data-inline="true"
    <input type="button" value="취소" data-theme="" data-icon="delete">
    <input type="submit" value="전송" data-theme="" data-icon="arrow-r">
   </div>
  </div>


참고: http://view.jquerymobile.com/1.3.2/dist/demos/widgets/forms/

'Web > Mobile' 카테고리의 다른 글

일정위치에서 부드럽게 스크롤되는 toTop 플러그인  (0) 2016.03.15
[JQuery UI]버튼 UI  (0) 2013.01.25
[JQuery UI]콘텐츠 영역 접이식 패널  (0) 2013.01.25
간편한 header, footer  (0) 2013.01.25
폼 UI 기본  (0) 2013.01.24
Copyright © HuckleberryM All Rights Reserved | JB All In One Designed by CMSFactory.NET