機能説明

  • ダイアログを作成します。
  • Internet Explorerでは、ダイアログに配置するコンポーネントの組み合わせによっては、ダイアログの高さが意図せず増加する場合があります
  • closeOnEscape=“true” かつ modal=“true” を指定したダイアログの中でさらに closeOnEscape=“true” かつ modal=“true” を指定したダイアログを開いた後、オーバーレイ(黒い部分)をクリックし、エスケープキーを押すと2つ目のダイアログではなく1つ目のダイアログが閉じます。これを回避するには closeOnEscape=“false” を指定してください。

属性一覧

注釈 属性名 説明 省略時の動作 実行時評価
autoHeight Integer ウィンドウの高さを基準とし、相対的な高さ指定します
80 と指定した場合、ウィンドウに対して80パーセントの高さでダイアログを表示します
height 属性を指定していた場合、height 属性は無視されます
本属性は Ver.8.0.20 以降のバージョンで使用可能です
-
Boolean属性 autoOpen Boolean 画面表示時に、ダイアログを表示するかどうかを指定します true
autoWidth Integer ウィンドウの横幅を基準とし、相対的な横幅を指定します
80 と指定した場合、ウィンドウに対して80パーセントの横幅でダイアログを表示します
width 属性を指定していた場合、width 属性は無視されます
本属性は Ver.8.0.20 以降のバージョンで使用可能です
-
buttons java.util.List<java.util.Map<String, Object>> ダイアログ下部に表示するボタンを指定します
詳細は下記の buttons を参照してください
-
Boolean属性 closeOnEscape Boolean エスケープキーでダイアログを閉じるかどうかを指定します true
createItems String ダイアログ内のツールバーを生成するcsjsの関数名を指定します
toolbarLeft、toolbarRight属性のいずれかが指定されている場合にのみ有効です
$.imui.util.createToolbarItems
無害化 dialogClass String ダイアログに追加したいクラスを指定します -
Boolean属性 draggable Boolean ダイアログがドラッグ移動できるかどうかを指定します true
height Integer ダイアログの縦幅を指定します -
HTML5
Boolean属性
hidden Boolean ダイアログを非表示にします false
hide java.util.Map<String, String> String ダイアログを閉じる際のアニメーションを指定します
詳細は下記の hide、show を参照してください
-
id String ダイアログのidです 代替idを付与
maxHeight Integer ダイアログの縦幅の上限を指定します -
maxWidth Integer ダイアログの横幅の上限を指定します -
minHeight Integer ダイアログの縦幅の下限を指定します 150px
minWidth Integer ダイアログの横幅の下限を指定します 150px
Boolean属性 modal Boolean ダイアログ表示時に背面の操作制限を指定します false
name String ダイアログのnameです 代替nameを付与
onBeforeClose String onBeforeCloseイベント時に実行する関数名を指定します -
onClose String onCloseイベント時に実行する関数名を指定します -
onCreate String onCreateイベント時に実行する関数名を指定します -
onDrag String onDragイベント時に実行する関数名を指定します -
onDragStart String onDragStartイベント時に実行する関数名を指定します -
onDragStop String onDragStopイベント時に実行する関数名を指定します -
onFocus String onFocusイベント時に実行する関数名を指定します -
onOpen String onOpenイベント時に実行する関数名を指定します -
onResize String onResizeイベント時に実行する関数名を指定します -
onResizeStart String onResizeStartイベント時に実行する関数名を指定します -
onResizeStop String onResizeStopイベント時に実行する関数名を指定します -
position java.util.List<Integer> String ダイアログの表示位置を指定します
詳細は下記の position を参照してください
-
Boolean属性 resizable Boolean ダイアログがリサイズできるかどうかを指定します true
show java.util.Map<String, String> String ダイアログを開く際のアニメーションを指定します
詳細は下記の hide、show を参照してください
-
Boolean属性 stack Boolean ダイアログが、他のダイアログの上に積み重ねできるかどうかを指定します true
国際化 無害化 title String ダイアログのタイトルを指定します -
toolbarLeft java.util.List<java.util.Map<String, Object>> ダイアログのタイトル直下に表示するツールバーへ、左寄せで表示する内容を指定します
詳細は下記の toolbarLeft、toolbarRight を参照してください
-
toolbarRight java.util.List<java.util.Map<String, Object>> ダイアログのタイトル直下に表示するツールバーへ、右寄せで表示する内容を指定します
詳細は下記の toolbarLeft、toolbarRight を参照してください
-
Boolean属性 useHelp Boolean ダイアログのタイトル部にサイトツアーを呼び出すアイコンを表示するかどうかを指定します
本属性は Ver.8.0.10 以降のバージョンで使用可能です
詳細は下記の useHelp を参照してください
false
width Integer ダイアログの横幅を指定します 300px
zIndex Integer ダイアログの重ね合わせ順序を指定します 1000
無害化 その他 String ユーザ定義属性です -

サンプル

buttons

buttons
  • buttonsには以下のオブジェクトを指定してください。
