blog.longfeed

14日のMorioka.as->lab(0x02)で発表したUI小物のソースを晒しておく。

コンセプトとしては、既存のWebアプリに簡単に追加できる画面上のメモ欄。マニュアルに赤ペンで書き込むように、画面の中に書込みできることを狙った。「MEM」ボタンでテキストエリアの文字をcookieに書き込むだけ。といってしまえばそれまでだけれど、間違いやすい操作や忘れやすいことを書いておけるのは便利じゃなかろうか、と思って作った。

零号機なので、現時点ではかなり怪しい（CSSの調整で多少マシになるかも。特にIE以外は調整必須）。試す場合は（いるのか？）自己責任で。

jquery.jsとjquery.cookie.jsに依存しているのでそれぞれ読み込み。で、以下のjsが今回の本体。headに書くなり、外部jsで読み込むなり。

//読み込み
function read_memo() {
  $('#MEMO').val($.cookie('memo1'));
}
//書き込み
function write_memo() {
  $.cookie('memo1', $('#MEMO').val(), { expires: 90 });
  read_memo();
}

//消去
function del_memo() {
  $('#MEMO').val('');
  $.cookie('memo1', null);
}

//ページロード時実行
$(function(){
  //初期データ読み込み
  read_memo();
  
  //onFocus-blurエフェクト
  $('#MEMO')
  .hover(function(){
    $(this).css('border-color', '#edd');
  }, function(){
    $(this).css('border-color', '#fff');  
  })
  .focus(function(){
    $(this).css('border-color', '#ddd');
  })
  .blur(function(){
    $(this).css('border-color', '#fff');
  });
});

//クリック時の動作
$(function(){
  $('#WRITE-MEMO').click(function(){
    write_memo();
  });
});

$(function(){
  $('#DEL-MEMO').click(function(){
    del_memo();
  });
});

メモを表示させたい場所に、htmlを埋め込む。リンクをjavascript:void(0)で書くのは好ましくないけれど、とりあえず。textareaのサイズは適宜調整されたし。

<div class="scribble">
<ul>
<li><a href="javascript:void(0)" id="WRITE-MEMO">MEM</a></li>
<li><a href="javascript:void(0)" id="DEL-MEMO">DEL</a></li>
</ul>
<textarea id="MEMO" cols="60" rows="2"></textarea>
</div>

CSSも、これをベースに調整してもらえれば。

.scribble {
    margin: 1em auto;
    width: 40em;
    overflow: hidden;
}
.scribble ul {
    list-style: none;
}
.scribble ul li {
    float: left;
}
.scribble ul li a {
    color: #e0e0e0;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    text-decoration: none;
    border: solid 1px #eee;
    padding: 2px;
    margin-right: 5px;
}
.scribble ul li a:hover {
    color: #999;
}

#MEMO {
    color: #c00;
    border: solid 1px #fff;
    font-weight: bold;
    overflow: hidden;
    width: 30em;
}