nativeUI

稿件来源: 互联网   撰稿作者: 匿名   发表日期: 2015-03-23   阅读次数: 2100   查看权限: 游客查看

nativeUI管理系统原生界面,可用于弹出系统原生提示对话框窗口、时间日期选择对话框、等待对话框等。

方法:

对象:

回调方法:

actionSheet

弹出系统选择按钮框

void plus.nativeUI.actionSheet( actionsheetStyle, actionsheetCallback );

说明:

从底部动画弹出系统样式选择按钮框,可设置选择框的标题、按钮文字等。 弹出的提示框为非阻塞模式,用户点击选择框上的按钮后关闭,并通过actionsheetCallback回调函数通知用户选择的按钮。

参数:

返回值:

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>nativeUI Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
	// 弹出系统选择按钮框
	plus.nativeUI.actionSheet( {title:"Plus is ready!",cancel:"取消",buttons:[{title:"1"},{title:"2"}]}, function(e){
		console.log( "User pressed: "+e.index );
	} );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
		</script>
	</head>
	<body>
	弹出系统选择按钮框
	</body>
</html>

alert

弹出系统提示对话框

void plus.nativeUI.alert( message, alertCB, title, buttonCapture );

说明:

创建并显示系统样式提示对话框,可设置提示对话框的标题、内容、按钮文字等。 弹出的提示对话框为非阻塞模式,用户点击提示对话框上的按钮后关闭,并通过alertCB回调函数通知对话框已关闭。

参数:

  • message (String) 可选 提示对话框上显示的内容
  • alertCB (AlertCallback) 可选 提示对话框上关闭后的回调函数
  • title (String) 可选 提示对话框上显示的标题
  • buttonCapture (String) 可选 提示对话框上按钮显示的内容

返回值:

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>nativeUI Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
	// 弹出系统提示对话框
	plus.nativeUI.alert( "Plus is ready!", function(){
		console.log( "User pressed!" );
	}, "nativeUI", "OK" );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
		</script>
	</head>
	<body>
	弹出系统提示对话框
	</body>
</html>

confirm

弹出系统确认对话框

void plus.nativeUI.confirm( message, confirmCB, title, buttons );

说明:

创建并显示系统样式确认对话框,可设置确认对话框的标题、内容、按钮数目及其文字。 弹出的确认对话框为非阻塞模式,用户点击确认对话框上的按钮后关闭,并通过confirmCB回调函数通知用户点击的按钮索引值。

参数:

  • message (String) 可选 确认对话框上显示的内容
  • confirmCB (ConfirmCallback) 可选 回调函数中包括Event参数,可通过其index属性(Number类型)获取用户点击按钮的索引值。
  • title (String) 可选 确认对话框上显示的标题
  • buttons (Array) 可选 字符串数组,每项对应在确认对话框上显示一个按钮,用户点击后通过confirmCB返回用户点击按钮的在数组中的索引值。

返回值:

平台支持:

Android : 2.2+

对话框上最多只能支持三个按钮,buttons参数超过三个的值则忽略。

iOS : 4.5+

WP : 7.5+

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>nativeUI Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
	// 弹出提示信息对话框
	plus.nativeUI.confirm( "Are you sure ready?", function(e){
		console.log( (e.index==0)?"Yes!":"No!" );
	}, "nativeUI", ["Yes","No"] );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
		</script>
	</head>
	<body>
	弹出系统确认对话框
	</body>
</html>

closeWaiting

关闭系统等待对话框

void plus.nativeUI.closeWaiting();

说明:

关闭已经显示的所有系统样式等待对话框,触发Waiting对象的onclose事件。

返回值:

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>nativeUI Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
	// 弹出系统等待对话框
	plus.nativeUI.showWaiting( "等待中..." );
	setTimeout( function(){
		plus.nativeUI.closeWaiting();
	}, 5000 );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
		</script>
	</head>
	<body>
	显示系统等待对话框
	5S后自动关闭
	</body>
</html>

showWaiting

显示系统等待对话框

Waiting plus.nativeUI.showWaiting( title, options );

说明:

创建并显示系统样式等待对话框,并返回等待对话框对象Waiting,显示后需调用其close方法进行关闭。

参数:

  • title (String) 可选 等待对话框上显示的提示标题内容
  • options (WaitingOption) 可选 可设置等待对话框的宽、高、边距、背景等样式。

返回值:

Waiting对象

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>nativeUI Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
	// 弹出系统等待对话框
	var w = plus.nativeUI.showWaiting( "等待中..." );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
		</script>
	</head>
	<body>
	显示系统等待对话框
	</body>
</html>

pickDate

弹出系统日期选择对话框

