JavaScript

カスタマイズ性に優れたタグ入力ができるJSライブラリ・insignia

insigniaはカスタマイズ性に優れたタグ入力を実装することができるJSライブラリです。フォームにキーワードを入力することで簡単にタグ化することができます。設定でタグ区切りを指定したりすることも可能です。

insignia

以下はinsigniaのデモになります。実際のタグ入力を試してみたいという方は是非チェックしてみてください。

insignia

デモ

複数のタグを区切り記号を用いて追加させたい場合は、以下のようにdelimiterにタグを区切るための記号を設定します。

insignia(input, {
    delimiter: ','
});

上記は「,」を入れることで複数タグを入力していくことが可能になります。

他にもdeletionの値をtrueにすることで、タグを削減することができるようになります。この場合はタグの横にバツ印が表示されるようになるので、これをクリックすることで入力したタグを削減することができます。

こんな感じでいろいろとカスタマイズがしやすいタグ入力のフォームを実装することができるので、覚えておいて損はなさそうですね。

insignia

関連記事

  1. JavaScript

    シンプルで使いやすいベーシックなスライドショーを実装できるjQueryプラグイン「Basic jQu…

    jQueryスライダーのネタが多いですが、今日もまたスライダーのプラグ…

  2. Yamm 3

    JavaScript

    メガメニューをBootstrap3で実装する「Yamm 3」

    Yamm 3はメガメニューをBootstrap3を使って実装することが…

  3. normalmap.js

    JavaScript

    インタラクティブなライティングエフェクトを実装できる「normalmap.js」

    normalmap.jsはシンプルでインタラクティブなライティングエフ…

  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでアニメーションを遅らせるにはdelayを使えばいいらしい

    ちょっとしたメモです。jQueryでanimateをメソッドチェーンで…

  5. ShowMore.js

    JavaScript

    長いコンテンツを折りたためるjQueryプラグイン「ShowMore.js」

    ShowMore.jsは長いコンテンツを折りたたんで表示・非表示を簡単…

  6. table-dragger

    JavaScript

    ドラッグ&ドロップでテーブルを並べ替えられる「table-dragger」

    table-draggerはドラッグ&ドロップでテーブルの並べ替えを可…

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP