tag-itプラグインのデモページ

【jQuery】タグを入力してもらうならTag-itプラグイン

2015.02.15   2814


いつも今更ながらでかたじけないのですが、ユーザーにタグを付けてもらう時に重宝するTag-itプラグインを紹介したいと思います。今ではもう当たり前のUIですので、みなさんも一度は目にしたことがありますよね。タグにしたいワードを入力して確定やスペースを押すとそのワードが囲まれるアレです。

Tat-itプラグインを使えばすぐに実装可能ですよ。

Tag-it.jsのオススメ/ポイント

  •   良くあるタグ入力UIを簡単に実装可能
  •   痒いところに手の届くオプション
  •   重複ワードは自動的にバリデート

Tag-it.jsのデモ


Tag-it.jsのページ


Tag-it.jsの使い方

それではTag-it.jsの使い方を見ていきましょう。
それぞれのコードを載せますね。

HTMLコード

<ul id="tag-it"></ul>

チェックポイント

任意のidやクラス名をつけよう!

CSSコード

<!-- jQueryUI -->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<!-- Tag-it CSS本体 -->
<link href="css/jquery.tagit.css" rel="stylesheet" type="text/css">

チェックポイント

jQueryUI本体は必須です。
サンプルではGoogleのホスティングを利用しています。

JavaScriptコード

<!-- jquery 本体-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- jquery-UI 本体-->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<!-- Tag-it JS本体 -->
<script src="js/tag-it.js" type="text/javascript" charset="utf-8"></script>

<script>
$(document).ready(function() {
	$('#tag-it').tagit({placeholderText:"タグをつけよう",fieldName:"tags[]"});
});
</script>

チェックポイント

CSSと同じようにjQueryはGoogleホスティングを利用しています。

Tag-itのコードのplaceholderは任意で付けてくださいね。
ちなみによく使いそうなオプションは
$("#tag-it").tagit("createTag", 'hoge');

で、例えば更新などDBに保存していたワードを表示するときにcreateTagオプションを使用して既存タグをあらかじめ表示させておく、という使い方が出来ますね。

サーバ側コード

// PHP
// サーバ側では配列で受け取れるようになっています。
$_POST['tags'];

プラグインへ一言

重複ワードのカットもしてくれるし嬉しい限り

Feedlyで最新プラグインをチェック

follow us in feedly

良ければフォローもお待ちしております