jQueryでフォームをオシャレにカスタマイズ/ユーザー補助/SolidStateEveryday

フォームカスタマイズjquery.jqtransform.js

スポンサードリンク

SAMPLE
CODE
DownLoad

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<title></title>

	<link rel="stylesheet" href="jqtransformplugin/jqtransform.css" type="text/css" media="all" />
	
	<script type="text/javascript" src="requiered/jquery-1.3.2.min.js" ></script>
	<script type="text/javascript" src="jqtransformplugin/jquery.jqtransform.min.js" ></script>
	<script language="javascript">
		$(function(){
			$('form').jqTransform({imgPath:'jqtransformplugin/img/'});
		});
	</script>
    <style type="text/css">
	  table{width:300px}
	  table tr th,table tr td{padding:10px;}
	</style>
	
</head>
<body>

	<form action="" method="GET">
    
    <table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="row">Name</th>
    <td><input type="text" name="inputtext"/></td>
  </tr>
  <tr>
    <th scope="row">Password</th>
    <td><input type="password" /></td>
  </tr>
  <tr>
    <th scope="row">Checkbox</th>
    <td><input type="checkbox" name="chbox" id=""></td>
  </tr>
  <tr>
    <th scope="row">Radio</th>
    <td><input type="radio" id="" name="question" value="oui" checked><label>oui</label><input type="radio" id="" name="question" value="non" ><label>non</label></td>
  </tr>
  <tr>
    <th scope="row">Select</th>
    <td>
    <select name="select">
				<option value="">&nbsp;</option>
				<option value="opt1">Big Option test line with more wordssss</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>    </td>
  </tr>
  <tr>
    <th scope="row">Textarea</th>
    <td><textarea cols="40" rows="12"></textarea></td>
  </tr>
  <tr>
    <th colspan="2" align="center" scope="row"><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></th>
    </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
  </tr>
</table>
</form>

</body>
</html>

	Opensource - AJAX - Jqtransform - jQuery form plugin

jQueryで入力フォームをオシャレにカスタマイズできる、jquery.jqtransform.js。
概観もですが、セレクトタブもAjaxな感じになってかっこいいと思います。
設置はスクリプトを読み込ませるだけなので導入も手軽です。

セッティング

１．ダウンロード/セッティング

サイトへ行きjqtransform.tar.gzをダウンロードしてきます。
ページ右上あたりにダウンロードボタンがあるのでそこをクリックしてください。
ダウンロードしたら解凍し、 jqtransformpluginフォルダとrequieredフォルダをアップロード。
requieredにはjQuery本体が入っているので、すでにお使いでしたらアップロードしなくてもOKです。

２．<head>設定

スクリプトを読み込ませます。

次にトリガー的なコードを記述します。

formの箇所でターゲットを指定し、jqtransformplugin/img/でカスタマイズに使用する画像のフォルダを指定しています。

３．HTMLマークアップ

headでformと指定したので、このスクリプトを読み込んでいるページ内の<form>タグ内がカスタマイズの対象となります。
したがって、マークアップは特に意識する必要なく通常のフォームを作成してください。
もし、複数のフォームがあり一方に適用させたくない場合は、<head>の設定のformの箇所を「form#id」とID名を付加し、適用させたいフォームへ同じID名を付けてください。