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の使い方でした。

GW-S5600-1JFG-SHOCKの原点が受け継がれるファーストモデル直系の「GW-S5600-1JF」購入レビュー前のページ

Webサイト高速化にするための必要項目を教えてくれるGoogleツール「PageSpeed Insights」次のページPageSpeed Insights

関連記事

  1. no-image
  2. Instafeed.js

    JavaScript

    Webサイト内にInstagramの画像を表示できる「Instafeed.js」

    Instafeed.jsはWebサイト内にInstagramの画像一覧…

  3. Dynamic Table

    JavaScript

    スプレッドシートのようなテーブルを実装できるjQueryプラグイン「Dynamic Table」

    Dynamic Tableはスプレッドシートのような高機能なテーブルを…

  4. SmartPhoto.js

    JavaScript

    レスポンシブなイメージビューアを実装できる「SmartPhoto.js」

    SmartPhoto.jsは、レスポンシブに対応したかっこいいイメージ…

  5. suitabs

    JavaScript

    横や縦にスライドできるスライドショー&タブ実装のjQueryプラグイン「suitabs」

    suitabsはスライドショー&タブを実装することができるjQuery…

  6. Enllax.js

    JavaScript

    軽量で簡単なパララックスを実装できるjQueryプラグイン「Enllax.js」

    Enllax.jsは軽量で使い方も簡単なパララックスエフェクトを実装す…

コメント

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

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

最近の記事

  1. RF85mm F2 MACRO IS STM
  2. Anker PowerWave Pad Alloy
  3. Anker Bolder LC30
  4. BG-R10

アーカイブ

PAGE TOP