スクリプト開発向けタグライブラリ

imuiIconPicker

コンポーネント情報
モジュールim_tenant
導入されたバージョン8.0.17
バージョン8.0.17

機能説明

テナントで管理されているアイコンを選択・表示するためのコンポーネントです。このコンポーネントではテナントで管理するアイコンを選択し、そのアイコンを表すアイコンIDを取得可能です。
アプリケーションは、アイコンIDを永続化することでユーザが選択したアイコンを常に表示することが可能です。
選択したアイコンを表示する場合はimuiShowIconタグを利用してください。アイコン管理画面でステータスが非公開となっているアイコンはアイコン選択ダイアログに表示されません。

アイコンピッカータグの要素



アイコンピッカータグは以下の要素から成り立ちます。

パレット


このコンポーネントが現在選択しているアイコンを表示する領域です。クリックすることでアイコン選択ダイアログが表示されます。
callerId属性を指定し任意の要素からアイコン選択ダイアログを表示する場合パレットは出力されません。

アイコン選択ダイアログ


テナントで管理されているアイコンの一覧を表示し、選択するダイアログです。
アイコン名やサイズでアイコンの絞り込みを行うことが可能です。
タグの属性に絞り込み条件を指定することで、条件に当てはまるアイコンのみダイアログに表示させることが可能です。
アイコンの利用用途に応じて適切に絞り込みを行ってください。

絞り込み条件



アイコン選択ダイアログで表示するアイコンを絞り込む条件は以下の通りです。

サイズ


アイコン選択ダイアログで選択可能とするアイコンのサイズ。アイコンのサイズは縦／横同一サイズです。
size属性で指定します。
以下のサイズが指定可能です。
  • 16
  • 24
  • 32
  • 48
  • 64
  • 128

アイコンの種類


アイコンの実データの形式。
iconType属性で指定します。
以下の値が指定可能です。
  • csssprite
    • Webサーバ上の画像ファイルとしてCSS Spriteとして存在するアイコン群です。
  • image
    • テナントで管理されているPNG, JPEG, GIF形式のアイコン群です。
  • svg
    • テナントで管理されているSVG形式のアイコン群です。
  • image_path
    • Webサーバ上の画像ファイルとして存在するアイコン群です。

カテゴリ


アイコンのカテゴリ。
category属性で指定します。
カテゴリは各モジュールが提供します。IM-Jugglingで選択していないモジュールが提供するカテゴリは利用できません。
標準で提供しているカテゴリは以下の通りです。
  • Standard
    • 基盤機能
  • LogicDesigner
    • IM-LogicDesigner
  • Workflow
    • IM-Workflow
  • IMBox
    • IMBox
  • EventNavigator
    • イベントナビゲータ

アイコンIDについて



アイコンIDを取得する方法は以下の通りです。

hiddenタグ


name属性を指定することで指定したname属性を持つhiddenタグが出力されます。
アイコン選択ダイアログでアイコンを選択すると、このhiddenタグのvalue属性にアイコンIDが設定されます。
ただし、onSelect属性でコールバック関数を指定している場合hiddenタグにアイコンIDが設定されません。
この場合のアイコンIDの取得方法については hiddenタグを利用したアイコンIDの取得 を参照してください。

onSelectコールバック


onSelect属性を指定することで指定したコールバック関数を実行することが可能です。
コールバック関数の引数としてアイコンIDを含むアイコン情報が取得可能です。
アイコン情報の取得方法については onSelect属性のコールバック関数を利用したアイコン情報の取得 を参照してください。
注意事項
  • アイコン種別 “image” はdata URL scheme形式で出力されます。この形式のアイコンを多数配置した場合画面表示が遅延する可能性があります
  • アイコン種別 “image_path” はimgタグが出力されます。この形式のアイコンを多数配置した場合、それぞれのimgタグがリクエストを発行するため画面表示が遅延する可能性があります。

属性一覧

  • String(function)と記述がある属性に指定できるのは文字列のみです。指定する文字列は、windowスコープから参照できるファンクション名です。
