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

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

使用方法
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」サンプル

sponsors

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

記事作成:
記事URL:

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