Head
<link rel="stylesheet" href="http://www.htmldrive.net/edit_media/2010/201009/20100927/jqtransform/jqtransformplugin/jqtransform.css" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.htmldrive.net/edit_media/2010/201009/20100927/jqtransform/jqtransformplugin/jquery.jqtransform.js" ></script>Javascript
$(function(){
$('form').jqTransform({imgPath:'http://www.htmldrive.net/edit_media/2010/201009/20100927/jqtransform/jqtransformplugin/img/'});
});Body
<form action="post.php" method="POST">
<div class="rowElem"><label>Input Text:</label><input type="text" name="inputtext"/></div>
<div class="rowElem"><label>Input Password:</label><input type="password" /></div>
<div class="rowElem"><label>Checkbox: </label><input type="checkbox" name="chbox" id=""></div>
<div class="rowElem"><label>Radio :</label>
<input type="radio" id="" name="question" value="oui" checked ><label>oui</label>
<input type="radio" id="" name="question" value="non" ><label>non</label>
</div>
<div class="rowElem">
<label>Select :</label>
<select name="select">
<option value="">1 </option>
<option value="opt1">2 </option>
</select>
</div>
<div class="rowElem">
<label>Select Redimention :</label>
<select name="select2" id="first-select">
<option value="opt1">Big Option test line with more words</option>
<option value="opt1">Multi line row. Multi line row. Multi line row. Multi line row. </option>
<option value="opt2">Option 2</option>
<option value="opt3">Option 3</option>
<option value="opt4">Option 4</option>
<option value="opt5">Option 5</option>
<option value="opt6">Option 6</option>
<option value="opt7">Option 7</option>
<option value="opt8">Option 8</option>
</select>
</div>
<div class="rowElem"><label>Submit button:</label><input type="submit" value="Envoyer" /></div>
<div class="rowElem"><label>Reset button:</label><input type="reset" value="Annuler" /></div>
<div class="rowElem"><label>Input button:</label><input type="button" value="bouton" /></div>
</form>설명
form의 inputbox, radio버튼, selectbox 등을 예쁘게 꾸며주는 jquery 플러그인 중에 jqtransform라는 게 있습니다.
프로젝트에서 사용해보니 괜찮은 것 같아 소개해 봅니다.
https://github.com/jcamenisch/jqTransform
소스는 여기에서 다운로드 받으시면 됩니다.
예제 소스를 보시면 아시겠지만
jqtransform.css, jqtransform.js를 link하고
$(‘form’).jqTransform();
이 부분을 꼭 실행해 줘야 합니다.
실행
'프로그래밍 언어 > jQuery' 카테고리의 다른 글
| [jQuery] jquery ui의 달력을 세팅하고 날짜 유효성 체크 및 기간 설정해주는 플러그인(plugin) (0) | 2018.05.31 |
|---|---|
| [jQuery] jqtransform의 selectbox의 option 추가해도 안 보이는 문제 해결방법 (0) | 2018.05.23 |
| [jQuery] 제이쿼리로 구현한 alert, confirm 레이어 팝업 샘플 소스 (1) | 2016.11.30 |
| [jQuery] 마우스 클릭하면 마우스 근처에 나타나는 레이어 툴팁(Tooltip) (3) | 2016.02.24 |
| [jQuery] outerHTML 간단하게 구현해서 사용하기 (0) | 2016.02.03 |
댓글