void plus.nativeUI.pickDate( successCB, errorCB, options );

说明:

创建并显示系统样式日期选择对话框,可进行日期的选择。 用户操作确认后通过successCB回调函数返回用户选择的日期,若用户取消选择则通过errorCB回调。

参数:

返回值:

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>nativeUI Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 选择日期
function pickDate(){
	plus.nativeUI.pickDate( function(e){
		var d=e.date;
		console.log( "选择的日期:"+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate() );
	},function(e){
		console.log( "未选择日期:"+e.message );
	});
}
		</script>
	</head>
	<body>
	弹出系统日期选择对话框
	<br/>
	<button onclick="pickDate()">选择日期</button>
	</body>
</html>

pickTime

弹出系统时间选择对话框

void plus.nativeUI.pickTime( successCB, errorCB, options );

说明:

创建并弹出系统样式时间选择对话框,可进行时间的选择。 用户操作确认后通过successCB回调函数返回用户选择的时间,若用户取消选择则通过errorCB回调。

参数:

返回值:

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>nativeUI Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 选择时间
function pickTime(){
	plus.nativeUI.pickTime( function(e){
		var d=e.date;
		console.log( "选择的时间:"+d.getHours()+":"+d.getMinutes() );
	},function(e){
		console.log( "未选择时间:"+e.message );
	});
}
		</script>
	</head>
	<body>
	弹出系统时间选择对话框
	<br/>
	<button onclick="pickTime()">选择时间</button>
	</body>
</html>

prompt

弹出系统输入对话框

void plus.nativeUI.prompt( message, promptCB, title, tip, buttons );

说明:

创建并显示系统样式输入对话框,可设置输入对话框的标题、内容、提示输入信息、按钮数目及其文字。 弹出的输入对话框为非阻塞模式,其中包含编辑框供用户输入内容,用户点击输入对话框上的按钮后自动关闭,并通过promptCB回调函数返回用户点击的按钮及输入的内容。

参数:

  • message (String) 可选 输入对话框上显示的内容
  • promptCB (PromptCallback) 可选 回调函数中包括Event参数,可通过其index属性(Number类型)获取用户点击按钮的索引值,通过其value属性(String类型)获取用户输入的内容。
  • title (String) 可选 输入对话框上显示的标题
  • tip (String) 可选 输入对话框上编辑框显示的提示文字
  • buttons (Array) 可选 输入对话框上显示的按钮数组

返回值:

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>nativeUI Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
	// 弹出输入对话框
	plus.nativeUI.prompt( "Input your name: ", function(e){
		console.log( ((e.index==0)?"OK: ":"Cancel")+e.value );
	},"nativeUI", "your name", ["OK","Cancel"]);
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
		</script>
	</head>
	<body>
	弹出系统输入对话框
	</body>
</html>

toast

显示自动消失的提示消息

void plus.nativeUI.toast( message, options );

说明:

创建并显示系统样式提示消息,弹出的提示消息为非阻塞模式,显示指定时间后自动消失。 提示消息显示时间可通过options的duration属性控制,长时间提示消息显示时间约为3.5s,短时间提示消息显示时间约为2s。

参数:

  • message (String) 可选 提示消息上显示的文字内容
  • options (ToastOption) 可选 可设置提示消息显示的图标、持续时间、位置等。

返回值:

平台支持:

Android : 2.2+

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>nativeUI Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
	// 显示自动消失的提示消息
	plus.nativeUI.toast( "I'am toast information!");
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
		</script>
	</head>
	<body>
	显示自动消失的提示消息
	</body>
</html>

ActionButtonStyle

JSON对象,原生选择按钮框上按钮的样式参数

属性:

  • title:String,按钮上显示的文字内容
  • style:String,“destructive”表示警示按钮样式、“default”表示默认按钮样式,默认为“default”。

ActionSheetStyle

JSON对象,原生选择按钮框的样式参数

属性:

  • title:String,选择按钮框的标题
  • cancel:String,不设置此属性,则不显示取消按钮。
  • buttons:Array,选择框上的按钮,ActionButtonStyle对象数组

PickDateOption

JSON对象,日期选择对话框的参数

属性:

  • title:String,如果未设置标题,则默认显示标题为当前选择的日期。
  • date:Date,如果未设置默认显示的日期,则显示当前的日期。
  • minDate:Date,Date类型对象,如果未设置可选择的最小日期,则使用系统默认可选择的最小日期值。
  • maxDate:Date,Date类型对象,如果未设置可选择的最大日期,则使用系统默认可选择的最大日期值。 其值必须大于minDate设置的值,否则使用系统默认可选择的最大日期值。
  • popover:JSON,JSON类型对象,格式如{top:10;left:10;width:200;height:200;},所有值为像素值,其值为相对于容器Webview的位置。 如未设置此值,默认在屏幕居中显示。仅在iPad上有效,其它设备忽略此值。

