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

2015.02.15   7191


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

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

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

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

Tag-it.jsのデモ


Tag-it.jsのページ


Tag-it.jsの使い方

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

HTMLコード


    チェックポイント

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

    CSSコード

    
    
    
    

    チェックポイント

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

    JavaScriptコード

    
    
    
    
    
    
    
    

    チェックポイント

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

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

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

    サーバ側コード

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

    プラグインへ一言

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

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

    follow us in feedly

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