影でこそこそ言うブログ

昔作ったコレをjQueryを使って再構築。
(よく見たら以前のも一部のjQuery使ってた。中途半端に)
その際に発言時にページを再読み込みさせないようにした。

Demo

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
jQueryUIがすばらしいのと、jquery.hotkeys.jsもかなり使い勝手がよかった。

機能としてはひとまずシンプルに
　・メッセージの書込みができる。
　・メッセージの移動・削除ができる。

技術的なところでは
　・ページ遷移させずに書込みを表示
　・Ctrl+zでモードの切り替え
　・付箋化する要素を指定できる。

いろいろ拡張はできそうだけど、とりあえず雛形としておいとこうと思った。
他人の書込みも遷移なしで反映できると面白そうなんだけどそのへんはまあいいか。

そんな感じで。

使い方。

1. http://jquery.com/からjQuery(1.3.2)をダウンロード
2. http://jqueryui.com/downloadからui.draggable.jsをダウンロード（含んでるjsファイルなら何でもいいはず)
3.google codeからjquery.hotkeys.js(0.7.8)をダウンロード(キーバインド使用しないならはずしてもいい)

4.ここから付箋用js/cssをダウンロード

htmlで1-4の順番で読み込む。

<script type="text/javascript">
	$(document).ready(function(){
		$("#husen").husen();　//付箋化したい要素の親要素を指定
	});
</script>

Demoではこんな感じ。

<ul id=”husen”>
<li husenid=”100″ style=”position: absolute;top:44px;left:49px;”><span class=”text”>aaaaa</span></li>
<li husenid=”101″ style=”position: absolute;top:144px;left:59px;”><span class=”text”>bbbbbb</span></li>
<li husenid=”102″ style=”position: absolute;top:244px;left:109px;”><span class=”text”>ccccccc</span></li>
<li husenid=”103″ style=”position: absolute;top:344px;left:200px;”><span class=”text”>dddddd</span></li>
</ul>

フォームを設置したい場合、付箋化したい要素のIDにhusenformを追加する。
　//フォーム
　<li id=”husenform”>
　　<textarea id=”husen_note”></textarea>　//必須
　　<input type=”submit” value=”送”>　//必須
　　<input type=”hidden” value=”0″ id=”husen_x” name=”husen_x”>　//必須
　　<input type=”hidden” value=”0″ id=”husen_y” name=”husen_y”>　//必須
　</li>

AJAXモードをしないと、フォームから付箋の追加/移動をしても、更新すると元に戻ります。
AJAXモードにすると移動/作成/削除時に指定したアドレスへhusenID,x座標,y座標データがPOSTされます。
//というかこのあたり使わないと、ただ単にdraggable()すればいいだけという話

<script type="text/javascript">
	$(document).ready(function(){
		$("#husen").husen({ajax: 1});　//AJAX利用版
	});
</script>