Rainbow Engine

IT技術を分かりやすく簡潔にまとめることによる学習の効率化、また日常の気付きを記録に残すことを目指します。

Java JavaScript JSP/Servlet

JavaScriptでタグを追加する方法(jQueryのtagEditorプラグインを導入)

投稿日:2021年6月18日 更新日:

 

<目次>

(1) JavaScriptでタグを追加する方法(jQueryのtagEditorプラグインを導入)
 (1-1) 概要
 (1-2) tagEditorの導入方法
 (1-3) サンプル①:tagEditorでHello World

(1) JavaScriptでタグを追加する方法(jQueryのtagEditorプラグインを導入)

(1-1) 概要

Webページ等でテキストボックスに入力した値がタグ(色付きのボックスのような形式)で表示されているのを見たことがありますでしょうか?

(図111)タグのイメージ図
 
これはJavaScriptのライブラリであるjQueryのプラグイン「tagEditor」によって実現が可能です。今回はタグエディタを導入して、そこからHello World(初期値を指定してタグを表示する)手順をご紹介します。
 

(1-2) tagEditorの導入方法

①ダウンロード

「tagEditor」のホームぺージ(下記URL)に移動して「Download」ボタンを押下します。

 
(図121)tagEditorダウンロード

 

②サーバに配備

上記でダウンロードした資源のうち、下記のjsとcssをサーバ内の、ご自身のプロジェクト内(Javaなら動的WebプロジェクトのWebContent内の任意のパス)に配置します。
 
・jquery.tag-editor.js
・jquery.tag-editor.css
 
(図122)

 

配備は、Linux系OSの場合はTeraTermなど、Windows系OSの場合はリモートデスクトップ等で資源を移動します。以下はCentOSでTeraTermのSSH SCP転送を使用している例です。
 
(図123)
 
以下は配置が完了した例です。
 
(図124)
 
ここまで完了したら、実際にHelloWorld用の簡単な画面を用意していきます。
 

(1-3) サンプル①:tagEditorでHello World

(構文)
特徴としてtagEditorメソッドの引数としてオブジェクトを渡しますが、その中でタグの設定をつかさどる各種プロパティの値をセットしていきます(例:タグの初期値、デリミタ、空白時のメッセージなど)。
 
$(‘#[要素id]’).tagEditor({
    [プロパティ1]:[値1],
    [プロパティ2]:[値2],
    [プロパティ3]:[値3],
    …
});

//(例)
$('#demo1').tagEditor({
    initialTags: ['Hello', 'World', 'Example', 'Tags'],
    delimiter: ', ', /* space and comma */
    placeholder: 'Enter tags ...'
});

(表)tagEditorのHello Worldで使用するプロパティ

initialTags 初期値として表示するタグを指定します。

[‘タグ1’, ‘タグ2’, ‘タグ3’, ‘タグ4’,….]

(例)
[‘Hello’, ‘World’, ‘Rainbow’]

delimiter 非表示になっているtextareaにおいて、タグの値を何の記号で連結しているか?を指定します。例えば、カンマ「,」を指定した場合は値は裏のテキスト値は次のようになっています。

Hello,World,Rainbow

placeholder タグが無い状態でボックスに表示するメッセージを指定しています。

(例)
ここにタグを入力してください・・・

(サンプルプログラム)
冒頭の<script>で必要なjQueryライブラリ等をインポートしつつ、途中の<script>では上記の構文を使ってタグエディタを初期化しています。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="js_tagedit/jquery.tag-editor.js" ></script>
<link rel="stylesheet" href="./css_tagedit/jquery.tag-editor.css" >

<script type='text/javascript' >
//# $(document).ready()の省略形で、document準備完了時にtagEditorを初期化
$(function(){
    //# textareaにタグエディタ(tagEditor)をアサイン
    $('#tagedit_test').tagEditor({
        initialTags: ['Hello','World','Rainbow'],
        delimiter: ',',
        placeholder: 'Enter tags...'
    });
});
</script>
<title>JavaScript tagEditor Test</title>

</head>
<body>

<h2>■tagEditorの疎通チェック</h2>
<textarea id="tagedit_test"></textarea>

</body>
</html>

 

(図131)実行結果

(図132)実行結果(拡大図)

(図133)プログラムイメージ

目次にもどる

Adsense審査用広告コード


Adsense審査用広告コード


-Java, JavaScript, JSP/Servlet

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

double型で誤差が発生する件について+発生事例やサンプルプログラムも紹介

<目次> (1) double型では誤差が発生する事について  (1-1) double型は近似値を使用している  (1-2) double型の誤差の例 (1) double型で誤差が発生する件につい …

jQueryの$(document).ready()とは?意味や使い方をご紹介

<目次> (1) jQueryの$(document).ready()とは?意味や使い方をご紹介  (1-1) 「$(document).ready()」とは?  (1-2) サンプルプログラム  ( …

Javaのフォーム認証でログインを行うと数回で固まってしまう事象の対処記録

<目次> (1) Javaのフォーム認証でログインを行うと数回で固まってしまう事象の対処記録  (1-1) 発生事象・エラーメッセージ  (1-2) 原因  (1-3) 対策 (1) Javaのフォー …

セッションIDとは?JSPでsessionを保存&取得するサンプルプログラムと代表的なメソッド紹介

(0)目次&概説 (1) セッションとは  (1-1) 概要  (1-2) サンプルプログラム   (1-2-1) 概要&画面遷移   (1-2-2) HelloSession.jsp   (1-2- …

Servlet(サーブレット)におけるフォワード(forward)とリダイレクト(redirect)の違い

<目次> (1) Servlet(サーブレット)におけるフォワード(forward)とリダイレクト(redirect)の違い  (1-1) フォワード(forward)とは?  (1-2) リダイレク …

  • English (United States)
  • 日本語
Top