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

jquery-calendarレスポンシブ対応でスケジュール管理もできるカレンダー「jquery-calendar」前のページ

シンプルで高性能なラジオボタンを実装できる「Simple button radios」次のページSimple button radios

関連記事

  1. Dropit

    JavaScript

    シンプルでフレキシブルなドロップダウンメニュー「Dropit」

    Dropitはシンプルでフレキシブルなドロップダウンメニューを実装でき…

  2. css3-mediaqueries-js

    JavaScript

    Media QueriesをIE8以下でも使えるようにするための「css3-mediaqueries…

    前回、Media Queriesの@mediaを使用したCSSをまとめ…

  3. jQuery PieTimer

    JavaScript

    時間の経過とともに円形が欠けていくタイマー「jQuery PieTimer」

    jQuery PieTimerは時間の経過とともに円形のデザインが欠け…

  4. Shave

    JavaScript

    設定した高さに基づいて複数行のテキストを切り取る「Shave」

    Shaveは設定した最大の高さに基づいてHTML要素内に収まるように複…

  5. jQuery Scrollify

    JavaScript

    セクションごとにスクロールしてくれる「jQuery Scrollify」

    jQuery Scrollifyはセクションごとにスクロールしてくれる…

  6. BIDEO.JS

    JavaScript

    背景動画をフルスクリーンで表示させるJSライブラリ「BIDEO.JS」

    BIDEO.JSは、webページの背景にフルスクリーンで動画を表示させ…

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP