タグを簡単にフォームに挿入するjavascript「jTagging」

｜

｜

ソーシャルブックマークなどに代表されるWeb2.0の世界ではタグにより細かく分類されることが多くなっています。
その細かさゆえ、入力が面倒になっているのも事実です。
jTaggingはタグの入力を簡便にしてくれるjavascriptです。

使用方法
jTaggingからjQuery.jTagging.jsをjQueryからjquery.jsをダウンロードします。
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/jQuery.jTagging.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#id名").jTagging($("タグの配列要素名"), "");
});
</script>
上記のように記述し、htmlでタグの入力フォームを作成します。
<input type="text" id="id名" size="30"> <div id="タグの配列要素名"> <a href="#" onclick="return false;"<Google>/a< <a href="#" onclick="return false;">Yahoo</a> <a href="#" onclick="return false;">MSN>/a< </div>
オプションを指定することで、配列を複数含めることや、タグの選択時などをCSSで指定できます。
var tagDivList = new Array($("タグの配列要素名1"), $("タグの配列要素名2")); var normalClass = { padding : "2px 1px 0 1px", textDecoration : "underline", color : "#f00", backgroundColor : "" }; //非選択時 var selectedClass = { padding : "2px 1px 0 1px", textDecoration : "underline", color : "#fff", backgroundColor : "#f00"}; //選択時 var normalHoverClass = { padding : "2px 1px 0 1px", textDecoration : "none", color : "#fff", backgroundColor : "#00f"}; //ホバー時 $("#id名").jTagging(tagDivList, " ", normalClass, selectedClass, normalHoverClass);
タグを簡単にフォームに挿入するjavascript「jTagging」サンプル