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

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

関連記事

Javaのswitch-case文の構文や使い方を紹介+UFOキャッチャーの座標移動プログラムも紹介

<目次> (1) Javaのswitch-case文の構文や使い方を紹介  (1-1) switch-caseの構文  (1-2) else-if文との比較 (2) サンプルプログラムの紹介  (2- …

JavaScriptのMapでforeachを使って各要素を処理する方法

<目次> (1) JavaScriptのMapでforeachを使って各要素を処理する方法  (1-1) 構文  (1-2) サンプルプログラム  (1-3) 補足:functionの引数について ( …

JFreeChartの折れ線グラフ(LineChart)をより綺麗に見せるための11個のテクニック

(0)目次&概説 (1) 記事の目的 (2) LineChartの表示改善  (2-1)【線】線の太さを変更  (2-2)【線】各シリーズ(Series)毎に折れ線の色を設定  (2-3)【線】各シリ …

InputStreamやInputStreamReaderやBufferedReaderの機能や役割の違い+速度測定で比較をした結果共有

(0)目次&概説 (1) 記事の目的  (1-1) 目的  (1-2) 前提条件 (2) InputStreamやBufferedReaderとは?  (2-1) 概要  (2-2) InputStr …

JSPのコンパイル済ファイルの格納場所(Tomcat単体の場合、Eclipse連携の場合)

<目次> (1) JSPのコンパイル済ファイルの格納場所(Tomcat単体の場合、Eclipse連携の場合)  (1-1) Tomcatを単体で使用している場合  (1-2) Eclipseとアプリケ …

  • English (United States)
  • 日本語
Top