jqTransform은 form_jquery를 아름답게 만듭니다.

jqTransform은 DFC Engineering에서 작성한 jQuery 스타일 플러그인으로, 사용하기 쉽고 입력, 라디오, 텍스트 영역, 선택 및 체크박스를 포함한 모든 양식 요소를 아름답게 만들 수 있습니다.
작업 렌더링:

사용법:
1. 자바스크립트 참조 및 CSS 파일 참조 추가

<link rel="stylesheet" type="text/css" href="jqtransform.css" /> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.jqtransform.js"></script> 

2. HTML 양식 구조 작성

<form class="jqtransform" action="#" method="post"> 
  <p><label>用户名：</label><input type="text" /></p> 
  <p><label>密码：</label><input type="password" /></p> 
  <p><label>性别：</label><input type="radio" name="sex" /> <label style="width:auto">男</label> 
 <input type="radio" name="sex" /> <label style="width:auto">女</label> </p> 
  <p><label>学历：</label> 
   <select> 
    <option value="1">博士</option> 
    <option value="2">硕士</option> 
    <option value="3">大学本科</option> 
    <option value="4">大专</option> 
    <option value="5">中技</option> 
   </select> 
  </p> 
  <p><label>短信订阅：</label><input type="checkbox" /> <label>开通短信订阅功能</label></p> 
  <p><label>备注：</label> 
  <textarea name="note" rows="6" cols="40"></textarea> 
  </p> 
  <p><label> </label><input type="submit" value="提交" /> <input type="reset" value="重置" /></p> 
</form> 

3. 플러그인 호출

$('.jqtransform').jqTransform(); 

아름다운 형태는 나오지만 몇 가지 결점이 있습니다. IE에서 jqTransform의 중국어 형태 버튼 지원은 이상적이지 않습니다. 예를 들어 버튼의 값이 영어인 경우 정상적으로 표시되지만 다음과 같은 영어 단어가 여러 개 표시됩니다. 물론입니다. 제출하면 줄이 삭제됩니다. 값이 중국어인 경우에는 "제출"이라는 두 단어가 세로로 정렬됩니다. 해결책은 CSS 스타일로 시작하여 jqtransform.css 파일(아마도 14번째 줄)에서 버튼.jqTransformButton을 찾는 것입니다. 참여:

width:auto; 
white-space: nowrap; 

버튼 너비를 자동으로 설정하고 한 줄로 표시합니다. 물론 고정 너비를 설정할 수도 있고 CSS 파일을 수정하여 양식 스타일을 맞춤 설정할 수도 있습니다.

이상은 양식을 아름답게 하는 방법을 알려드린 것인데, 간단한 jQuery 스타일 플러그인을 사용하여 양식 요소를 아름답게 만드는 것입니다. 페이지.