PickTimeOption

JSON对象,时间选择对话框的参数

属性:

  • time:Date,如果未设置标题,则默认显示标题为当前选择的时间。
  • title:String,如果未设置标题,则默认显示标题为当前选择的时间。
  • is24Hour:Boolean,true表示使用24小时制模式显示,fale表示使用12小时制模式显示,默认值为true。
  • popover:JSON,JSON类型对象,格式如{top:10;left:10;width:200;height:200;},所有值为像素值,其值相对于容器webview的位置。 如未设置此值,默认在屏幕居中显示。仅在iPad上有效,其它设备忽略此值。

Waiting

系统等待对话框对象

说明:

可通过plus.nativeUI.showWaiting方法创建,用于控制系统样式等待对话框的操作,如关闭、设置标题内容等。

方法:

  • setTitle设置等待对话框上显示的文字内容
  • close关闭显示的系统等待对话框

事件:

  • onclose等待对话框关闭事件

setTitle

设置等待对话框上显示的文字内容

wobj.setTitle( title );

说明:

在调用plus.nativeUI.showWaiting方法时设置等待对话框初始显示的文字内容,显示后可通过此方法动态修改等待对话框上显示的文字,设置后文字内容将立即更新。

参数:

  • title (String) 可选 要设置的文本信息

返回值:

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>nativeUI Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
	// 弹出系统等待对话框
	var w = plus.nativeUI.showWaiting( "等待中..." );
	// 2秒后更新
	setTimeout( function(){
			w.setTitle( "正在更新" );
	}, 2000 );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
		</script>
	</head>
	<body>
	显示系统等待对话框<br/>
	设置等待对话框上显示的文字内容
	</body>
</html>

close

关闭显示的系统等待对话框

wobj.close();

说明:

调用plus.nativeUI.showWaiting方法创建并显示系统等待界后,可通过其close方法将原生等待控件关闭。 一个系统等待对话框只能关闭一次,多次调用将无任何作用。

返回值:

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>nativeUI Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
	// 弹出系统等待对话框
	var w = plus.nativeUI.showWaiting( "等待中..." );
	// 2秒后关闭
	setTimeout( function(){
			w.close();
	}, 2000 );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
		</script>
	</head>
	<body>
	显示系统等待对话框<br/>
	关闭显示的系统等待对话框
	</body>
</html>

onclose

等待对话框关闭事件

wobj.onclose = function() {
	console.log( "Waiting closed!" );
};

说明:

等待框关闭时触发,当调用close方法或用户点击返回按钮导致等待框关闭时触发。

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>nativeUI Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
	// 弹出系统等待对话框
	var w = plus.nativeUI.showWaiting( "等待中..." );
	// 关闭事件
	w.onclose = function() {
		console.log( "Waiting onclose!" );
	}
	// 2秒后关闭
	setTimeout( function(){
			w.close();
	}, 2000 );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
		</script>
	</head>
	<body>
	显示系统等待对话框<br/>
	关闭显示的系统等待对话框
	</body>
</html>

WaitingOption

JSON对象,原生等待对话框的参数

属性:

  • width:String,值支持像素值("500px")或百分比("50%"),百分比相对于屏幕的宽计算,如果不设置则根据内容自动计算合适的宽度。
  • height:String,值支持像素绝对值("500px")或百分比("50%"),如果不设置则根据内容自动计算合适的高度。
  • color:String,颜色值支持(参考CSS颜色规范):颜色名称(参考CSS Color Names)/十六进制值/rgb值/rgba值,默认值为白色。
  • textalign:String,对齐方式可选值包括:"left":水平居左对齐显示,"center":水平居中对齐显示,"right":水平居右对齐显示。默认值为水平居中对齐显示,即"center"。
  • padding:String,值支持像素值("10px")和百分比("5%"),百分比相对于屏幕的宽计算,默认值为"3%"。
  • background:String,背景色的值支持(参考CSS颜色规范):颜色名称(参考CSS Color Names)/十六进制值/rgb值/rgba值,默认值为rgba(0,0,0,0.8)。
  • style:String,可取值"black"、"white",black表示等待框为黑色雪花样式,通常在背景主色为浅色时使用;white表示等待框为白色雪花样式,通常在背景主色为深色时使用。 仅在iOS平台有效,其它平台忽略此值,未设置时默认值为white。
  • modal:Boolen,模态显示时用户不可操作直到等待对话框关闭,否则用户在等待对话框显示时也可操作下面的内容,未设置时默认为true。
  • round:Number,值支持像素值("10px"),未设置时使用默认值"10px"。
  • padlock:Boolen,true表示点击等待对话框显示区域时自动关闭,false则不关闭,未设置时默认值为false。

