読者です 読者をやめる 読者になる 読者になる

Knowledge

オープンソースで情報共有のサービス「Knowledge」を作っています。ブログでは、サービスの説明や開発で得た情報などを書いていきます。https://information-knowledge.support-project.org

タグを設定する入力項目を作成 - 「Bootstrap Tags Input」

タグの入力項目

  • 情報に「タグ」を付けて管理するというユーザインタフェースが増えてきたように思います
  • ただ、このタグ付けのUIを自分でいちから実装するのは、けっこう大変です
  • そこで、今回紹介するのが、「Bootstrap Tags Input」です

Bootstrap Tags Input

  • タグのインタフェースを簡単に組み込めます
  • その名の通り、Bootstrapを利用したUIに最適になっています
  • スクリーンショット(下)のような入力項目を提供できます

f:id:koda3:20150120232847p:plain

  • プロジェクトのウェプサイト(サンプル動作を確認できます)

Bootstrap Tags Input

ライブラリの取得

  • bower で取得します
bootstrap-tagsinput": "0.4.2"
bower install

ライブラリの利用の指定

  • bowerで取得したライブラリを読み込みます
<link rel="stylesheet" href="bower/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" />
<script type="text/javascript" src="bower/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>

タグの入力項目の作成

  • テキスト入力のタグに、data-role="tagsinput"を追記するだけで、タグの入力項目になります
 :
<input type="text" class="form-control" name="tags" id="input_tags" placeholder="Tags" data-role="tagsinput" value="tag1 tag2" />
 :

簡単に組み込めますので、ご参考までに。