Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

MagicPreview with jQuery

Nov222008
Vote:
http://bizcaz.com/archives/2008/11/22-224354.php
Categories: jQuery
Tags: jQuery
Social Bookmark

Prev Page: Rounded Corners with jQuery
Next Page: popEye with jQuery

こんばんわ^^

今週は TOPIC でもピックアップしてますが、気になった jQuery のプラグインを結構見つけたので使ってみました。
まずは、input や textarea などフォームに入力した内容をリアルタイムに表示してくれる MagicPreview プラグインです。

サンプルを表示できませんでした。

特に見新しいものではなく、以前からフォームの内容をリアルタイムに表示するスクリプトはありましたけど、上記サンプルのように選択したオプションに該当するイメージを表示したりなど、ハンドラを登録することで入力した値を加工して表示したりできます。
MagicPreview プラグインは以下から入手できます。

jQuery magicpreview plug-in

使い方

使い方は jQuery のセレクタさえ知ってればカンタンです。
フォーム内の各要素名とリアルタイムの値を反映する各要素が関連付けされるので、そのようにマークアップすれすぐ使えます。
たとえば、上記サンプルは配布元のサンプルを少しアレンジしたものですが、以下のようになってます。

MagicPreview マークアップ

▼フォームの内容が反映されるブロック▼
<div class="preview clear">
<div id="img_select"><img src="images/1.jpg" alt="hello" /></div>
<p>Photo <span id="p_select">1</span> chosen</p>
<h2 id="p_title">Photo title</h2>
<p id="p_desc">Photo description</p>
<p><strong>Creative Commons:</strong> <span id="p_cc">No</span></p>
<p><strong>Score:</strong> <span id="p_rating">No rating</span></p>
</div>
▼入力フォーム▼
<form action="#" method="post" class="mp_form photopreview">
<fieldset>
<ul>
<li><label>Select a photo: </label><select name="select"><option value="1">Photo 1</option><option value="2">Photo 2</option><option value="3">Photo 3</option></select></li>
<li><label>Photo title: </label><input type="text" name="title" value="" size="30" /></li>
<li><textarea name="desc" rows="8" cols="40">Photo description</textarea></li>
<li><label><input type="checkbox" name="cc" value="Yes" /> Creative Commons?</label></li>
<li class="ratings"><label>Rating out of 5:</label><input type="radio" name="rating" value="1" checked /> 1<input type="radio" name="rating" value="2" /> 2<input type="radio" name="rating" value="3" /> 3<input type="radio" name="rating" value="4" /> 4<input type="radio" name="rating" value="5" /> 5</li>
</ul>
</fieldset>
</form>

各色の要素が関連付けされます。
基本的にフォームを基準にして各要素名にプレフィックスを付けた ID を、リアルタイム表示側の要素に命名するってかんじでしょうか。
たとえば、「Select a photo」の select タグには「select」という名称にしてます。
それに関連付けされる表示側の ID にはプレフィックス「p_」を付加した「p_select」とするわけですね (￣∇￣)b

上記サンプルの実際のコードは以下のようになります。

MagicPreview コード

<script type="text/javascript">
$(function () {
$('form.photopreview :text').magicpreview('p_');
$('form.photopreview :checkbox').magicpreview('p_');
$('form.photopreview textarea').magicpreview('p_');
$('form.photopreview :radio').magicpreview('p_', {
'formatValue': function (value) {
return value + '/5';
}
});
$('form.photopreview select').magicpreview('p_');
$('form.photopreview select').magicpreview('img_', {
'child': 'img',
'change': 'src',
'onBefore': function() {
$('#img_select img').fadeOut("fast");
return true;
},
'onAfter': function() {
$('#img_select img').fadeIn("fast");
return true;
},
'formatValue': function (value) {
return './images/' + value + '.jpg';
}
});
});
</script>

各色分けしたコードは MagicPreview でリアルタイム表示するためのコードで、先ほどマークアップした時の色に該当します。

MagicPreview の基本的な使いかは以下の通りです。

$(form_fields).magicpreview(prefix, options);

form_fields は jQuery のセレクタですね。
prefix には先ほどチョビッと触れたように、フォームの各要素名に付加するプレフィックス名( p_ )を指定します。そして option には以下のオプションが選択可能です。

child

form_fields セレクタの子要素に対して何かしたい場合に指定します。たとえばサンプルでいうと青字のコードで使ってまして、p_select の子要素にあたる img タグを指定しています。
change

chiled オプションで指定した要素に対して変更したいアトリビュートを指定します。たとえばサンプルでいうと、img タグの src アトリビュートを変更したいので src と指定しています。
onLoad

ページがロードされたときに実行させたい場合に指定するハンドラです。上記サンプルでは使ってません。
onBefore

MagicPreview 実行前に何かやらせたい場合に指定するハンドラです。たとえばサンプルでいうと、イメージを変更する前にフェードアウトさせてます。
戻り値は必ず true を返してください。
onAfter

MagicPreview 実行後に何かやらせたい場合にしているするハンドラです。たとえばサンプルでいうと、イメージを変更した後にフェードインさせてます。
ここも必ず戻り値は true を返します。
formatValue

child、change オプションで指定した値を加工したい場合に指定するハンドラです。たとえばサンプルでいうと、選択された番号のイメージファイルの URL を作成したり、選択されたラジオボタンの番号のテキストを加工したりしてます。
戻り値には change オプションで設定する内容を返します。