ToastOption

JSON对象,系统提示消息框要设置的参数

属性:

  • icon:String,提示消息框上显示的图标
  • duration:String,可选值为"long"、"short",值为"long"时显示时间约为3.5s,值为"short"时显示时间约为2s,未设置时默认值为"short"。
  • align:String,可选值为"left"、"center"、"right",分别为水平居左、居中、居右,未设置时默认值为"center"。
  • verticalAlign:String,可选值为"top"、"center"、"bottom",分别为垂直居顶、居中、居底,未设置时默认值为"bottom"。

ActionSheetCallback

系统选择按钮框的回调函数

void onActioned( Event event ){
	// actionsheet handled code.
}

说明:

系统选择按钮框的回调函数

参数:

  • event (Event) 可选 可通过event的index属性(Number类型)获取用户关闭时点击按钮的索引值,索引值从0开始; 0表示用户点击取消按钮,大于0值表示用户点击ActionSheetStyle中buttons属性定义的按钮,索引值从1开始(即1表示点击buttons中定义的第一个按钮)。

平台支持:

Android : 不支持

iOS : 4.3+

用户只能通过点击选择按钮上的按钮进行关闭。

WP : 不支持

AlertCallback

系统提示框确认的回调函数

void onAlerted(){
	// Alert handled code.
}

说明:

系统提示框确认的回调函数

平台支持:

Android : 2.2+

用户点击设备“返回”按键导致提示对话框关闭,也会触发此回调函数。

iOS : 4.3+

用户只能通过点击提示对话框上的按钮进行关闭。

WP : 7.5+

用户点击设备“返回”按键导致提示对话框关闭,也会触发此回调函数。

ConfirmCallback

关闭确认对话框的回调函数

void onConfirmed( Event event ) {
	// Confirm handled code.
	var index=event.index; // 用户关闭确认对话框点击按钮的索引值
}

说明:

关闭确认对话框的回调函数

参数:

  • event (Event) 可选 可通过event的index属性(Number类型)获取用户关闭确认对话框点击按钮的索引值,索引值从0开始;

平台支持:

Android : 2.2+

用户点击设备“返回”按键导致确认对话框关闭,则回调函数中event的index属性值为-1。

iOS : 4.3+

用户只能通过点击确认对话框上的按钮进行关闭。

WP : 7.5+

用户点击设备“返回”按键导致确认对话框关闭,则回调函数中event的index属性值为-1。

PromptCallback

系统输入对话框关闭后的回调函数

function void onPrompted( Event event ) {
	// Prompt handled code.
	var index=event.index; // 用户关闭输入对话框点击按钮的索引值
	var value=event.value; // 用户输入的内容
}

说明:

系统输入对话框关闭后的回调函数

参数:

  • event (Event) 可选 可通过event的index属性(Number类型)获取用户关闭输入对话框点击按钮的索引值,索引值从0开始; 通过event的value属性(String类型)获取用户输入的内容,如果没有输入则返回空字符串。

平台支持:

Android : 2.2+

用户点击设备“返回”按键导致输入对话框关闭,则回调函数中event的index属性值为-1,value值为空字符串。

iOS : 4.3+

用户只能通过点击输入对话框上的按钮进行关闭。

WP : 7.5+

用户点击设备“返回”按键导致输入对话框关闭,则回调函数中event的index属性值为-1,value值为空字符串。

PickDatetimeSuccessCallback

选择日期或时间操作成功的回调函数

function void onPickSuccess( Event event ) {
	// Date picked code.
	var date = event.date;// 用户选择的日期或时间
}

说明:

选择日期或时间操作成功的回调函数

参数:

  • event (Event) 可选 可通过event的date属性获取选择的日期或时间值。 若调用的是日期选择操作则仅年、月、日信息有效,若调用的是时间选择操作则仅时、分信息有效。

PickDatetimeErrorCallback

选择日期或时间操作取消或失败的回调函数

function void onPickError( Exception error ) {
	// Date picked error.
	alert( error.message );
}

说明:

选择日期或时间操作取消或失败的回调函数

参数:

  • error (Exception) 可选 用户选择操作失败信息

关键词: html5puls,nativeUI   编辑时间: 2015-03-23 22:53:33

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
上一篇:Downloader
下一篇:Events
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博    验证码:  点击更新请先登陆
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 我的妈妈爸爸
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