携帯電話開発のH 5+標準的な原生UI警告ボックス


携帯電話の開発では、いくつかの要求を処理したり、ユーザーに警告したりする場合、警告画面をポップアップしてユーザーにフィードバックすることで、ユーザーに良い経験をさせたい.H 5+仕様は携帯電話の生コントロールを呼び出すAPIインターフェースをいくつか提供しています.
これらのポップアップブロックは、以下のように、native UIオブジェクトによって実現される.
1.ポップアップ確認ボックス---confirm
  :plus.nativeUI.confirm("info", callbackFunc(event), "title", [buttons]);
説明:info----ポップアップボックスに表示される情報.title:ポップアップ枠のタイトル;ブッttons:ポップアップボックスの下に置いてあるボタンの組み合わせは、配置順序がbuttongsの順序と逆です.calbackFun:ペインの下のボタンをクリックした後のトリガイベントです.
どのボタンをクリックしたかをどう判定しますか?
例をあげて説明します.
//     
plus.nativeUI.confirm("     ", function(event) {
	var tapIndex = event.index;
	switch (tapIndex) {
		case 0 : 
			console.log("    ' '  ");
			break;
		case 1 : 
			console.log("    ' '  ");
			break;
		case 2 : 
			console.log("    '   '  ");
			break;
	}
}, "  ", [" ", " ", "   "]);
2.警告枠----alert
  :plus.nativeUI.alert("info", alertFunc(event), "title", buttonName);
ここではconfirmと違って、alertボックスはボタン一つしかないので、最後のパラメータはStringボタンの名前です.イベント処理はalertFunで処理されます.
例をあげて説明します.
//     
plus.nativeUI.confirm("     ", function(event) {
	//     ,       ,      
}, "  /  ", "  ");
3.入力ボックス----prompt
  :plus.nativeUI.prompt("info", promptFunc(event), "title", tips, [buttons]);
説明:info:ダイアログのヒントを入力します.promptFun:ダイアログを閉じるコールバック;タイトル、言わない;tip:入力したところに表示されるヒントテキスト.Bttons:ダイアログで表示されるボタン配列.
入力の値はどのように取得しますか?promputFunのコールバック関数のeventパラメータで、event.indexは読み取りのどのボタンかを判断し、event.valueは入力の値を取得します.例をあげて説明します.
//      
plus.nativeUI.prompt("      ", function(event){
	if(event.index){//     
		console.log("    :" + event.value);
	} else {//     
		console.log("        ");
	}
}, "  ", "    ", ["  ", "  "]);
4.自動的に消える浮動枠をイジェクトする.
  :plus.nativeUI.toast("info", options);
説明:info:ポップアップの内容情報.
options:ポップアップボックスのいくつかの説明オプション情報については、ポップアップボックスに表示されるアイコン、位置、および継続時間を設定することができます.
options属性説明:icon---表示のアイコン;duration---メッセージボックスの持続時間(long/shot);align---水平方向位置(left/center/right);vertical Align---垂直方向の位置(top/center/bottom).
//      
plus.nativeUI.toast("       ", {
	icon : "icon URL",// eg. "/img/add.png"
	duration : "long",//   3.5s,short---2s
	align : "center",//     
	verticalAlign : "bottom"//     
});