Materialize Tags

JavaScript

マテリアルデザインのタグ管理を実装できる「Materialize Tags」

Materialize Tagsは、マテリアルデザインのタグ管理を実装することができるjQueryプラグインです。input要素によるテキストボックスに入力されたキーワードをタグとして表示することが可能です。Materializeをベースに作られています。

Materialize Tags

デモ

デモページにはいくつかのサンプルが設置されています。例えば、上にあるBasicタイプのサンプルでは「Tags」と表示されているテキストボックスに文字を入力するとタグとして表示させることができます。

タグの横にはバツ印が付いていて、ここをクリックするとタグを削減することが可能です。

ほかにも、あらかじめ特定のキーワードをタグとして表示させたり文字を入力した際にキーワードの候補を表示させたりといった機能も加えることができます。

また、Materialize Tagsにはオプションもいろいろ用意されていて、tagClass、itemValue、itemText、confirmKeys、maxTags、maxChars、trimValue、allowDuplicates、freeInput、typeahead、concelConfirmKeysOnEmpty、onTagExistsといった項目のセッティングが可能です。そのほか、イベントなどの設定もできるのでカスタマイズして使いたい人にもうれしい仕様ですね。

Materialize Tags

関連記事

  1. flexible-bootstrap-carousel
  2. Sliding Panels Template
  3. Simple button checks

    JavaScript

    カスタマイズ可能なチェックボックスを実装できる「Simple button checks」

    Simple button checksはカスタマイズ可能なチェックボ…

  4. no-image

    JavaScript

    フォームに文字制限を設定できるjQueryプラグイン「Character Limit」

    Character Limitは、フォーム要素に文字制限を設定するため…

  5. Thumbelina

    JavaScript

    サムネイル画像のギャラリーに最適なコンテンツスライダー「Thumbelina」

    Thumbelinaは、サムネイル画像に最適なコンテンツスライダーを実…

  6. no-image

    JavaScript

    スマホなどに最適なテーブルを実装できる「Mobile-Friendly Table」

    Mobile-Friendly Tableはスマホなどのモバイルに最適…

最近の記事

  1. 広尾のスタバ
  2. マーガレットハウエルとミズノのコラボシューズ
  3. フレンチトーストや自家製ソーセージ
  4. ハレイワ スムージー
  5. クローバーで淹れたコーヒー

アーカイブ

PAGE TOP