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. Mirror Effect

    JavaScript

    ミラーエフェクトによるかっこいいスライドショー実装「Mirror Effect」

    Mirror EffectはWebサイト内でかっこいいミラーエフェクト…

  2. no-image

    JavaScript

    かっこいいニュース・バナースライドショー実装「jQuery News Slider」

    jQuery News Sliderは、かっこいいニュース・バナースラ…

  3. flatpickr

    JavaScript

    超軽量で使い方もカンタンな日付ピッカー「flatpickr」

    flatpickrはjQueryなどのライブラリに依存することなく動作…

  4. flipLightBox
  5. no-image

    JavaScript

    フラットでシンプルなカラーピッカー実装「Pickr」

    Pickrはフラットでシンプルなカラーピッカーを実装できるのが特徴です…

  6. PreViewTube.js

最近の記事

  1. JOK-350 WH
  2. 1460 COLLAR ウォータープルーフ 8ホールブーツ
  3. スターバックス ハウスブレンド

アーカイブ

PAGE TOP