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

FREVRシンプルな無限スクロールを実装できるjQueryプラグイン「FREVR」前のページ

かっこいいダミー画像を読み込めるWebサービス「Unsplash It」次のページUnsplash It

関連記事

  1. jLetter

    JavaScript

    テキストを散らばせながら次々と表示させることができるjQueryプラグイン「jLetter」

    シンプルでちょっと目を引かせたいところなんかによさそうだったので使って…

  2. Sticky Elements

    JavaScript

    エレメントがくっついてくるアニメーション「Sticky Elements」

    Sticky Elementsはエレメントにカーソルを乗せるとくっつい…

  3. evol-colorpicker

    JavaScript

    マイクロソフト オフィス2010のようなカラーピッカー「evol-colorpicker」

    evol-colorpickerは、マイクロソフト オフィス2010の…

  4. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量のJavaScriptプラグイン「justlazy.js」

    justlazy.jsは画像の遅延読み込みを実装することができるJav…

  5. no-image
  6. Tag-it

    JavaScript

    サジェスト機能を搭載したタグ編集ウィジェット「Tag-it」

    Tag-itはサジェスト機能を搭載したjQuery UIプラグインによ…

最近の記事

  1. 成城石井 フレンチロースト
  2. COMOLI カシミアシルクニットパーカ
  3. 橋
  4. 梅と久保田城
  5. マワマット26

アーカイブ

PAGE TOP