フォーム行の追加・削除・入換「sfPrototypeMan」
当ページのリンクには広告が含まれています。
スポンサーリンク
フォーム行の追加・削除・入れ替えをWeb上に実現してくれるjQueryプラグイン「sfPrototypeMan」を紹介します。
jQueryプラグイン「sfPrototypeMan」
このプラグインの特徴は、フォームの行をクリックアクションで追加・削除することができ、入力した値を維持しつつフォーム行をドラップ＆ドロップで入れ替えることができるところです。どんな場面で使用するのかは、よくわかりませんが、なんだかスゴイので、ご紹介します。
スポンサーリンク
デモで、いろいろ操作してみてください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="sfPrototypeManのデモでーす。">
<title>sfPrototypeMan - jQuery Plugin Demo</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="jquery.sfprototypeman.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery().sfPrototypeMan({
rmButtonText: "← 削除",
addButtonText: "↑ 行を追加"
});
jQuery("#socials").sortable();
});
</script>
<style type="text/css">
form .sfPrototypeMan {
background-color: #ebebeb;
}
form .sfPrototypeMan div * {
display: inline-block;
}
form .sfPrototypeMan label {
margin-right: 1em;
}
</style>
</head>
<body>
<h1>sfPrototypeManのデモでーす。</h1>
<p>以下の方法で、「ソーシャルの順位」を決めてみましょう。</p>
<p>
1. 行を追加 をクリック<br />
2. フォームにテキストを入力<br />
3. 行をドラッグ＆ドラップし、順位（行）を入れ替え<br />
4. 不要な行があれば、削除をクリック
</p>
<form>
<div>
<label>ソーシャルの順位</label>
<div id="socials" data-prototype="<div><label class="required">__name__label__</label><div id="MyFormType_socials___name__"><div><label for="MyFormType_socials___name___name" class="required">Name</label><input type="text" id="MyFormType_socials___name___name" name="MyFormType[socials][__name__][name]" required="required" /></div></div></div>">
<div>
<label class="required">0</label>
<div id="MyFormType_socials_0">
<div>
<label class="required" for="MyFormType_socials_0_name">Name</label>
<input type="text" required="required" name="MyFormType[socials][0][name]" id="MyFormType_socials_0_name" value="Mixi">
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
スポンサーリンク