JavaScript

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

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

insignia

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

insignia

デモ

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

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

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

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

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

insignia

マルチレベルで操作性に優れたレスポンシブ対応のjQueryナビゲーション前のページ

Macの「command + z」で消えたものを元に戻すショートカットキーのやり方次のページcommand + Zを戻す

関連記事

  1. JavaScript

    レスポンシブ対応で優雅なエフェクトが印象的なjQueryスライダー「Juicy Slider」

    レスポンシブに対応している軽量のjQueryスライダー「Juicy S…

  2. no-image

    JavaScript

    シンプルで軽量なスクロールアニメーション実装「animateMePlz」

    animateMePlzはシンプルで軽量なスクロールアニメーションを実…

  3. Zoomify

    JavaScript

    画像ズーム効果によるシンプルなライトボックスを実装できる「Zoomify」

    Zoomifyは、画像のズーム効果を備えたシンプルなライトボックスのた…

  4. no-image

    JavaScript

    レスポンシブでマルチレベルに対応したナビゲーション「K-Responsive-Menu」

    K-Responsive-Menuは、レスポンシブでマルチレベルに対応…

  5. JQuery Clock

    JavaScript

    シンプルなアナログ時計を実装できる「JQuery Clock」

    JQuery Clockはシンプルなアナログ時計を実装できます。画像を…

  6. no-image

    JavaScript

    シンプルなバナースライドショーを実装できる「jsslider」

    jssliderはシンプルなバナースライドショーを実装できるjQuer…

最近の記事

  1. 広尾 スタバ
  2. 芳醇な香りのラムレーズンサンド
  3. Aモーニングセット
  4. 白トリュフの塩パンやメロンパンなど
  5. 東京都現代美術館

アーカイブ

PAGE TOP