Class Index
変更が不可能な、任意精度の符号付き10 進数オブジェクト。
ImBigDecimal は、任意精度のスケールなしの整数値と、32 ビット整数のスケールで構成されます。
0 または正の場合、スケールは小数点以下の桁数です。負の場合、スケールなしの数値に、スケールの正負を逆にした値を指数とする10の累乗を乗算します。
詳細については、java の java.math.BigDecimal のAPIドキュメントを参照してください。
サンプルコード1 ImBigDecimal の使い方
サンプルコード2 初期化の誤差
サンプルコード3 divide(ImBigDecimal divisor) の実行結果
ImBigDecimal は、任意精度のスケールなしの整数値と、32 ビット整数のスケールで構成されます。
0 または正の場合、スケールは小数点以下の桁数です。負の場合、スケールなしの数値に、スケールの正負を逆にした値を指数とする10の累乗を乗算します。
詳細については、java の java.math.BigDecimal のAPIドキュメントを参照してください。
注意事項
ImBigDecimal の仕様は基本的には java の java.math.BigDecimal の仕様に従いますが、一部仕様が異なります。
- java.math.BigDecimal では文字列で初期化した場合と double 型や float 型を使用して初期化した場合では誤差が生じますが、 ImBigDecimal は誤差が生じません。 詳細は以下のサンプル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
日付データ操作オブジェクト。
日時データの操作を行います。
日時データの操作を行います。
数値文字列の整形および解析オブジェクト。
数値文字列の整形および解析を行います。
処理を行うにあたって、このAPIではクライアントサイドからサーバサイドに対して通信を行います。
スクリプト開発向けAPIのDecimalFormatterオブジェクトについてもあわせてご参照ください。
バージョン8.0.19より変換処理をクライアントサイドのみで行う機能が追加されました。
以下の条件の場合にクライアントサイドで変換処理を行います。
サーバサイドで処理した場合とクライアントサイドで処理をした場合で、コールバック関数の引数が異なります。どちらで動作してもエラーにならないように実装することを推奨します。
clientDecimalFormatScriptタグを利用していない場合、設定ファイル数値形式マスタに csjs-path 属性を指定していても変換処理のたびにサーバへ通信を行います。
クライアントサイドで変換処理を行いたい場合は必ずclientDecimalFormatScriptタグを利用してください。
csjs-path属性に標準で指定されているパスの変換処理は、設定ファイル数値形式マスタのparameterの有無によってクライアントサイドで処理を行わずサーバへ通信して処理を行います。
以下のどれかに当てはまる場合、クライアントサイドで変換処理を行いません。
以下は、数値のフォーマットを行うサンプルコードです。
サンプルコード
数値文字列の整形および解析を行います。
処理を行うにあたって、このAPIではクライアントサイドからサーバサイドに対して通信を行います。
スクリプト開発向けAPIのDecimalFormatterオブジェクトについてもあわせてご参照ください。
バージョン8.0.19より変換処理をクライアントサイドのみで行う機能が追加されました。
以下の条件の場合にクライアントサイドで変換処理を行います。
- 設定ファイル 数値形式マスタの csjs-path 属性に変換処理を行うパスが設定されていること
- スクリプト開発の場合スクリプト開発向けclientDecimalFormatScriptタグを、JavaEE開発の場合JavaEE開発向け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タグを利用してください。
以下のどれかに当てはまる場合、クライアントサイドで変換処理を行いません。
- 「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>
数値演算子 (ImBigDecimal クラスによって実装されるものなど) の特定のルールを記述するコンテキスト設定をカプセル化する不変オブジェクト。
ベースに依存しない設定として、次のものがあります。
サンプルコード
ベースに依存しない設定として、次のものがあります。
- precision: 演算に使用する桁数。結果はこの精度に丸められる。
- 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 を呼び出すことで取得できます。 次に、すべての丸めモードの丸め演算の結果を示すサマリーテーブルを示します。
サンプルコード
各丸めモードは、丸められた結果の返された最下位の桁の計算方法を指定します。
各丸めモードの記述には、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.
指定されたエラーメッセージを表示します。
detail には String、または String の配列を指定します。
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('成功しました');
// クリックするまで消えないようにする 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 の配列を指定します。
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 の配列を指定します。
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/) を修正したうえで利用しています。
色を選択するとバインドされたテキストボックスに選択した色番号が表示されます。
バインドするテキストボックスに直接カラーコードを入力することも可能です。
- 入力可能な文字は、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.
パンくずリストを表示します。
先頭のリストと現在のリスト、現在のリストの一つ手前のリストは必ずすべて表示されます。それ以外のリストは折りたたまれて表示されます。
折りたたまれているリストにカーソルを乗せると、すべての文字列が表示されます。カーソルを外すと、折りたたまれます。
リストに子メニューを持つ場合は、カーソルを乗せると子メニューも表示されます。
スタイルについてはcss モジュール一覧を参照してください。
先頭のリストと現在のリスト、現在のリストの一つ手前のリストは必ずすべて表示されます。それ以外のリストは折りたたまれて表示されます。
折りたたまれているリストにカーソルを乗せると、すべての文字列が表示されます。カーソルを外すと、折りたたまれます。
リストに子メニューを持つ場合は、カーソルを乗せると子メニューも表示されます。
スタイルについてはcss モジュール一覧を参照してください。
注意事項
- 本APIは HTML を自動生成しないため、決まったフォーマットで HTML を書かないと正しく動作しません。
- 最初に class="imui-breadcrumbs-wrap" を持つ div を記述してください。
- 上記の div 内に class="imui-breadcrumbs" を持つ ul または ol を記述してください。
- li の直下に文字列を記述せず、 a 内に文字列を記述してください。
- 子メニューにはimui-link-item-menu のクラス指定を推奨しています。
- 現在位置を表すリストには、class="active" を指定してください。また、文字列は a ではなく span 内に記述してください。
- li 内の文字列が imui-breadcrumbs-wrap を指定している div よりも大きくなる場合は、表示が崩れます。対象のリストに max-width を入れるなどで回避してください。
<!-- 以下のような 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 で表示されます
ロード中であることをアイコンを使って表示します。
ロード中のHTMLElementを操作できないようにロックができます。
ロード中にHTMLElementのサイズが変化しても、追従してリサイズします。
ロード中の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アニメーション終了後イベント
アイコン付きのダイアログを作成します。
注意事項
- 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
- 表示するアイコンクラスを指定します
未指定の場合は画像なしのダイアログが表示されますアイコンクラス名以外にも下記の値を指定することでアイコンが表示されます
指定する値 表示されるアイコンクラス名 error im-ui-icon-common-32-error warning im-ui-icon-common-32-warning confirm im-ui-icon-common-32-confirmation question im-ui-icon-common-32-question info im-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 から指定できるようになりました
サーバ上のページをAjaxで取得し、その内容を表示するダイアログを作成します。
注意事項
- Internet Explorerでは、ダイアログに配置するコンポーネントの組み合わせによっては、ダイアログの高さが意図せず増加する場合があります。
- closeOnEscape="true" かつ modal="true" を指定したダイアログの中でさらに closeOnEscape="true" かつ modal="true" を指定したダイアログを開いた後、オーバーレイ(黒い部分)をクリックし、エスケープキーを押すと2つ目のダイアログではなく1つ目のダイアログが閉じます。これを回避するには closeOnEscape="false" を指定してください。
- 返却するHTMLにテーマがかからないように指定してください。
- リクエストにセットする方法と設定ファイルに記述する方法があります。詳細は以下を参照してください。
- 下記のサンプル「parameter属性にnothemeを指定する方法でテーマが適用されていない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 から指定できるようになりました
画面に埋め込まれたメッセージを表示し、簡易ヘルプを表示します。
順番にヘルプを表示するステップ表示と一括でヘルプを表示する一括表示が可能です。
ステップ表示の場合は、右下に表示されるステップメニューにてステップの移動とサイトツアーの終了が可能です。また、キーボード操作も可能です。
テーマの機能にあるサイトツアーはこちらの関数を実行しています。
サイトツアーについての詳細はサイトツアー仕様書を参照してください。
本API は以下のdata属性と組み合わせ利用してください。
順番にヘルプを表示するステップ表示と一括でヘルプを表示する一括表示が可能です。
ステップ表示の場合は、右下に表示されるステップメニューにてステップの移動とサイトツアーの終了が可能です。また、キーボード操作も可能です。
- 右矢印アイコン、右矢印キー
- 次のステップへ移動
- 左矢印アイコン、左矢印キー
- 前のステップへ移動
- ×アイコン、エスケープキー
- サイトツアーを閉じる
テーマの機能にあるサイトツアーはこちらの関数を実行しています。
サイトツアーについての詳細はサイトツアー仕様書を参照してください。
注意事項
- この API は 8.0.10 から利用できます。
- data属性が指定されている場合はオプションの値ではなく、data属性の値が有効になります。
本API は以下のdata属性と組み合わせ利用してください。
属性名 | 省略時の値 | 説明 |
---|---|---|
data-intro | 必須項目 | ヘルプとして実際に表示される説明文です。 |
data-escape | true | data-intro に指定した文字列をエスケープするかどうかを指定します。 エスケープをしない場合は HTML を埋め込むことができます。 |
data-position | bottom | ヘルプを表示する対象の要素から、どこの位置に説明文を表示するか指定します。 省略すると対象の要素の下に説明文が表示されます。 |
data-align | center | data-position に top,bottom のどちらかを指定した場合のみ有効になります 説明文の横方向の表示位置を指定します。 left(左寄せ),center(中央寄せ),right(右寄せ) の指定が可能です。 |
data-verticalAlign | top | data-position に left,right のどちらかを指定した場合のみ有効になります。 説明文の縦方向の揃え位置を指定します。 top(上揃え),middle(中央揃え),bottom(下揃え) の指定が可能です。 |
data-width | 200px | 説明文を表示する要素の横幅を指定します。 未指定の場合は200px になりますが、ヘルプを表示する対象の要素が200px 未満の場合は、対象の要素の長さの横幅になります。 |
data-lineType | middle | ヘルプを表示する対象の要素と説明文表を結んでいる支持線の長さの種類を指定します。 short,middle,long の指定が可能です。 position に指定した値が top,bottom の場合は
|
data-menu-position | right | ステップメニューの表示位置を指定します。 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
- ステップ表示の場合に指定します
ステップメニューを表示するかどうかを指定します
title属性をツールチップで表示します。
title属性の値はエスケープしません。改行をしたい場合は<br>タグを埋め込んでください。
ツールチップを表示する要素のclass属性に以下のclass名を指定することでも任意の方向に同様のツールチップを表示できます。
title属性の値はエスケープしません。改行をしたい場合は<br>タグを埋め込んでください。
ツールチップを表示する要素のclass属性に以下のclass名を指定することでも任意の方向に同様のツールチップを表示できます。
- imui-tooltip-right : 指定した要素の右側(2020 Summerで追加)
- imui-tooltip-left : 指定した要素の左側(2020 Summerで追加)
- imui-tooltip-top : 指定した要素の上側
- imui-tooltip-bottom : 指定した要素の下側
注意事項
- ダイアログ内の要素など親要素にz-indexが指定されている要素にツールチップを表示したい場合は、親要素より大きい値のz-indexを指定してください。
- 2020 Summerにてオプションにpositionを指定可能になりました。
- スクロールに追従しない設定の親要素にツールチップを表示したい場合は、position属性にfixedを指定してください。
<!-- 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>
<!-- position を指定する例 (2020 Summerで追加) --> <textarea id="sampleId" title="position の確認(option の position を指定)" style="position:fixed" >ここをマウスオーバしてください</textarea> <script type="text/javascript"> $('#sampleId').imuiTooltip({position:'fixed'}); </script>
Parameters
- options : Object
- オプション
- options.tooltipLocation : String
- ツールチップを表示する位置を指定します
"right"(2020 Summerで追加),"left"(2020 Summerで追加),"top","bottom"のいずれかを指定してください - options.maxWidth : String
- ツールチップの最大横幅をpxで指定します
- options.tooltipTitle : String
- ツールチップに表示したい文字列を指定します
指定した文字列はエスケープしません - options.zIndex : String
- ツールチップのz-indexを指定します
- options.position : String
- ツールチップのpositionを指定します(2020 Summerで追加)
郵便番号検索ダイアログを作成します。
callback関数には第1引数にイベント、第2引数に検索結果オブジェクトが受け渡されます。
検索結果オブジェクトのプロパティは以下のとおりです。
プロパティの値はすべてString型になります。
注意事項
- Internet Explorerでは、ダイアログに配置するコンポーネントの組み合わせによっては、ダイアログの高さが意図せず増加する場合があります。
- ダイアログを表示する要素にはかならずID属性を指定する必要があります。
プロパティの値はすべて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
- ダイアログのタイトルを指定します