1. wmoai

    No comment

    wmoai
Changes in body
Source | HTML | Preview
@@ -1,56 +1,57 @@
社内ツールで、webページにコメントを付ける機能が欲しくなったのでjQueryプラグインを作りました。
![demo](https://raw.githubusercontent.com/wmoai/jquery.nncomment/master/demo.gif)
デモ:http://wmoai.github.io/nncomment/
ソース:https://github.com/wmoai/jquery.nncomment
# 使い方
* jQueryと、nncomment.jsおよびnncomment.cssを読み込む
+* コメントを表示したい要素にnnc-screenクラスを設定する
* コメントを表示したい要素に対して、comment()で文字列を渡す
* 流れるコメント要素はncc-comment-customクラスを持っているので、このスタイルを記述することでコメントのデザインを変更
```sample.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="nncomment.js"></script>
<link rel="stylesheet" type="text/css" href="nncomment.css" />
<script>
$(function() {
$('#comment').on('submit', function() {
var message = $('#message').val();
$('#message').val('');
// 表示したい要素に対してコメント
$('#screen').comment(message);
return false;
});
});
</script>
<style>
.nnc-comment-custom {
font-size: 1.2em;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<form id="comment" action="#">
<div id="screen" class="nnc-screen" style="width:400px;height:200px;background-color:whitesmoke;" >
</div>
<input id="message" />
</form>
</div>
</body>
</html>
```
# 実装の方針
* jQueryプラグインとして作成
* コメント要素を生成・追加して、アニメーションで流す
* コメント表示時間はとりあえず一律10秒
* なるべくコメントが重ならないように、相対速度計算して表示する行を選択
* 表示を終えたらコメント要素は消す
* (コマンド機能っぽいものは無い)