注釈 属性名 型 説明 省略時の動作
callerId String アイコン選択ダイアログを表示する要素のID属性を指定します。
指定した要素をクリックすることでアイコン選択ダイアログが表示されます。
この属性を指定した場合パレットが表示されません。		 -
category String アイコン選択ダイアログに表示するアイコンのカテゴリを指定します。
複数のカテゴリを指定する場合はカンマ（,）を区切り文字とし値を列挙します。
（例） Standard,Workflow		 テナントに存在するすべてのカテゴリが列挙されます。
height Number アイコン選択ダイアログの高さをpx単位で指定します。整数で指定してください。 600
iconId String パレットに初期表示したいアイコンIDを指定します。 -
iconType String アイコン選択ダイアログに表示するアイコンの実データの形式を指定します。
複数の形式を指定する場合はカンマ（,）を区切り文字とし値を列挙します。
（例） csssprite,image_path		 csssprite,image,svg,image_path
id String アイコン選択時に表示されるダイアログ要素のid属性のprefixを指定します。この属性で指定した値に “-dialog” を付与した値が実際の属性値として出力されます。 ユニークな文字列が生成されます。
name String アイコンIDを取得するためのhiddenタグを出力する場合に、hiddenタグのname属性を指定します。
この属性を指定しない場合、hiddenタグは出力されません。		 -
onSelect String(function) アイコン選択ダイアログでアイコンを選択した場合のコールバック関数を指定します。
指定しない場合はパレットに選択したアイコンが表示されます。
コールバック関数の引数にはアイコンを表すjQueryオブジェクトが渡されます。
引数のjQueryオブジェクトが持つ属性 “data-im-ui-icon-id” を取得することで選択したアイコンIDを取得可能です。
引数のjQueryオブジェクトの子要素を任意の要素に追加することで選択したアイコンを要素内に展開することが可能です。		 -
size String アイコン選択ダイアログに表示するアイコンのサイズを指定します。
複数のサイズを指定する場合はカンマ（,）を区切り文字とし数字を列挙します。
（例） 16,32		 16,24,32,48,64,128
国際化 title String アイコン選択ダイアログのタイトル文字列を指定します。 -
Boolean属性 useHelp Boolean アイコン選択ダイアログのタイトル部にサイトツアーを呼び出すアイコンを表示するかどうかを指定します。 true
width Number アイコン選択ダイアログの幅をpx単位で指定します。整数で指定してください。 850
zIndex Number アイコン選択ダイアログのz-indexの値を指定します。 1000
無害化 その他 String アイコン選択ダイアログの要素に出力する任意の属性を指定します。 -

サンプル

パレット

パレット

アイコン選択ダイアログ

アイコン選択ダイアログ

iconId属性を利用したパレットの初期表示

iconId属性を利用したパレットの初期表示
iconId属性を指定することでパレットの初期表示時に指定したアイコンが表示されます。
プレゼンテーションページ
<imart type="imuiIconPicker" name="icon-id" iconId="im-ui-icon-common-32-tick_32" />

hiddenタグを利用したアイコンIDの取得

name属性を指定することで出力されるhiddenタグからアイコンIDを取得可能です。
プレゼンテーションページ
<imart type="imuiIconPicker" name="icon-id" />
CSJS
// name属性が 'icon-id'である要素のvalue値を取得する。
jQuery('[name=icon-id]').val();

onSelect属性のコールバック関数を利用したアイコン情報の取得

onSelect属性のコールバック関数を利用したアイコン情報の取得
callerId属性にbutton要素を指定することでボタンによるアイコン選択ダイアログの起動を行います。
onSelect属性に指定したコールバック関数により、アイコンIDとアイコン要素を描画します。
プレゼンテーションページ
<imart type="imuiIconPicker" callerId="open" onSelect="selectHandle"/>
<!-- アイコン選択ダイアログ起動ボタン -->
<button type="button" id="open">Open dialog</button>
<!-- アイコン情報表示領域 -->
<span id="icon-aria"></span>
CSJS
function selectHandle(icon) {
    // アイコンIDの取得
    var iconId = icon.attr('data-im-ui-icon-id');
    // アイコン要素の取得
    var $iconElement = icon.children();
    // アイコンエリアの初期化、および、アイコンIDとアイコン要素の描画
    jQuery('#icon-aria').empty().append(iconId).append($iconElement);
}

size属性表示アイコンサイズの指定

size属性表示アイコンサイズの指定
iconId属性を指定することでパレットに初期表示時のアイコンを指定します。
プレゼンテーションページ
<imart type="imuiIconPicker" name="icon-id" size="16,32" />

setIconメソッド

setIconメソッドを利用して現在選択中のアイコンをアイコンIDで指定します。
プレゼンテーションページ
<imart type="imuiIconPicker" id="icon-picker" name="icon-id" />
CSJS
// アイコン選択ダイアログの要素を取得
var $dialog =jQuery('#icon-picker-dialog');
// アイコンピッカーのメソッド 'setIcon' を利用してアイコンID 'im-ui-icon-common-32-tick_32' を設定
$dialog.imuiIconPicker('setIcon', 'im-ui-icon-common-32-tick_32');

Copyright © 2012 NTT DATA INTRAMART CORPORATION