Class Index

ImBigDecimal ( Number/String val, [ImMathContext mc] )
変更が不可能な、任意精度の符号付き10 進数オブジェクト。
ImBigDecimal は、任意精度のスケールなしの整数値と、32 ビット整数のスケールで構成されます。
0 または正の場合、スケールは小数点以下の桁数です。負の場合、スケールなしの数値に、スケールの正負を逆にした値を指数とする10の累乗を乗算します。
詳細については、java の java.math.BigDecimal のAPIドキュメントを参照してください。
注意事項
ImBigDecimal の仕様は基本的には java の java.math.BigDecimal の仕様に従いますが、一部仕様が異なります。

  1. java.math.BigDecimal では文字列で初期化した場合と double 型や float 型を使用して初期化した場合では誤差が生じますが、 ImBigDecimal は誤差が生じません。 詳細は以下のサンプル2を参照してください。
  2. java.math.BigDecimal では divide(BigDecimal divisor) 実行時に正確な商を表現できない場合は ArithmeticException がスローされますが、ImBigDecimal では divide(ImBigDecimal divisor) 実行時に正確な商を表現できない場合でもエラーが発生しません。 詳細は以下のサンプル3を参照してください。

サンプルコード1 ImBigDecimal の使い方
<!-- ImBigDecimal の使用には下記スクリプト2ファイルを記載通りの順番に読み込んでください。 -->
<script src="ui/libs/bigdecimal-js/BigDecimal-all-last.min.js"></script>
<script src="ui/js/math/im_decimal.min.js"></script>
  :
  :
<script type="text/javascript">
  var value1 = new ImBigDecimal(1.23456);
  var value2 = new ImBigDecimal(1.23456, new ImMathContext(4, ImRoundingMode.UP));
  var value3 = new ImBigDecimal("1.23456");
  var value4 = new ImBigDecimal("1.23456", new ImMathContext(3, ImRoundingMode.HALF_UP));
  var value5 = value1.add(value2);
  console.log(value1.toPlainString()); // 1.23456
  console.log(value2.toPlainString()); // 1.235
  console.log(value3.toPlainString()); // 1.23456
  console.log(value4.toPlainString()); // 1.23
  console.log(value5.toPlainString()); // 2.46956
</script>

サンプルコード2 初期化の誤差
  • java.math.BigDecimal の場合
    BigDecimal numVal = new BigDecimal(1234.5678);
    BigDecimal strVal = new BigDecimal("1234.5678");
    System.out.println(numVal.toPlainString()); // 1234.567800000000033833202905952930450439453125
    System.out.println(strVal.toPlainString()); // 1234.5678
    System.out.println(numVal.equals(strVal));  // false
    
  • ImBigDecimal の場合
    var numVal = new ImBigDecimal(1234.5678);
    var strVal = new ImBigDecimal("1234.5678");
    console.log(numVal.toPlainString()); // 1234.5678
    console.log(strVal.toPlainString()); // 1234.5678
    console.log(numVal.equals(strVal));  // true
    

サンプルコード3 divide(ImBigDecimal divisor) の実行結果
  • java.math.BigDecimal の場合
    BigDecimal left = new BigDecimal("100");
    BigDecimal right = new BigDecimal("3");
    BigDecimal result = left.divide(right); // ArithmeticException がスローされます
    System.out.println(result.toPlainString());
    
  • ImBigDecimal の場合
    var left = new ImBigDecimal("100");
    var right = new ImBigDecimal("3");
    var result = left.divide(right);     // エラーが発生しません
    console.log(result.toPlainString()); // 33.33
    
Parameters
val : Number/String
ImBigDecimal に変換する Number 値あるいは ImBigDecimal の文字列表現。
mc : ImMathContext
使用するコンテキスト。
ImDate ( ) Static
日付データ操作オブジェクト。

日時データの操作を行います。
ImDecimalFormatter ( ) Singleton Static
数値文字列の整形および解析オブジェクト。

数値文字列の整形および解析を行います。
処理を行うにあたって、このAPIではクライアントサイドからサーバサイドに対して通信を行います。
スクリプト開発向けAPIのDecimalFormatterオブジェクトについてもあわせてご参照ください。
バージョン8.0.19より変換処理をクライアントサイドのみで行う機能が追加されました。
以下の条件の場合にクライアントサイドで変換処理を行います。
  1. 設定ファイル 数値形式マスタの csjs-path 属性に変換処理を行うパスが設定されていること
  2. スクリプト開発の場合スクリプト開発向けclientDecimalFormatScriptタグを、JavaEE開発の場合JavaEE開発向けclientDecimalFormatScriptタグを利用している画面であること
clientDecimalFormatScriptタグを利用していても、設定によってはサーバサイドで処理をする可能性があることを考慮して実装してください。
サーバサイドで処理した場合とクライアントサイドで処理をした場合で、コールバック関数の引数が異なります。どちらで動作してもエラーにならないように実装することを推奨します。

注意事項
  • ImDecimalFormatterを使用する場合は下記のようにImBigDecimalとImDecimalFormatterを読み込んでください。
    さらに、変換処理をサーバサイドのみで行いたい場合は下記のようにim_decimal_formatter.min.js以降にclientDecimalFormatScriptタグを読み込んでください。
  • <script src="ui/libs/bigdecimal-js/BigDecimal-all-last.min.js"></script>
    <script src="ui/js/math/im_decimal.min.js"></script>
    <script src="im_i18n/number/format/im_decimal_formatter.min.js"></script>
    <!-- クライアントサイドで変換処理を行いたい場合に記述してください。本サンプルはスクリプト開発向けです -->
    <imart type="clientDecimalFormatScript" />
    
  • clientDecimalFormatScriptタグを利用していない場合、設定ファイル数値形式マスタに csjs-path 属性を指定していても変換処理のたびにサーバへ通信を行います。
    クライアントサイドで変換処理を行いたい場合は必ずclientDecimalFormatScriptタグを利用してください。
  • csjs-path属性に標準で指定されているパスの変換処理は、設定ファイル数値形式マスタのparameterの有無によってクライアントサイドで処理を行わずサーバへ通信して処理を行います。
    以下のどれかに当てはまる場合、クライアントサイドで変換処理を行いません。
    • 「grouping-separator」が設定されていない
    • 「decimal-separator」が設定されていない
    • 「locale」が設定されている
    • 「pattern」が設定されている
以下は、数値のフォーマットを行うサンプルコードです。

サンプルコード
<script src="ui/libs/bigdecimal-js/BigDecimal-all-last.min.js"></script>
<script src="ui/js/math/im_decimal.min.js"></script>
<script src="im_i18n/number/format/im_decimal_formatter.min.js"></script>
<!-- クライアントサイドで変換処理を行いたい場合に記述してください。本サンプルはスクリプト開発向けです -->
<imart type="clientDecimalFormatScript" /> 
  :
  :
<script type="text/javascript">
  // フォーマットIDが"sample"であるフォーマットを利用します。
  var formatter = ImDecimalFormatter.getInstance("sample");
  // 数値の小数部分の部分の最大桁数を2桁に変更します。
  formatter.setMaximumFractionDigits(2);

  // 2つの数値をフォーマットし、指定した関数で結果を受け取ります。
  formatter.format([1234, -56.789], callbackFunc);

  // 結果を受け取るCallback関数です。
  function callbackFunc(data, textStatus, jqXHR) {
    var array = data.data;
    // フォーマット後の文字列は以下のように格納されています。
    // array[0] = "1,234", array[1] = "-56.79"
  }
</script>
ImMathContext ( Number precision, ImRoundingMode roundingMode )
数値演算子 (ImBigDecimal クラスによって実装されるものなど) の特定のルールを記述するコンテキスト設定をカプセル化する不変オブジェクト。
ベースに依存しない設定として、次のものがあります。
  1. precision: 演算に使用する桁数。結果はこの精度に丸められる。
  2. roundingMode: ImRoundingMode オブジェクト。丸め処理のためのアルゴリズムを指定する。

サンプルコード
<!-- ImMathContext の使用には下記スクリプト2ファイルを記載通りの順番に読み込んでください。 -->
<script src="ui/libs/bigdecimal-js/BigDecimal-all-last.min.js"></script>
<script src="ui/js/math/im_decimal.min.js"></script>
  :
  :
<script type="text/javascript">
  var value1 = new ImBigDecimal("1.23456");
  var value2 = new ImBigDecimal("1.23456", new ImMathContext(4, ImRoundingMode.UP));
  var value3 = value1.round(new ImMathContext(4, ImRoundingMode.DOWN));
  console.log(value1); // 1.23456
  console.log(value2); // 1.235
  console.log(value3); // 1.234
</script>
Parameters
precision : Number
負の数以外の精度設定(整数値)。
roundingMode : ImRoundingMode
使用する丸めモード。
ImRoundingMode ( ) Static
精度を破棄できる数値演算に対する丸め動作を指定するオブジェクト。

各丸めモードは、丸められた結果の返された最下位の桁の計算方法を指定します。
各丸めモードの記述には、2 桁の異なる 10 進数値を、当該の丸めモードで 1 桁の 10 進数値に丸める方法を示す表があります。 表の結果列は、指定された値を持つ ImBigDecimal 数を作成し、適切な設定 (precision が 1、roundingMode が当該の丸めモードに設定) を持つ ImMathContext オブジェクトを形成して、 適切な ImMathContext を使用してこの数値に対し round を呼び出すことで取得できます。 次に、すべての丸めモードの丸め演算の結果を示すサマリーテーブルを示します。

さまざまな丸めモードでの丸め演算のサマリー
特定の丸めモードで入力を 1 桁に丸めた結果
入力される数値 UP DOWN CEILING FLOOR HALF_UP HALF_DOWN HALF_EVEN UNNECESSARY
5.5 6 5 6 5 6 5 6 例外をスロー
2.5 3 2 3 2 3 2 2 例外をスロー
1.6 2 1 2 1 2 2 2 例外をスロー
1.1 2 1 2 1 1 1 1 例外をスロー
1.0 1 1 1 1 1 1 1 1
-1.0 -1 -1 -1 -1 -1 -1 -1 -1
-1.1 -2 -1 -1 -2 -1 -1 -1 例外をスロー
-1.6 -2 -1 -1 -2 -2 -2 -2 例外をスロー
-2.5 -3 -2 -2 -3 -3 -2 -2 例外をスロー
-5.5 -6 -5 -5 -6 -6 -5 -6 例外をスロー

サンプルコード
<!-- ImRoundingMode の使用には下記スクリプト2ファイルを記載通りの順番に読み込んでください。 -->
<script src="ui/libs/bigdecimal-js/BigDecimal-all-last.min.js"></script>
<script src="ui/js/math/im_decimal.min.js"></script>
  :
  :
<script type="text/javascript">
  var value1 = new ImBigDecimal("1.23456");
  var value2 = value1.round(new ImMathContext(4, ImRoundingMode.DOWN));
  var value3 = value1.setScale(3, ImRoundingMode.UP);
  console.log(value1); // 1.23456
  console.log(value2); // 1.234
  console.log(value3); // 1.235
</script>
_global_ ( )
No description.
imspShowErrorMessage ( String message, [String/String[] detail], [Object options] )
指定されたエラーメッセージを表示します。

detail には String、または String の配列を指定します。
imspShowErrorMessage('失敗しました');
// 詳細なメッセージを指定
imspShowErrorMessage('失敗しました', ['管理者にお問い合わせください', '連絡先:xxx@xxx.xxx.xxx']);
// クリックするまで消えないようにする
imspShowErrorMessage('失敗しました', [], {duration:0});
Parameters
message : String
表示するメッセージ
detail : String/String[]
表示するメッセージ
options : Object
options オプション
options.closable : Boolean
options.closable メッセージ表示領域を明示的に閉じることができるかどうかのフラグ。durationが0以下の場合強制的にtrueになります。 (true: クリックで閉じる、false: クリックしても閉じない)
options.duration : Number
options.duration メッセージ表示領域が自動的に閉じるまでの時間。0 を指定すると自動的に閉じないようになります。 (ms)
imspShowSuccessMessage ( String message, [Object options] )
指定されたメッセージを表示します。
imspShowSuccessMessage('成功しました');
// クリックするまで消えないようにする
imspShowSuccessMessage('成功しました', {duration:0});
Parameters
message : String
表示するメッセージ
options : Object
options オプション
options.closable : Boolean
options.closable メッセージ表示領域を明示的に閉じることができるかどうかのフラグ。durationが0以下の場合強制的にtrueになります。 (true:クリックで閉じる、false: クリックしても閉じない)
options.duration : Number
options.duration メッセージ表示領域が自動的に閉じるまでの時間。0 を指定すると自動的に閉じないようになります。 (ms)
imuiShowErrorMessage ( String message, [String/String[] detail], [Boolean closable], [Number duration], [Boolean escape] )
指定されたエラーメッセージを表示します。

detail には String、または String の配列を指定します。
imuiShowErrorMessage('失敗しました');
// 詳細なメッセージを指定
imuiShowErrorMessage('失敗しました', ['管理者にお問い合わせください', '連絡先:xxx@xxx.xxx.xxx']);
// クリックするまで消えないようにする
imuiShowErrorMessage('失敗しました', [], true, 0);
// メッセージをエスケープする
imuiShowErrorMessage('<sample.png>の登録に失敗しました', [], true, 10000, true);
Parameters
message : String
表示するメッセージ
detail : String/String[]
表示するメッセージ
closable : Boolean
メッセージ表示領域を明示的に閉じることができるかどうかのフラグ。durationが0以下の場合強制的にtrueになります。 (true: クリックで閉じる、false: クリックしても閉じない)
duration : Number
メッセージ表示領域が自動的に閉じるまでの時間。0 を指定すると自動的に閉じないようになります。 (ms)
escape : Boolean
メッセージをエスケープするかどうかのフラグ。(true: エスケープする、false: エスケープしない)
imuiShowSuccessMessage ( String message, [String/String[] detail], [Boolean closable], [Number duration], [Boolean escape] )
指定されたメッセージを表示します。

imuiShowSuccessMessage('成功しました');
// クリックするまで消えないようにする
imuiShowSuccessMessage('成功しました', true, 0);
// メッセージをエスケープする
imuiShowSuccessMessage('<sample.png>を登録しました', true, 10000, true);
// 詳細なメッセージを指定
imuiShowSuccessMessage('成功しました。作成したIDは以下の通りです。', ['IDxxx', 'IDyyy', 'IDzzz']);
// 詳細なメッセージをエスケープする
imuiShowSuccessMessage('<png>を登録しました。', ['<xxx.png>', 'yyy.png', 'zzz.png'], true, 10000, true);
Parameters
message : String
表示するメッセージ
detail : String/String[]
表示するメッセージ。8.0.8 から指定できるようになりました。
closable : Boolean
メッセージ表示領域を明示的に閉じることができるかどうかのフラグ。durationが0以下の場合強制的にtrueになります。 (true: クリックで閉じる、false: クリックしても閉じない)
duration : Number
メッセージ表示領域が自動的に閉じるまでの時間。0 を指定すると自動的に閉じないようになります。 (ms)
escape : Boolean
メッセージをエスケープするかどうかのフラグ。(true: エスケープする、false: エスケープしない)
imuiShowWarningMessage ( String message, [String/String[] detail], [Boolean closable], [Number duration], [Boolean escape] )
指定された警告メッセージを表示します。

detail には String、または String の配列を指定します。
imuiShowWarningMessage('失敗しました');
// 詳細なメッセージを指定
imuiShowWarningMessage('失敗しました', ['管理者にお問い合わせください', '連絡先:xxx@xxx.xxx.xxx']);
// クリックするまで消えないようにする
imuiShowWarningMessage('失敗しました', [], true, 0);
// メッセージをエスケープする
imuiShowWarningMessage('<sample.png>の登録に失敗しました', [], true, 10000, true);
Parameters
message : String
表示するメッセージ
detail : String/String[]
表示するメッセージ
closable : Boolean
メッセージ表示領域を明示的に閉じることができるかどうかのフラグ。durationが0以下の場合強制的にtrueになります。 (true: クリックで閉じる、false: クリックしても閉じない)
duration : Number
メッセージ表示領域が自動的に閉じるまでの時間。0 を指定すると自動的に閉じないようになります。 (ms)
escape : Boolean
メッセージをエスケープするかどうかのフラグ。(true: エスケープする、false: エスケープしない)
jQuery ( )
See (http://jquery.com/).
fn ( ) Static
See (http://jquery.com/).
imuiColorPicker ( [Object settings], [function(color/context) commitCallback], [function(color/context/input) liveCallback], [function(color/context) cancelCallback] ) Static
色を選択する小窓を表示します。
色を選択するとバインドされたテキストボックスに選択した色番号が表示されます。
バインドするテキストボックスに直接カラーコードを入力することも可能です。
   - 入力可能な文字は、0-9, a-f, A-F のみです。
   - 入力が6桁未満の場合、0 が先頭に補完されます。(例:999 → 000999)
jPicker (http://www.digitalmagicpro.com/jPicker/) を修正したうえで利用しています。
注意事項
    imuiColorPickerを利用する場合は以下のようにjPickerを読み込んでください。
  • <link type="text/css" rel="stylesheet" href="ui/libs/jpicker-1.1.6/css/jPicker-1.1.6.min.css" />
    <script src="ui/libs/jpicker-1.1.6/jpicker-1.1.6.min.js"></script>
<!-- jPickerを読み込みます。-->
<imart type="head">
  <link type="text/css" rel="stylesheet" href="ui/libs/jpicker-1.1.6/css/jPicker-1.1.6.min.css" /> 
  <script src="ui/libs/jpicker-1.1.6/jpicker-1.1.6.min.js"></script>
</imart>
<!-- targetをinput type="text"にすると選択した色番号が表示されます。-->
<input type="text" id="target">
<script type="text/javascript">
  //カラーピッカーの使用例。すべてのパラメータは省略可能
  $("#target").imuiColorPicker();
</script>
<!-- jPickerを読み込みます。-->
<imart type="head">
  <link type="text/css" rel="stylesheet" href="ui/libs/jpicker-1.1.6/css/jPicker-1.1.6.min.css" /> 
  <script src="ui/libs/jpicker-1.1.6/jpicker-1.1.6.min.js"></script>
</imart>
<input type="text" id="target">
<script type="text/javascript">
  //パラメータを指定する例
  $("#target").imuiColorPicker({
    window:{
      title:"imuiColorPickerTest",
      zIndex:1005, //デフォルト値は20
      position:{
        x:'0px',  // 指定可能な値は"left", "center", "right", "screenCenter"とピクセルでの指定ができます
        y:'0px' // 指定可能な値は"top", "bottom", "center"とピクセルでの指定ができます
      },
      effects:{
        type:'fade' //デフォルトはslideになります。他にfadeとshowを指定することができます
      }
    },
    localization:{
      text: {
        ok: 'testOK',
        cancel: 'testCancel'
      },
      tooltips:{
        colors:{
          newColor: 'New Color - Press “OK” To Commit',
          currentColor: 'Click To Revert To Original Color'
        },
        buttons:{
          ok: 'Commit To This Color Selection',
          cancel: 'Cancel And Revert To Original Color'
        },
        hue:{
          radio: 'Set To “Hue” Color Mode',
          textbox: 'Enter A “Hue” Value (0-360°)'
        },
        saturation:{
          radio: 'Set To “Saturation” Color Mode',
          textbox: 'Enter A “Saturation” Value (0-100%)'
        },
        value:{
          radio: 'Set To “Value” Color Mode',
          textbox: 'Enter A “Value” Value (0-100%)'
        },
        red:{
          radio: 'Set To “Red” Color Mode',
          textbox: 'Enter A “Red” Value (0-255)'
        },
        green:{
          radio: 'Set To “Green” Color Mode',
          textbox: 'Enter A “Green” Value (0-255)'
        },
        blue:{
          radio: 'Set To “Blue” Color Mode',
          textbox: 'Enter A “Blue” Value (0-255)'
        },
        alpha:{
          radio: 'Set To “Alpha” Color Mode',
          textbox: 'Enter A “Alpha” Value (0-100)'
        },
        hex:{
          textbox: 'Enter A “Hex” Color Value (#000000-#ffffff)',
          alpha: 'Enter A “Alpha” Value (#00-#ff)'
        }
      }
    }
  });
</script>
<!-- jPickerを読み込みます。-->
<imart type="head">
  <link type="text/css" rel="stylesheet" href="ui/libs/jpicker-1.1.6/css/jPicker-1.1.6.min.css" /> 
  <script src="ui/libs/jpicker-1.1.6/jpicker-1.1.6.min.js"></script>
</imart>
<!-- divをtargetにすると、カラーピッカーは常に開いた状態になります。-->
<div id="target" />
<script type="text/javascript"> 
  //コールバック関数を指定する例
  function commitCallback(color, context){
    alert('決定ボタンを押下しました');
  };
  function liveCallback(color, context, input){ //セレクターの要素が div なので、input は undefined になります。
    if(color.val() == null){
      return false;
    }
    alert('選択したカラーコード:' + color.val().hex); //カラーコードが取得できます。
  };
  function cancelCallback(color, context){
    alert('取り消しボタンを押下しました');
  };
  $("#target").imuiColorPicker({},commitCallback,liveCallback,cancelCallback);
</script>
Parameters
settings : Object
オプション
commitCallback : function(color/context)
色を選択し決定ボタン押下時に呼ばれるCallback関数です。以下の引数が渡ります。
  • color:jPicker.Color クラスです。詳細はjPickerの(http://www.digitalmagicpro.com/jPicker/)のjPicker Color Class を参照してください。
  • context:決定ボタン要素です。
liveCallback : function(color/context/input)
色を選択したときに呼ばれるCallback関数です。以下の引数が渡ります。
  • color:jPicker.Color クラスです。詳細はjPicker(http://www.digitalmagicpro.com/jPicker/)のjPicker Color Class を参照してください。
  • context:色の変更を行った要素です。
  • input:カラーピッカーのセレクターが input 要素の場合にセレクターの要素が渡ります。
cancelCallback : function(color/context)
キャンセルボタン押下時に呼ばれるCallback関数です。以下の引数が渡ります。
  • color:jPicker.Color クラスです。詳細はjPicker(http://www.digitalmagicpro.com/jPicker/)のjPicker Color Class を参照してください。
  • context:キャンセルボタン要素です。

imui ( ) Static
No description.
imuiBreadcrumbs ( [Object options] ) Static
パンくずリストを表示します。
先頭のリストと現在のリスト、現在のリストの一つ手前のリストは必ずすべて表示されます。それ以外のリストは折りたたまれて表示されます。
折りたたまれているリストにカーソルを乗せると、すべての文字列が表示されます。カーソルを外すと、折りたたまれます。
リストに子メニューを持つ場合は、カーソルを乗せると子メニューも表示されます。
スタイルについてはcss モジュール一覧を参照してください。
<!-- 以下のような HTML を記述してください。div タグに class="imui-breadcrumbs-wrap" を必ず指定してください。 -->
<div class="imui-breadcrumbs-wrap">
  <!-- ol タグ、ul タグのどちらかに class="imui-breadcrumbs" を必ず指定してください。 -->
  <ol class="imui-breadcrumbs">
    <!-- li タグの中に必ず a タグで文字列を記述してください。アイコンを置きたい場合は、span タグにて指定してください。 -->
    <li><a href="#"><span class="im-ui-icon-common-16-home"></span></a></li>
    <li><a href="#">第一階層</a></li>
    <li><a href="#">第二階層</a></li>
    <li>
      <a href="#">第三階層</a>
      <!-- 
        子メニューを表示したい場合は、以下のように ol タグ、ul タグのどちらかに class="menu" を必ず指定してください。
        imui-link-item-menu は子メニューのスタイルを提供しているクラスです。こちらのクラスを使うことを推奨していますが、他のスタイルにしたい場合は違うクラスを指定してください。
      -->
      <ul class="menu imui-link-item-menu">
        <li><a href="#">メニュー1</a></li>
        <li><a href="#">メニュー2</a></li>
        <li><a href="#">メニュー3</a></li>
      </ul>
    </li>
    <li><a href="#">第四階層</a></li>
    <!-- 現在選択中のリストには class="active" を必ず指定してください。文字列は a タグではなく span タグで記述してください。 -->
    <li class="active"><span>現在位置</span></li>
  </ol>
</div>
<!-- collapsibleWidth を指定する例 -->
<div class="imui-breadcrumbs-wrap">
  <ul class="imui-breadcrumbs" id="sampleCollapsibleWidth">
    <li><a href="#"><span class="im-ui-icon-common-16-home"></span></a></li>
    <li><a href="#">第一階層</a></li>
    <li>
      <a href="#">第二階層</a>
      <ul class="menu imui-link-item-menu">
        <li><a href="#">メニュー1</a></li>
        <li><a href="#">メニュー2</a></li>
      </ul>
    </li>
    <li><a href="#">第三階層</a></li>
    <li class="active"><span>現在位置</span></li>
  </ul>
</div>
<script type="text/javascript">
  $('#sampleCollapsibleWidth').imuiBreadcrumbs({collapsibleWidth:10});
</script>
<!-- collapsible を指定する例 -->
<div class="imui-breadcrumbs-wrap">
  <ul class="imui-breadcrumbs" id="sampleCollapsible">
    <li><a href="#"><span class="im-ui-icon-common-16-home"></span></a></li>
    <li><a href="#"><第一階層</a></li>
    <li>
      <a href="#">第二階層子メニューあり</a>
      <ul class="menu imui-link-item-menu">
        <li><a href="#">メニュー1</a></li>
        <li><a href="#">メニュー2</a></li>
      </ul>
    </li>
    <li><a href="#">第三階層</a></li>
    <li class="active"><span>現在位置</span></li>
  </ul>
</div>
<script type="text/javascript">
  $('#sampleCollapsible').imuiBreadcrumbs({collapsible:false});
</script>
Parameters
options : Object
オプション
options.collapsible : Boolean
パンくずリストを折りたたんだ状態で表示するかどうかを指定します
本オプションに true を指定しても先頭のリストと現在のリスト、現在のリストの一つ手前のリストは必ずすべて表示されます
options.collapsibleWidth : Number
パンくずリストを折りたたんだ状態の横幅を指定します
実際に表示される折りたたまれた状態の li は 本オプションに指定した値 + 22px で表示されます
imuiIndicator ( [Object options] ) Static
ロード中であることをアイコンを使って表示します。
ロード中のHTMLElementを操作できないようにロックすることができます。
ロード中にHTMLElementのサイズが変化しても、追従してリサイズします。
//インジケータを表示する例。すべてのパラメータは省略可能
$("#target").imuiIndicator();
//パラメータを指定する例
$("#target").imuiIndicator({"text":"読み込み中です",
                            "opacity":25,
                            "onBeforeCustomAnimation":function(){
                              alert("カスタムアニメーションを開始します");
                            }});
//onCustomAnimationで表示する文字列の高さと色を変更する例
$('#target').imuiIndicator({
  //画像は表示せず、文字のみの表示にします
  imgSrcPath: "",
  //100ミリ秒毎にアニメーションを実行します
  animationTime: 100,
  //引数から表示される文字列を取得し、1文字ずつspanタグで囲みます。アニメーションで高さを変更するためpositionをrelativeにします
  onBeforeCustomAnimation:function(_textNode){
    var ary = _textNode.text().split("");
    _textNode.empty();
    for(var idx=0;idx<ary.length;idx++){
      $("<span></span>").text(ary[idx]).appendTo(_textNode).css("position", "relative");
    }
  },
  //1文字ずつspanにエフェクトを加えます。文字の位置と文字の色をランダムに変更します
  onCustomAnimation:function(_textNode){
    _textNode.find("span").each(function () {
      $(this).css({
        "top": Math.random() * 4 - 2 + "px",
        "left": Math.random() * 2 - 1 + "px",
        "color": "#" + (Math.ceil(Math.random() * 12) + 3).toString(16) + 
                       (Math.ceil(Math.random() * 12) + 3).toString(16) + 
                       (Math.ceil(Math.random() * 12) + 3).toString(16)
      });
    });
  }
});
Parameters
options : Object
オプション
options.text : String
ロード中に表示するテキスト
options.backgroundClass : String
主に背景のスタイルを指定したクラス名。生成される外側のdiv
options.textClass : String
主に前景のスタイルを指定したクラス名。生成される内側のdiv
options.imgSrcPath : String
画像ファイルのソースパス
アイコンを表示させたくない場合は空文字("")を指定する
options.opacity : Number
透明度。0(透明)~100(不透明)で指定
options.resizePollingTime : Number
HTMLエレメントのリサイズを監視するタイマーの実行頻度(ms)。0で無効化
値を大きくすれば負荷は低くなるが、リサイズが間に合わずに誤操作される可能性が大きくなる
options.zIndex : Number
インジケータの z-index
表示対象の要素にz-indexが指定されている場合は、表示対象のz-indexに1を足した値になる
options.animationTime : Number
customアニメーション実行間隔(ms)。0で無効化
options.onBeforeCustomAnimation : Function
customアニメーション開始前イベント
options.onCustomAnimation : Function
customアニメーションファンクション
javascriptアニメーションを自由に定義できる
animationTimeに0を指定された場合はこの関数は呼ばれない
options.onAfterCustomAnimation : Function
customアニメーション終了後イベント
imuiMessageDialog ( [Object options] ) Static
アイコン付きのダイアログを作成します。
注意事項
  • Internet Explorerでは、ダイアログに配置するコンポーネントの組み合わせによっては、ダイアログの高さが意図せず増加する場合があります
  • closeOnEscape="true" かつ modal="true" を指定したダイアログの中でさらに closeOnEscape="true" かつ modal="true" を指定したダイアログを開いた後、オーバーレイ(黒い部分)をクリックし、エスケープキーを押すと2つ目のダイアログではなく1つ目のダイアログが閉じます。これを回避するには closeOnEscape="false" を指定してください。
//エラーアイコン付きのメッセージダイアログを表示する
$("<div>message</div>").imuiMessageDialog({
    iconType: 'error'
});
//タイトルを指定する例
$("<div>message</div>").imuiMessageDialog({
    iconType: 'warning',
    title: '警告メッセージ'
});
//アイコンとメッセージの縦位置の上揃えで表示する例
$("<div>message1<br/>message2<br/>message3<br/>message4<br/>message5<br/></div>").imuiMessageDialog({
    iconType: 'info',
    verticalAlign: 'top'
});
//アイコンとメッセージ領域の下にメッセージを表示する例
$("<div>message</div>").imuiMessageDialog({
    iconType: 'confirm'
}).append('message2');
//position を指定する例
$("<div></div>").imuiMessageDialog({
    position: [100, 100]
});
//ボタンを表示する例
$("<div></div>").imuiMessageDialog({
    buttons: [
      {
        'id': 'okbutton',
        'text': 'OK',
        'click': function() { alert('OK'); }
      },
      {
        'text': 'キャンセル',
        'click': function() {$(this).imuiMessageDialog('close'); }
      }
    ]
});
//toolbarLeft, toolbarRight を指定する例
$("<div></div>").imuiMessageDialog({
    toolbarLeft: [
                    {
                        title: "戻る",
                        text: "戻る",
                        iconClass: "im-ui-icon-common-16-back",
                        href: "javascript:alert('back');"
                         },
                    {
                        title: "カレンダー",
                        text: "カレンダー",
                        iconClass: "im-ui-icon-common-16-calendar",
                        href: "javascript:alert('calendar')"
                    }
                ],
    toolbarRight: [
                      {
                          title: "最新",
                          iconClass: "im-ui-icon-common-16-refresh",
                          href: "javascript:alert('refresh')"
                      }
                  ]
});
Parameters
options : Object
オプション
options.iconType : String
表示するアイコンクラスを指定します
未指定の場合は画像なしのダイアログが表示されます
アイコンクラス名以外にも下記の値を指定することでアイコンが表示されます
指定する値表示されるアイコンクラス名
errorim-ui-icon-common-32-error
warningim-ui-icon-common-32-warning
confirmim-ui-icon-common-32-confirmation
questionim-ui-icon-common-32-question
infoim-ui-icon-common-32-information

options.verticalAlign : String
アイコンのvertical-align を操作します
top(上揃え),middle(中央揃え),bottom(下揃え) のいずれかを指定します
options.closeOnEscape : Boolean
エスケープキーでダイアログを閉じるかどうかを指定します
options.draggable : Boolean
ダイアログがドラッグ移動できるかどうかを指定します
options.height : Number
ダイアログの縦幅を指定します
options.modal : Boolean
ダイアログ表示時に背面の操作制限を指定します
options.position : Array
ダイアログの表示位置を指定します
options.resizable : Boolean
ダイアログがリサイズできるかどうかを指定します
options.stack : Boolean
ダイアログが、他のダイアログの上に積み重ねできるかどうかを指定します
options.title : String
ダイアログのタイトルを指定します
options.width : Number
ダイアログの横幅を指定します
options.toolbarLeft : Array
ダイアログのタイトル直下に表示するツールバーへ、左寄せで表示する内容を指定します
options.toolbarRight : Array
ダイアログのタイトル直下に表示するツールバーへ、右寄せで表示する内容を指定します
options.buttons : Object/Array
ダイアログ下部に表示するボタンを指定します
options.useHelp : Boolean
サイトツアーを呼び出すアイコンを表示するかどうかを指定します(true: 表示する、false: 表示しない)
8.0.10 から指定できるようになりました
imuiPageDialog ( [Object options] ) Static
サーバ上のページをAjaxで取得し、その内容を表示するダイアログを作成します。
注意事項
  • Internet Explorerでは、ダイアログに配置するコンポーネントの組み合わせによっては、ダイアログの高さが意図せず増加する場合があります。
  • closeOnEscape="true" かつ modal="true" を指定したダイアログの中でさらに closeOnEscape="true" かつ modal="true" を指定したダイアログを開いた後、オーバーレイ(黒い部分)をクリックし、エスケープキーを押すと2つ目のダイアログではなく1つ目のダイアログが閉じます。これを回避するには closeOnEscape="false" を指定してください。
  • 返却するHTMLにテーマがかからないように指定してください。
//ページダイアログを表示する
$("<div></div>").appendTo(document.body).imuiPageDialog({
    url: 'some/where'
});
<!-- ページダイアログを何度も呼び出す場合はあらかじめ表示領域を定義しておきます -->
<div id="target"></div>
<script type="text/javascript">
    //ページダイアログを表示する
    $("#target").imuiPageDialog({
        url: 'some/where'
    });
</script>
//parameter属性にnothemeを指定する方法でテーマが適用されていないHTMLを返却する例
$("<div></div>").appendTo(document.body).imuiPageDialog({
    url: 'some/where',
    parameter: {'imui-theme-builder-module':'notheme'}
});
//パラメータを指定する例
$("<div></div>").appendTo(document.body).imuiPageDialog({
    url: 'some/where',
    parameter: {
        key1: 'value1',
        key2: 'value2'
    }
});
//タイトルを指定する例
$("<div></div>").appendTo(document.body).imuiPageDialog({
    url: 'some/where',
    title: 'Title'
});
//position を指定する例
$("<div></div>").appendTo(document.body).imuiPageDialog({
    url: 'some/where',
    position: [100, 100]
});
//ボタンを表示する例
$("<div></div>").appendTo(document.body).imuiPageDialog({
    url: 'some/where',
    buttons: [
      {
        'id': 'okbutton',
        'text': 'OK',
        'click': function() { alert('OK'); }
      },
      {
        'text': 'キャンセル',
        'click': function() {$(this).imuiPageDialog('close'); }
      }
    ],
    //エラーが発生したときに、ボタン表示領域を非表示にする
    buttonsStateOnError: 'hide'
});
//toolbarLeft, toolbarRight を指定する例
$("<div></div>").appendTo(document.body).imuiPageDialog({
    toolbarLeft: [
                    {
                        title: "戻る",
                        text: "戻る",
                        iconClass: "im-ui-icon-common-16-back",
                        href: "javascript:alert('back');"
                         },
                    {
                        title: "カレンダー",
                        text: "カレンダー",
                        iconClass: "im-ui-icon-common-16-calendar",
                        href: "javascript:alert('calendar')"
                    }
                ],
    toolbarRight: [
                      {
                          title: "最新",
                          iconClass: "im-ui-icon-common-16-refresh",
                          href: "javascript:alert('refresh')"
                      }
                  ]
});
//onAjaxBeforeSend, onAjaxComplete, onAjaxError, onAjaxParameterExtend, onAjaxSuccess を指定する例
$("<div></div>").appendTo(document.body).imuiPageDialog({
    url: 'some/where',
    onAjaxBeforeSend: function() { alert('onAjaxBeforeSend'); },
    onAjaxComplete: function() {alert('onAjaxComplete'); },
    onAjaxError: function() {alert('onAjaxError'); },
    onAjaxParameterExtend: function() {alert('onAjaxParameterExtend'); },
    onAjaxSuccess: function() {alert('onAjaxSuccess'); }
});
//autoHeight/autoWidth を指定する例。ウィンドウに対して50パーセントの割合で表示します。
//この割合はウィンドウをリサイズしても維持されます。ダイアログリサイズ後は、リサイズ後のダイアログとウィンドウの割合を維持します
$("<div></div>").appendTo(document.body).imuiPageDialog({
    url: 'some/where',
    autoHeight: 50,
    autoWidth: 50,
    maxHeight: 300,  // autoHeight を指定していても、ダイアログはこの値より大きくなりません
    minWidth: 100    // autoWidth を指定していても、ダイアログはこの値より小さくなりません
});
Parameters
options : Object
オプション
options.url : String
表示するページのURL
options.parameter : Object
リクエストパラメータ
options.method : String
リクエストメソッド
options.cache : Boolean
通信結果をキャッシュするかどうかを指定します。
options.closeOnEscape : Boolean
エスケープキーでダイアログを閉じるかどうかを指定します
options.draggable : Boolean
ダイアログがドラッグ移動できるかどうかを指定します
options.height : Number
ダイアログの縦幅を指定します
options.autoHeight : Number
ウィンドウの高さを基準とし、相対的な高さ指定します
80 と指定した場合、ウィンドウに対して80パーセントの高さでダイアログを表示します
height 属性を指定していた場合、height 属性は無視されます
本属性は Ver.8.0.20 以降のバージョンで使用可能です
詳細は下記の autoHeight/autoWidth を指定する例 を参照してください
options.autoWidth : Number
ウィンドウの横幅を基準とし、相対的な横幅を指定します
80 と指定した場合、ウィンドウに対して80パーセントの横幅でダイアログを表示します
width 属性を指定していた場合、width 属性は無視されます
本属性は Ver.8.0.20 以降のバージョンで使用可能です
詳細は下記の autoHeight/autoWidth を指定する例 を参照してください
options.modal : Boolean
ダイアログ表示時に背面の操作制限を指定します
options.position : Array
ダイアログの表示位置を指定します
詳細は下記の position を指定する例 を参照してください
options.resizable : Boolean
ダイアログがリサイズできるかどうかを指定します
options.stack : Boolean
ダイアログが、他のダイアログの上に積み重ねできるかどうかを指定します
options.title : String
ダイアログのタイトルを指定します
options.width : Number
ダイアログの横幅を指定します
options.toolbarLeft : Array
ダイアログのタイトル直下に表示するツールバーへ、左寄せで表示する内容を指定します
詳細は下記の toolbarLeft, toolbarRight を指定する例 を参照してください。
options.toolbarRight : Array
ダイアログのタイトル直下に表示するツールバーへ、右寄せで表示する内容を指定します
詳細は下記の toolbarLeft, toolbarRight を指定する例 を参照してください。
options.buttons : Object/Array
ダイアログ下部に表示するボタンを指定します
詳細は下記の ボタンを表示する例 を参照してください
options.buttonsStateOnError : String
Ajax通信の結果、エラーが発生したときにボタンをどのように処理するかを指定します
hide
エラーが発生したときに、ボタン表示領域を非表示にします。
disabled
エラーが発生したときに、ボタンを非活性 (disabled) にします。
その他
何もしません
詳細は下記の ボタンを表示する例 を参照してください
options.onAjaxBeforeSend : Function
ajax通信が発生する直前に呼び出される関数を指定します
明示的にfalseを返したときのみ、通信をキャンセルします
options.onAjaxComplete : Function
ajax通信終了後に呼ばれる関数を指定します
通信結果が成功であったかエラーであったかに関係なく必ず実行されます
options.onAjaxError : Function
ajax通信失敗後に呼ばれる関数を指定します
options.onAjaxParameterExtend : Function
ajax通信を実行する直前に呼び出される関数名を指定します
ajax関連のメソッド内で一番最初に呼び出されます
options.onAjaxSuccess : Function
ajax通信成功後に呼ばれる関数名を指定します
options.useHelp : Boolean
サイトツアーを呼び出すアイコンを表示するかどうかを指定します(true: 表示する、false: 表示しない)
8.0.10 から指定できるようになりました
imuiSiteTour ( [Object options] ) Static
画面に埋め込まれたメッセージを表示し、簡易ヘルプを表示します。
順番にヘルプを表示するステップ表示と一括でヘルプを表示する一括表示が可能です。
ステップ表示の場合は、右下に表示されるステップメニューにてステップの移動とサイトツアーの終了が可能です。また、キーボード操作も可能です。
  • 右矢印アイコン、右矢印キー
    • 次のステップへ移動
  • 左矢印アイコン、左矢印キー
    • 前のステップへ移動
  • ×アイコン、エスケープキー
    • サイトツアーを閉じる

テーマの機能にあるサイトツアーはこちらの関数を実行しています。
サイトツアーについての詳細はサイトツアー仕様書を参照してください。
注意事項
  • この API は 8.0.10 から利用できます。
  • data属性が指定されている場合はオプションの値ではなく、data属性の値が有効になります。

本API は以下のdata属性と組み合わせ利用してください。
属性名省略時の値説明
data-intro必須項目ヘルプとして実際に表示される説明文です。
data-escapetruedata-intro に指定した文字列をエスケープするかどうかを指定します。
エスケープをしない場合は HTML を埋め込むことができます。
data-positionbottomヘルプを表示する対象の要素から、どこの位置に説明文を表示するか指定します。
省略すると対象の要素の下に説明文が表示されます。
data-aligncenterdata-position に top,bottom のどちらかを指定した場合のみ有効になります
説明文の横方向の表示位置を指定します。
left(左寄せ),center(中央寄せ),right(右寄せ) の指定が可能です。
data-verticalAligntopdata-position に left,right のどちらかを指定した場合のみ有効になります。
説明文の縦方向の揃え位置を指定します。
top(上揃え),middle(中央揃え),bottom(下揃え) の指定が可能です。
data-width200px説明文を表示する要素の横幅を指定します。
未指定の場合は200px になりますが、ヘルプを表示する対象の要素が200px 未満の場合は、対象の要素の長さの横幅になります。
data-lineTypemiddleヘルプを表示する対象の要素と説明文表を結んでいる支持線の長さの種類を指定します。
short,middle,long の指定が可能です。
position に指定した値が top,bottom の場合は
  • short(25px),middle(75px),long(150px)の長さになります。
position に指定した値が left,right の場合は
  • short(50px),middle(100px),long (200px)の長さになります。
data-menu-positionrightステップメニューの表示位置を指定します。
right,left の指定が可能です。
同じステップ内で別々の指定をした場合は、最初に指定した値が有効になります。
data-step全表示説明を表示する順番を数値で指定します。
同じ数値を指定した場合は、複数個の説明が同時に表示されるのでグループ化としても利用できます。
未指定の要素は最後に表示されます。
<!-- imuiSiteTourを使い一括表示でヘルプを表示する例 -->
<button id="start_help">start</button>
<div class="imui-operation-parts">
  <button data-intro="ここの値が表示されます" data-position="left">削除ボタン</button>
  <button data-intro="ここの値が表示されます" data-position="right">更新ボタン</button>
</div>
<a data-intro="ここのヘルプは表示されません">sample_a</a>

<script type="text/javascript">
  $(function(){
    $('#start_help').on('click',function(){
      // class="imui-operation-parts" 内の data-intro 属性を持つ要素のみヘルプ対象になります。
      $('.imui-operation-parts').imuiSiteTour();
    })
  })
</script>
<!-- imuiSiteTourを使いステップ表示でヘルプを表示する例 -->
<button id="start_help">start</button>
<div class="imui-operation-parts">
  <button data-intro="ここの値が表示されます" data-step="3" data-width="150px">step3</button>
  <button data-intro="ここの値が表示されます" data-step="1" data-width="150px">step1</button>
  <button data-intro="ここの値が表示されます" data-step="2" data-width="150px">step2</button>
</div>

<script type="text/javascript">
  $(function(){
    $('#start_help').on('click',function(){
      // 先頭は0から始まるので、このサンプルでは data-step=2 を指定した要素からサイトツアーが開始されます。
      $('body').imuiSiteTour({step:1});
    })
  })
</script>
Parameters
options : Object
オプション
options.position : String
data-position 未指定の要素の表示位を指定します
"right","left","top","bottom"の指定が可能です
options.escape : boolean
data-intro属性に指定した文字列をエスケープするかどうかを指定します
options.step : number
data-step に指定した最小の値を0とし、何番目のステップからサイトツアーを開始するかを指定します
options.hideMenu : boolean
ステップ表示の場合に指定します
ステップメニューを表示するかどうかを指定します
imuiTooltip ( [Object options] ) Static
title属性をツールチップで表示します。
title属性の値はエスケープしません。改行をしたい場合は<br>タグを埋め込んでください。
ツールチップを表示する要素のclass属性に "imui-tooltip-top" あるいは "imui-tooltip-bottom" を指定することでも同様のツールチップを表示することができます。
imui-tooltip-top を指定した場合は要素の上側に、imui-tooltip-bottom を指定した場合は要素の下側にツールチップを表示します。
注意事項
  • ダイアログ内の要素など親要素にz-indexが指定されている要素にツールチップを出したい場合は、それより大きい値を指定してください。
<!-- imuiTooltip を使わず、class属性とtitle属性を指定してでツールチップを利用する例 -->
<button class="imui-button imui-tooltip-bottom" title="title属性の値がツールチップに出力されます">ここをマウスオーバしてください</button>
<!-- imuiTooltipでツールチップを利用する例 -->
<button id="sampleId" class="imui-button" >ここをマウスオーバしてください</button>
<script type="text/javascript">
 $('#sampleId').imuiTooltip({
   tooltipLocation:'bottom',
   maxWidth:'150px',
   tooltipTitle:'tooltipTitle オプションの値が表示されます'
 });
</script>
<!-- z-index を指定する例 -->
<textarea id="sampleId" title="z-index の確認(option の zIndex を指定)" >ここをマウスオーバしてください</textarea>
<script type="text/javascript">
  $('#sampleId').imuiTooltip({zIndex:1001});
</script>
Parameters
options : Object
オプション
options.tooltipLocation : String
ツールチップを表示する位置を指定します
"top"または"bottom"を指定してください
options.maxWidth : String
ツールチップの最大横幅をpxで指定します
options.tooltipTitle : String
ツールチップに表示したい文字列を指定します
指定した文字列はエスケープしません
options.zIndex : String
ツールチップのz-indexを指定します
imuiZipcodeDialog ( [Object options] ) Static
郵便番号検索ダイアログを作成します。
注意事項
  • Internet Explorerでは、ダイアログに配置するコンポーネントの組み合わせによっては、ダイアログの高さが意図せず増加する場合があります。
  • ダイアログを表示する要素にはかならずID属性を指定する必要があります。
callback関数には第1引数にイベント、第2引数に検索結果オブジェクトが受け渡されます。 検索結果オブジェクトのプロパティは以下のとおりです。

プロパティの値はすべてString型になります。
属性名説明
zipCode郵便番号
ハイフン無しの7桁の数字が返却されます。
oldZipCode(旧)郵便番号
ハイフン無しの3から5桁の数字が返却されます。
jisCode全国地方公共団体コード(JIS X0401、X0402)
prefecture都道府県名
city市区町村名
town町域名
prefectureKana都道府県名(全角カタカナ)
住所の郵便番号の場合のみ取得可能です。
cityKana市区町村名(全角カタカナ)
住所の郵便番号の場合のみ取得可能です。
townKana町域名(全角カタカナ)
住所の郵便番号の場合のみ取得可能です。
officeName事業所名
事業所の郵便番号の場合のみ取得可能です。
officeNameKana事業所名(全角カタカナ)
事業所の郵便番号の場合のみ取得可能です。
street小字名、丁目、番地等
事業所の郵便番号の場合のみ取得可能です。
//郵便番号検索ダイアログ
if($('#zipcode-dialog').size() == 0) {
    $('<div id="zipcode-dialog"></div>').appendTo(document.body);
}
$('#zipcode-dialog').imuiZipcodeDialog();

function callback(e, data) {
    // 検索結果を受け取った時の処理
}
//callback を指定する例
$('#zipcode-dialog').imuiZipcodeDialog({
    callback : function(e, data) {
        // 検索結果を受け取った時の処理
    }
});
//listRowNum を指定する例
$('#zipcode-dialog').imuiZipcodeDialog({
    callback : function(e, data) {
        // 検索結果を受け取った時の処理
    },
    listRowNum: 20
});
//position を指定する例
$('#zipcode-dialog').imuiZipcodeDialog({
    callback : function(e, data) {
        // 検索結果を受け取った時の処理
    },
    position: [100, 100]
});
Parameters
options : Object
オプション
options.callback : Function(e/data)
検索結果を受け取る関数を指定します
options.listRowNum : Number
一覧に表示するデータの行数を指定します
options.method : String
ダイアログ取得時のリクエストメソッド
options.cache : Boolean
ダイアログ取得時の通信結果をキャッシュするかどうかを指定します。
options.closeOnEscape : Boolean
エスケープキーでダイアログを閉じるかどうかを指定します
options.draggable : Boolean
ダイアログがドラッグ移動できるかどうかを指定します
options.modal : Boolean
ダイアログ表示時に背面の操作制限を指定します
options.position : Array
ダイアログの表示位置を指定します
詳細は下記の position を指定する例 を参照してください
options.resizable : Boolean
ダイアログがリサイズできるかどうかを指定します
options.stack : Boolean
ダイアログが、他のダイアログの上に積み重ねできるかどうかを指定します
options.title : String
ダイアログのタイトルを指定します