チャット

複数人のやりとりをチャットアプリのように対話型で表示します。画面を遷移せず、その場で入力と入力内容の反映をします。チャット機能のためのUIとして使用するほか、話者と相手方をわかりやすくやりとりの履歴を表示する場合に向いています。誰かの発言に対する誰かの回答をタイムラインで並べる形式となるため、ステイタス管理や会話外のメモが主体の場合には適していません。

<div class="comment--tgt">
  ...
</div>
<div class="communication-comennt">
  <div class="form-group mbn>
    <textarea class="form-control" rows="1" placeholder="コメントを入力"></textarea>
  </div>
  <div class="row comment--expand displaynone">
    <div class="col-md-3">
      <button class="btn btn-inverse-primary btn-block" data-toggle="modal" data-target=".modal--upload"><span class="icon-abui-upload prx"></span>ファイル</button>
    </div>
    <div class="col-md-3 col-md-offset-6">
      <button class="btn btn-primary btn-block js-btn--comment--post">投稿</button>
    </div>
  </div>
</div>

$('.communication-comennt textarea').click(function(event) {
  $(this).attr('rows', '4');
  var parentPath = $(this).parent().parent().parent().parent();
  $(parentPath).find('.comment--expand').fadeIn('fast');
});

$('.js-btn--comment--post').click(function(event) {
  var parentPath = $(this).parents('.communication-comennt');
  $(parentPath).find('textarea').attr('rows', '1');
  $(parentPath).find('textarea').val('');
  $(parentPath).find('.comment--expand').hide();
  $(parentPath).parent().find('.comment--tgt').fadeIn('fast');
});