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. NavSync

    JavaScript

    ナビゲーションとコンテンツが連動するjQueryプラグイン「NavSync」

    NavSyncはナビゲーションとコンテンツが連動してアニメーションする…

  2. simple-calendar

    JavaScript

    イベント設定もできるシンプルなカレンダー実装「simple-calendar」

    simple-calendarは、イベント設定も可能なシンプルなカレン…

  3. jQuery TextFill

    JavaScript

    テキストをリサイズしてコンテナにフィットさせる「jQuery TextFill」

    jQuery TextFillはテキストをリサイズしてコンテナにフィッ…

  4. anchor.js

    JavaScript

    ページ内リンクをスムーズにスクロール移動できるjQueryプラグイン「anchor.js」

    anchor.jsはページ内リンクをスムーズなスクロールで移動すること…

  5. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryの超基本的なアニメーションを試してみる

    jQueryの基本的なアニメーションを試してみました。やっぱりアニメー…

  6. Pilpil

    JavaScript

    プログレッシブ形式で画像表示時間を短縮してくれる「Pilpil」

    Pilpilは、ページの画像表示の時間を短縮するためのJSライブラリで…

コメント

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

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

最近の記事

  1. mill オイルヒーター
  2. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP