Tagify

JavaScript

Vanilla JSを用いた軽量のタグ入力機能を実装できる「Tagify」

TagifyはVanilla JSを用いた軽量のタグ入力機能を実装できるタグ入力コンポーネントです。入力フィールドやテキストエリアをタグ入力できる場所にしたい時にはピッタリですね。カスタマイズ性にも優れています。

Tagify

デモ

デモには、入力フィールドやテキストエリアを使ったタグ入力やオプションによるカスタマイズされたもの、jQueryプラグインバージョンなど、いろんな種類が用意されています。

ボックス内に任意のタグを入力してenterキーを押すとそのタグが登録される仕組みです。タグの右側にはバツ印が付いており、ここをクリックすることでそのタグを削減することもできます。

シンプルなタグ入力機能でとても使いやすく、また操作もしやすいですね。

オプションも豊富で、delimiters、pattern、duplicates、enforceWhitelist、autocomplete、whitelist、blacklist、addTagOnBlur、callbacks、maxTags、mapValueToProp、dropdown.enabled、dropdown.maxItems、dropdown.classnameといった項目が用意されています。

そのほか、destroy、removeAllTags、addTags、removeTagsといったメソッドやadd、remove、invalidといったイベントもあるので、カスタマイズ性もバッチリです。

Tagify

関連記事

  1. Rythim.js

    JavaScript

    音楽のリズムに合わせてボタンなどに躍動感を与える「Rythim.js」

    Rythm.jsは、あなたのホームページに躍動感を与えてくれるjsライ…

  2. jQuery Quick Modal
  3. no-image

    JavaScript

    背景にSVGによるライン(線)をランダムで生成する「ckLine.js」

    ckLine.jsは背景にSVGによるライン(線)をランダムで生成する…

  4. jTableScroll

    JavaScript

    ヘッダーとフッターを固定したままスクロール可能なテーブル「jTableScroll」

    jTableScrollはヘッダーとフッターを固定したままスクロール…

  5. Zebra_Tooltips

    JavaScript

    シンプルでスマートなツールチップを実装できる「Zebra_Tooltips」

    Zebra_Tooltipsは軽量でシンプルなツールチップを実装できる…

  6. jQuery.appear

    JavaScript

    ビューポート外のコンテンツ表示を防止できる「jQuery.appear」

    jQuery.appearは、元々は非表示となっているものや、ビューポ…

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP