jQuery Tags Input

JavaScript

シンプルでお洒落なタグを入力することができるjQueryプラグイン「jQuery Tags Input」

とても便利で面白いjQueryプラグインがあったのでご紹介します。シンプルでお洒落なタグを入力して追加したり削減したりすることができる「jQuery Tags Input」です。複雑に散らばったコンテンツを整理したい時なんかに役立ちそうですね。以下、使い方です。

[ads_center]

使い方

jQueryとダウンロードしたプラグインをhead内に読み込みます。

<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1"></script>
<script src="jquery.tagsinput.js"></script>

セレクタに指定した要素にプラグインをセット。

<script>
$(function() {
    $('#tags').tagsInput();
});
</script>

HTMLはinput要素を用います。

<input id="tags" type="text" class="tags" value="tag1,tag2,tag3,tag4,tag5" />

タグを自由に追加したり削除したりすることができるので、とても手軽で便利ですね。詳しい使い方やオプションに関しては公式サイトをご確認ください。

ということで、以上、jQuery Tags Inputの使い方でした。

関連記事

  1. Shuffle Images

    JavaScript

    画像をシャッフルすることができるjQueryプラグイン「Shuffle Images」

    Shuffle ImagesというjQueryプラグインを使えば、画像…

  2. Progressively

    JavaScript

    画像を徐々に読み込んでくれるJSライブラリ「Progressively」

    Progressivelyは画像を徐々に読み込ませることができるJSラ…

  3. Bootstrap Dropdown Hover
  4. Brusher

    JavaScript

    インタラクティブな背景を実装できる「Brusher」

    Brusherはインタラクティブな背景を実装できる軽量なJavaScr…

  5. animateClick

    JavaScript

    ボタンクリック時にアニメーションをつけれる「animateClick」

    animateClickはボタンをクリックしたときにアニメーションをつ…

  6. no-image

    JavaScript

    依存関係のないタグ付け機能を実装できる「taggle.js」

    taggle.jsは依存関係のないタグ付け機能を実装できるのが特徴です…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP