jquery easyui messager pluginの使用
3257 ワード
Messagerはalert、confirm、prompt、progressなど、マルチスタイルのメッセージボックスを提供しています.すべてのmessagerは非同期であり、ユーザはコールバック関数を使用してmessagerと対話することができる.
Messagerはwindow、linkbutton、progressbarに依存します.
Messager使用例
上記のコードは、警告ボックスをポップアップします.
上記のコードは確認ボックスをポップアップします
Messagerのプロパティ
名前
値のタイプ
説明
デフォルト
ok
string
Okボタンのテキスト
Ok
cancel
string
Cancelボタンのテキスト
Cancel
Messagerの方法
名前
パラメータ
説明
$.messager.show
options
画面の右下にメッセージが表示されます.パラメータoptionsは、表示スタイルを構成するオブジェクトです.showType:この情報フォームがどのように表示されるかを定義します.オプションの値はnull、side、fade、showです.デフォルトはsideです.showSpeed:ウィンドウの表示が完了する時間を定義します.デフォルトは600ミリ秒です.width:ウィンドウの幅を定義し、デフォルトは250です.height:ウィンドウの高さを定義し、デフォルトは100です.title:panelの上部にあるタイトル.msg:表示する情報テキスト.style: Defines the custom dpecification style for message window. timeout:0と定義すると、このウィンドウはユーザーが閉じるまで閉じません.正の数として定義すると、指定秒後にウィンドウが閉じる.デフォルトは4秒です.ケースコード:
title, msg, icon, fn
alertフォームが表示されます.パラメータは、title:panelのタイトルです.msg:表示する情報テキスト.icon:額アイコンを表示します.オプションの値はerror、question、info、warningです.fn:フォームが閉じたときのコールバック関数.ケースコード:
title, msg, fn
OkボタンとCancelボタンが付いた確認ボックスが表示されます.パラメータは、title:最上位パネルのタイトルです.msg:表示する情報テキスト.fn(b):コールバック関数、パラメータbのコールバックの値、trueはOkボタンをクリックしたこと、falseはCancelボタンをクリックしたことを示す.ケースコード:
title, msg, fn
OkボタンとCancelボタン付きの入力ボックスが表示され、ユーザーに入力を求めるプロンプトが表示されます.パラメータは以下の通りです.title:最上位パネルのタイトルです.msg:表示するテキスト情報.fn(val):コールバック関数、valコールバックユーザの入力.ケースコード:
options or method
進捗フォームThe options is defined as:title:The title text to be showed on header panel,default'. msg: The message box body text, default ''. text: The text to display in the progress bar, default undefined. interval: The length of time in milliseconds between each progress update, default 300. The method is defined as: bar: Get the progressbar object. close: Close the progress window. Code example: Show progress message window.
Messagerはwindow、linkbutton、progressbarに依存します.
Messager使用例
$.messager.alert(' ', ' ');
上記のコードは、警告ボックスをポップアップします.
$.messager.confirm(' ',' ?', function (r) if(r == true) {$(this).window('close');})
上記のコードは確認ボックスをポップアップします
Messagerのプロパティ
名前
値のタイプ
説明
デフォルト
ok
string
Okボタンのテキスト
Ok
cancel
string
Cancelボタンのテキスト
Cancel
Messagerの方法
名前
パラメータ
説明
$.messager.show
options
画面の右下にメッセージが表示されます.パラメータoptionsは、表示スタイルを構成するオブジェクトです.showType:この情報フォームがどのように表示されるかを定義します.オプションの値はnull、side、fade、showです.デフォルトはsideです.showSpeed:ウィンドウの表示が完了する時間を定義します.デフォルトは600ミリ秒です.width:ウィンドウの幅を定義し、デフォルトは250です.height:ウィンドウの高さを定義し、デフォルトは100です.title:panelの上部にあるタイトル.msg:表示する情報テキスト.style: Defines the custom dpecification style for message window. timeout:0と定義すると、このウィンドウはユーザーが閉じるまで閉じません.正の数として定義すると、指定秒後にウィンドウが閉じる.デフォルトは4秒です.ケースコード:
$.messager.show({
title:'My Title',
msg:'Message will be closed after 5 seconds.',
timeout:5000,
showType:'slide'
});
// show message window on top center
$.messager.show({
title:'My Title',
msg:'Message will be closed after 4 seconds.',
showType:'show',
style:{
right:'',
top:document.body.scrollTop+document.documentElement.scrollTop,
bottom:''
}
});
$.messager.alert title, msg, icon, fn
alertフォームが表示されます.パラメータは、title:panelのタイトルです.msg:表示する情報テキスト.icon:額アイコンを表示します.オプションの値はerror、question、info、warningです.fn:フォームが閉じたときのコールバック関数.ケースコード:
$.messager.alert('My Title','Here is a info message!','info');
$.messager.confirm title, msg, fn
OkボタンとCancelボタンが付いた確認ボックスが表示されます.パラメータは、title:最上位パネルのタイトルです.msg:表示する情報テキスト.fn(b):コールバック関数、パラメータbのコールバックの値、trueはOkボタンをクリックしたこと、falseはCancelボタンをクリックしたことを示す.ケースコード:
$.messager.confirm('Confirm', 'Are you sure to exit this system?', function(r){
if (r){
// exit action;
}
});
$.messager.prompt title, msg, fn
OkボタンとCancelボタン付きの入力ボックスが表示され、ユーザーに入力を求めるプロンプトが表示されます.パラメータは以下の通りです.title:最上位パネルのタイトルです.msg:表示するテキスト情報.fn(val):コールバック関数、valコールバックユーザの入力.ケースコード:
$.messager.prompt('Prompt', 'Please enter your name:', function(r){
if (r){
alert('Your name is:' + r);
}
});
$.messager.progress options or method
進捗フォームThe options is defined as:title:The title text to be showed on header panel,default'. msg: The message box body text, default ''. text: The text to display in the progress bar, default undefined. interval: The length of time in milliseconds between each progress update, default 300. The method is defined as: bar: Get the progressbar object. close: Close the progress window. Code example: Show progress message window.
$.messager.progress();
Now close the message window. $.messager.progress('close');