Latest web development tutorials

jQuery를 이동할 수있는 형태

jQuery를 모바일은 자동으로 자동으로 HTML 양식 스타일을 추가하는 그들, 더 매력적인 터치에 더 친화적 보이게됩니다.


jQuery를 이동할 수있는 형태의 구조

jQuery를 모바일은 그들을 더 매력적이고 사용하기 쉽게하기 위해 스타일 HTML 양식 요소에 CSS를 사용합니다.

jQuery를 모바일에서 다음과 같은 양식 컨트롤을 사용할 수 있습니다 :

  • 텍스트 입력 상자
  • 검색 입력 창
  • 라디오 버튼
  • 확인란
  • 선택 메뉴
  • 슬라이더
  • 토글 스위치 플립

jQuery를 모바일 양식을 사용하는 경우, 당신은 알고 있어야합니다 :

  • <양식> 요소는 방법 및 행동 특성이 있어야합니다
  • 각 폼 요소는 고유 한 "ID"속성이 있어야합니다. id는 사이트 전체의 모든 페이지에서 고유해야합니다. jQuery를 모바일 단일 페이지 탐색 메커니즘이 제공되기 때문에이되도록, 동시에 서로 다른 복수의 페이지
  • 각 양식 요소는 레이블이 있어야합니다. 속성에 대한 설정 탭은 요소 ID를 일치하는

예

<form method="post" action="demoform.html" >
<label for="fname">姓名: </label>
<input type="text" name="fname" id="fname" >
</form>

»시도

레이블을 숨기려면 클래스 UI 숨겨진 액세스를 사용합니다. 당신이 자리 태그와 같은 요소의 특성입니다 때 자주 사용됩니다

예

<form method="post" action="demoform.html">
<label for="fname" class="ui-hidden-accessible" >姓名:</label>
<input type="text" name="fname" id="fname" placeholder="姓名...">
</form>

»시도

팁 : 우리는 데이터 맑은-BTN = "true로 사용할 수 있습니다 " 입력 상자의 내용 (입력 상자의 오른쪽에 X 아이콘) 취소 버튼을 추가하는 속성 :

예

<= "FNAME"에 대한 라벨> 이름 : </ 라벨>
<입력 유형 = "텍스트"이름 = "FNAME"ID = "FNAME"데이터 맑은 BTN = "진정한">

»시도
주의 입력 상자에서 지우기 버튼은 <입력> 요소는 아니지만에서 <텍스트 영역>에 사용된다. 검색 상자를 사용하여 아이콘을 제거하기 위해 데이터 맑은-BTN = "false"로 사용할 수 있습니다, 기본값은 "참"데이터 맑은-btn을.

jQuery를 모바일 아이콘 양식

버튼 코드를 형성하는 표준 HTML의 <입력> 요소 (버튼, 제출 리셋). 그들은 자동으로 자동으로 바탕 화면에 모바일 장치를 채택, 스타일을 렌더링합니다 :

예

<입력 유형 = "버튼"값 = "버튼">
<입력 유형 = "재설정"값 = "리셋 버튼">
<입력 유형 = "제출"값 = "버튼을 제출">

»시도

당신이 추가 스타일을 추가해야하는 경우 <입력> 버튼을 사용하면 데이터 -이 * 속성은 다음 표를 사용할 수 있습니다 :

재산 값 기술
데이터 모서리 참 | 거짓 버튼이 둥근 여부 모서리를 지정합니다
데이터 아이콘 아이콘 참조 설명서 지정 버튼 아이콘
데이터 iconpos 왼쪽 | 오른쪽 | 상단 | 바닥 | notext 아이콘의 위치를 ​​지정
데이터 인라인 참 | 거짓 인라인 버튼할지 여부를 지정합니다
데이터 미니 참 | 거짓 미니 버튼할지 여부를 지정합니다
데이터 그림자 참 | 거짓 버튼 그림자 효과를 추가할지 여부를 지정합니다

버튼 아이콘을 추가합니다 :

<입력 유형 = "버튼"값 = "버튼">
<입력 유형 = "재설정"값 = "리셋 버튼">
<입력 유형 = "제출"값 = "버튼을 제출">

»시도

필드 컨테이너

와이드 스크린 레이블 및 양식 요소를 살펴보다 적합하게하기 위해, 또는 <FIELDSET> 라벨 / 양식 요소를 주변 요소와 함께 "UI 필드가-포함"을 사용하십시오 클래스 <div>

예

<form method="post" action="demoform.php">
  <div class="ui-field-contain" >
    <label for="fname">姓:</label>
    <input type="text" name="fname" id="fname">
    <label for="lname">姓:</label>
    <input type="text" name="lname" id="lname">
  </div>
</form>

»시도

램프 라벨과 폼 컨트롤의 스타일을 추가 할 페이지의 폭에 따라 클래스 UI 필드는-포함되어 있습니다. 페이지 폭 480 픽셀보다 클 때, 자동으로 동일 선상에있는 레이블 및 형태 제어를 배치한다. 페이지 폭 480 픽셀 미만이면, 라벨이 상부 폼 요소에 배치된다.

팁 : jQuery를 모바일 자동으로 스타일을 클릭 할 수있는 요소를 추가 방지하려면, 사용 데이터 역할 = "없음"속성 :

예

<label for="fname">姓名:</label>
<input type="text" name="fname" id="fname" data-role="none" >

»시도

램프 양식 제출에 jQuery를 모바일

jQuery를 모바일 자동 AJAX 양식 제출 처리 및 통합 서버 애플리케이션의 DOM에 응답을 시도한다.