注釈 属性名 説明 省略時の動作
id Stringボタンのidを指定します 代替idを付与
name Stringボタンのnameを指定します 代替nameを付与
必須無害化国際化 text Stringボタンに表示される文字列を指定します -
必須 click Stringボタンクリックイベント時に実行する関数を指定します-
JSP
<%
List<Map<String, Object>> sampleButtons = new ArrayList<Map<String, Object>>();
{
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("text", "登録");
    map.put("click","button_ok");
    sampleButtons.add(map);
}
{
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("text", "取り消し");
    map.put("click","button_ng");
    sampleButtons.add(map);
}
%>
<imui:dialog buttons="<%= sampleButtons %>" />
<script type="text/javascript">
  function button_ok() {
    alert('登録ボタンを押下しました');
  }
  function button_ng() {
    alert('取り消しボタンを押下しました');
  }
</script>

toolbarLeft、toolbarRight

toolbarLeft、toolbarRight
  • toolbarLeft、toolbarRightには以下のオブジェクトを指定してください。
注釈 属性名 説明 省略時の動作
必須無害化href Stringクリック時の遷移先のパスを指定します -
無害化 iconClassStringアイコン表示用のCSSクラス名を指定します
CSS Sprite Image List を参照してください
-
無害化国際化 text Stringアンカータグのテキスト属性を指定します -
無害化国際化 title Stringアンカータグのタイトル属性を指定します
カーソルを乗せると表示されます
-
JSP
<%
List<Map<String, Object>> sampleToolbarLeft = new ArrayList<Map<String, Object>>();
{
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("href", "javascript:alert(\"toolbarLeft\");");
    map.put("iconClass","im-ui-icon-common-16-back");
    map.put("title","戻る");
    map.put("text","戻る");
    sampleToolbarLeft.add(map);
}
{
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("href", "javascript:alert(\"toolbarLeft\");");
    map.put("iconClass","im-ui-icon-common-16-calendar");
    map.put("title","カレンダー");
    map.put("text","カレンダー");
    sampleToolbarLeft.add(map);
}
%>
<imui:dialog toolbarLeft="<%= sampleToolbarLeft %>" />

hide、show

  • stringで指定する場合はeffectに指定できる値をそのまま指定してください。
  • Objectで指定する場合には以下のオブジェクトを指定してください。
注釈 属性名 説明 省略時の動作
必須effect Stringアニメーション動作の種類を指定します
詳しくは下記を参照してください
show: fade
hide: -
effectに応じた属性- effectに応じた値を指定してください
詳しくは こちら を参照してくだい
-
  • effectに指定できる値は以下になります。
effect名説明
blind 水平、または、垂直に表示、非表示をします
bounce 弾みながら表示、非表示をします
clip 中央に向かって表示、非表示をします
drop 外側に向かって移動しながらフェードアウト、または、外側から移動しながらフェードインします
explode 爆発するようにフェードイン、フェードアウトします
fade フェードアウト、または、フェードインします。ダイアログの初期値になります
fold 折りたたむように表示、非表示をします
highlight 背景色を強調してフェードします
puff 膨張しながらフェードアウト、または、収縮しながらフェードインします
pulsate 透明度を一定間隔で変更します
scale 拡大しながら表示、縮小しながら非表示になります
shake 揺れながら表示、非表示をします
size 指定したサイズに拡大、縮小しながら表示、非表示をします
slide 外側へ滑るように非表示にする、または、外側から滑るように表示します
JSP
<%
Map<String, String> sampleShow = new HashMap<String, String>();
sampleShow.put("effect", "explode");
%>

<imui:dialog id="show_dialog" autoOpen="false" show="<%= sampleShow  %>" />
<button class="imui-button" onclick="$('#show_dialog').imuiDialog('open');">open</button>

position

position
  • positionは以下の2通りの指定方法があります。
  1. arrayを指定する場合は表示領域における左端(x)、上端(y)、からの位置(ピクセル)を含む配列を指定してください。
  2. stringを指定する場合は以下の値のいずれかを指定してください。
position説明
center 画面の中央に表示します
left 画面の左端に表示します
right 画面の右端に表示します
top 画面の上部に表示します
bottom 画面の下部に表示します
JSP
<%
List<Integer> samplePosition = new ArrayList<Integer>();
samplePosition.add(100);
samplePosition.add(100);
%>
<imui:dialog position="<%= samplePosition %>">position=[100,100]</imui:dialog>
<imui:dialog position="top">position=top</imui:dialog>

onClose

  • onCloseイベント時にクライアントサイドJavaScriptで定義した関数を呼び出します。
JSP
<imui:dialog onClose="sampleFunction" />
<script type="text/javascript">
  function sampleFunction() {
    alert('sample');
  }
</script>

useHelp

useHelp
  • サイトツアーを実行するアイコンを表示することができます
  • 本属性は Ver.8.0.10 以降のバージョンで使用可能です
  • 以下はヘルプドロップダウンの認可設定に基づいた表示を行うサンプルプラグラムです
JSP
<%!
    private static final String CATEGORY_CD = "im_site_help_pc";
    private static final String MENU_ID = "start_help_pc";
    private boolean getUseHelp() throws MenuException {
        final MenuGroupManager groupManager = new MenuGroupManager();
        final List<String> ids = groupManager.getAvailableMenuGroupIds(CATEGORY_CD);
        if (ids.contains(MENU_ID)) {
            return true;
        }
        return false;
    }
%>

<imui:dialog useHelp="<%= getUseHelp() %>">
  <div class="imui-operation-parts">
    <button data-intro="help1">削除ボタン</button>
    <button data-intro="help2">更新ボタン</button>
  </div>
</imui:dialog>