フォームの見栄えの変更

formを設置するときによく使用するもの
・AjaxZip(郵便番号検索)
・Uniform(見た目を変更するjQueryプラグイン)

AjaxZipを此方のサイト様からダウンロード
Uniformを此方のサイト様からダウンロード
ふたつのスクリプト及びCSSを読み込む↓

<script type="text/javascript" src="ajaxzip2/ajaxzip2.js" charset="UTF-8"></script>
<script>AjaxZip2.JSONDATA = 'ajaxzip2/data';</script>
<link rel="stylesheet" href="uniform/css/uniform.default.css">
<script type="text/javascript" src="uniform/jquery.uniform.min.js"></script>
<script>
<!--
$(function(){
	$('select, input:checkbox, input:radio, input:text').uniform();
});
-->
</script>

2行目での指定は現在のファイルからの相対パスで指定します
8行目でuniformを使用するオブジェクトを指定します

AjaxZipを実際に動かすために

<input name="郵便番号" type="text" onKeyUp="AjaxZip2.zip2addr(this,'都道府県','市区町村');">
<select name="都道府県">~中略~</select>
<input name="市区町村" type="text">
<input name="番地・アパート・マンション名" type="text">

郵便番号入力後にそのテキストボックスから外れたら都道府県及び市区町村に自動入力します、の記述です
使用すると気づきますが、セレクトボックスやテキストボックスの枠が大きくなります
違和感を感じる時にはuniformのCSSの398行目あたりを適宜変更すると幸せになれるかもしれません

formの見栄えを変更してくれるものはいくつか試してみましたが、有名どころなjqtransformは僕にはちとめんどくさかったです(回り込み的な意味で)
5509さんのjqueryselectableは見栄えがすごくよくなります、が、僕がよく使ってるスクリプトと共存できない事が多くあまり使用していません

Leave a Comment.