API Reference

Plugins

Native.js


nativeUI

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

方法：

对象：

回调方法：

模块：

5+功能模块（permissions）


{
// ...
"permissions":{
	// ...
	"NativeUI": {
		"description": "原生UI控件"
	}
}
}

actionSheet

弹出系统选择按钮框


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

说明：

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

参数：

返回值：

NativeUIObj : 系统原生界面基类对象

示例：


<!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回调函数通知对话框已关闭。

参数：

返回值：

void : 无

示例：


<!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回调函数通知用户点击的按钮索引值。

参数：

返回值：

void : 无

平台支持：

示例：


<!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事件。

参数：

无

返回值：

void : 无

示例：


<!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方法进行关闭。

参数：

返回值：

Waiting : 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回调。

参数：

返回值：

void : 无

示例：


<!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回调。

参数：

返回值：

void : 无

示例：


<!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回调函数返回用户点击的按钮及输入的内容。

参数：

返回值：

void : 无

示例：


<!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。

参数：

返回值：

void : 无

示例：


<!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>

showMenu

显示导航栏菜单

说明：

在流应用导航栏的右侧显示自定义菜单。 如果已经显示菜单，再次调用则更新菜单。

参数：

返回值：

void : 无

平台支持：

示例：


<!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 showMenu(){
	plus.nativeUI.showMenu({title:"比价",badge:true},
		[{title:"淘宝网"},{title:"京东"},{title:"唯品会",checked:true}],
		function(e){
			console.log("点击了 "+e.target.title+" 菜单项");
		});
}
// 隐藏自定义菜单
function hideMenu(){
	plus.nativeUI.hideMenu();
}
		</script>
	</head>
	<body>
		自定义导航栏菜单<br/>
		<button onclick="showMenu()">显示菜单</button><br/>
		<button onclick="hideMenu()">隐藏菜单</button><br/>
	</body>
</html>

hideMenu

隐藏导航栏菜单

参数：

无

返回值：

void : 无

平台支持：

示例：


<!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 showMenu(){
	plus.nativeUI.showMenu({title:"比价",badge:true},
		[{title:"淘宝网",onclick:function(){
			concole.log("clicked:淘宝网");
		}},{title:"京东",onclick:function(){
			console.log("clicked:京东");
		}},{title:"唯品会",checked:true,onclick:function(){
			console.log("clicked:唯品会");
		}}
		]);
}
// 隐藏自定义菜单
function hideMenu(){
	plus.nativeUI.hideMenu();
}
		</script>
	</head>
	<body>
		自定义导航栏菜单<br/>
		<button onclick="showMenu()">显示菜单</button><br/>
		<button onclick="hideMenu()">隐藏菜单</button><br/>
	</body>
</html>

getTitlebarHeight

获取流应用标题栏高度


Number plus.nativeUI.getTitlebarHeight();

说明：

值为逻辑像素高度（px）。

参数：

无

返回值：

Number : 标题栏的逻辑像素高度

isTitlebarVisible

流应用标题栏是否显示


Boolean plus.nativeUI.isTitlebarVisible();

说明：

获取当前环境的标题栏显示/隐藏状态，返回true表示标题栏已显示，返回false表示标题栏已隐藏（或者当前环境没有标题栏）。

参数：

无

返回值：

Boolean : true表示标题栏已显示，false表示标题栏已隐藏

setTitlebarVisible

设置流应用标题栏是否显示


void plus.nativeUI.setTitlebarVisible(visible);

说明：

如果要设置的值与当前显示状态一致，则无效果。

参数：

返回值：

void : 无

ActionButtonStyles

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

属性：

示例：


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

ActionSheetStyles

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

属性：

示例：


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

PickDateOption

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

属性：

PickTimeOption

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

属性：

NativeUIObj

系统原生界面基类对象


interface NativeUIObj{
	function void close();
}

方法：

close

关闭显示的系统原生界面


void uiobj.close();

说明：

调用plus.nativeUI.actionSheet方法创建并显示系统界面后，可通过其close方法将原生界面关闭。 此情况下触发界面关闭回调函数参数的index属性值为-1。 注意：一个系统原生界面只能关闭一次，多次调用将无任何作用。

参数：

无

返回值：

void : 无

示例：


<!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);
}
// 弹出系统选择按钮框(5秒后自动关闭) 
function test(){
	var a = plus.nativeUI.actionSheet({title:'Plus is ready!',cancel:'取消',buttons:[{title:'1'},{title:'2'}]}, function(e){
		console.log('User pressed: '+e.index);
		a=null;
	});
	setTimeout(function(){
		a&&a.close();
	}, 5000);
}
		</script>
	</head>
	<body>
	弹出系统选择按钮框<br/>
	<button onclick="test()">actionSheet(5秒后自动关闭)</button>
	</body>
</html>

WaitingObj

系统等待对话框对象

说明：

从NativeUIObj对象继承而来，通过plus.nativeUI.showWaiting方法创建时返回。 用于控制系统样式等待对话框的操作，如关闭、设置标题内容等。

方法：

事件：

setTitle

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


wobj.setTitle( title );

参数：

返回值：

void : 无

示例：


<!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方法将原生等待控件关闭。 一个系统等待对话框只能关闭一次，多次调用将无任何作用。

参数：

无

返回值：

void : 无

示例：


<!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!" );
};

说明：

function 类型

等待框关闭时触发，当调用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>

WaitingOptions

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

属性：

WaitingLoadingOptions

JSON对象，原生等待对话框上loading图标自定义样式

属性：

ToastOptions

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

属性：

MenuStyles

菜单样式参数

属性：

MenuItemStyles

菜单项样式参数

属性：

ActionSheetCallback

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


void onActioned( Event event ){
	// actionsheet handled code.
	var index=event.index; // 用户关闭时点击按钮的索引值
}

参数：

返回值：

void : 无

示例：


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

AlertCallback

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


void onAlerted( Event event ){
	// Alert handled code.
	var index=event.index; // 用户关闭提示对话框点击按钮的索引值
}

参数：

返回值：

void : 无

平台支持：

ConfirmCallback

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


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

参数：

返回值：

void : 无

平台支持：

PromptCallback

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


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

参数：

返回值：

void : 无

平台支持：

PickDatetimeSuccessCallback

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


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

参数：

返回值：

void : 无

PickDatetimeErrorCallback

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


function void onPickError( Exception error ) {
	// Date picked error.
	var code = error.code; // 错误编码
	var message = error.message; // 错误描述信息
}

参数：

返回值：

void : 无

MenuItemClickedCallback

菜单项点击操作触发的回调函数


function void onClick( Event event ) {
	// Date picked code.
	var index = event.index;// 点击的菜单项索引值
	var item = event.target;// 点击的菜单项对象
}

参数：

返回值：

void : 无

示例：


<!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 showMenu(){
	plus.nativeUI.showMenu({title:"比价",badge:true},
		[{title:"淘宝网"}
		,{title:"京东"}
		,{title:"唯品会",checked:true}],
		onclicked);
}
// 点击菜单项回调函数
function onclicked(e){
	var index = e.index;
	var item = e.target;
	console.log("用户点击了第"+index+"项: "+item.title);
}
		</script>
	</head>
	<body>
		自定义导航栏菜单<br/>
		<button onclick="showMenu()">显示菜单</button><br/>
	</body>
</html>