HTML5+规范:nativeUI(管理系统原生界面)
nativeUI管理系统原生界面,可用于弹出系统原生提示对话框窗口、时间日期选择对话框、等待对话框等。
1、方法
1.1、actionSheet: 弹出系统选择按钮框
void plus.nativeUI.actionSheet( actionsheetStyle, actionsheetCallback );
说明:从底部动画弹出系统样式选择按钮框,可设置选择框的标题、按钮文字等。 弹出的提示框为非阻塞模式,用户点击选择框上的按钮后关闭,并通过actionsheetCallback回调函数通知用户选择的按钮。
参数:
actionsheetStyle: ( ActionSheetStyle ) 必选 选择按钮框显示的样式
actionsheetCallback: ( ActionSheetCallback ) 可选 选择按钮框关闭后的回调函数
返回值:void : 无
示例:
- <!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>
<!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>
1.2、alert: 弹出系统提示对话框
void plus.nativeUI.alert( message, alertCB, title, buttonCapture );
说明:创建并显示系统样式提示对话框,可设置提示对话框的标题、内容、按钮文字等。 弹出的提示对话框为非阻塞模式,用户点击提示对话框上的按钮后关闭,并通过alertCB回调函数通知对话框已关闭。
参数:
message: ( String ) 必选 提示对话框上显示的内容
alertCB: ( AlertCallback ) 可选 提示对话框上关闭后的回调函数
title: ( String ) 可选 提示对话框上显示的标题
buttonCapture: ( String ) 必选 提示对话框上按钮显示的内容
返回值: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>
<!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>
1.3、confirm: 弹出系统确认对话框
void plus.nativeUI.confirm( message, confirmCB, title, buttons );
说明:创建并显示系统样式确认对话框,可设置确认对话框的标题、内容、按钮数目及其文字。 弹出的确认对话框为非阻塞模式,用户点击确认对话框上的按钮后关闭,并通过confirmCB回调函数通知用户点击的按钮索引值。
参数:
message: ( String ) 必选 确认对话框上显示的内容
confirmCB: ( ConfirmCallback ) 可选 确认对话框关闭后的回调函数,回调函数中包括Event参数,可通过其index属性(Number类型)获取用户点击按钮的索引值。
title: ( String ) 可选 确认对话框上显示的标题
buttons: ( Array[ String ] ) 可选 确认对话框上显示的按钮。字符串数组,每项对应在确认对话框上显示一个按钮,用户点击后通过confirmCB返回用户点击按钮的在数组中的索引值。
返回值:void : 无
平台支持:Android - 2.2+ (支持): 对话框上最多只能支持三个按钮,buttons参数超过三个的值则忽略。iOS - 4.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>
<!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>
1.4、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>
<!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>
1.5、showWaiting: 显示系统等待对话框
Waiting plus.nativeUI.showWaiting( title, options );
说明:创建并显示系统样式等待对话框,并返回等待对话框对象Waiting,显示后需调用其close方法进行关闭。
参数:
title: ( String ) 可选 等待对话框上显示的提示标题内容
options: ( WaitingOptions ) 可选 等待对话框的显示参数,可设置等待对话框的宽、高、边距、背景等样式。
返回值: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>
<!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>
1.6、pickDate: 弹出系统日期选择对话框
void plus.nativeUI.pickDate( successCB, errorCB, options );
说明:创建并显示系统样式日期选择对话框,可进行日期的选择。 用户操作确认后通过successCB回调函数返回用户选择的日期,若用户取消选择则通过errorCB回调。
参数:
successCB: ( PickDatetimeSuccessCallback ) 必选 日期选择操作成功的回调函数。回调函数中包括Event参数,可通过其date属性(Date类型)获取用户选择的时间。
errorCB: ( PickDatetimeErrorCallback ) 可选 日期选择操作取消或失败的回调函数
options: ( PickDateOption ) 可选 日期选择操作的参数
返回值: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>
<!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>
1.7、pickTime: 弹出系统时间选择对话框
void plus.nativeUI.pickTime( successCB, errorCB, options );
说明:创建并弹出系统样式时间选择对话框,可进行时间的选择。 用户操作确认后通过successCB回调函数返回用户选择的时间,若用户取消选择则通过errorCB回调。
参数:
successCB: ( PickDatetimeSuccessCallback ) 必选 时间选择操作成功的回调函数。回调函数中包括Event参数,可通过其date属性(Date类型)获取用户选择的时间。
errorCB: ( PickDatetimeErrorCallback ) 可选 时间选择操作取消或失败的回调函数
options: ( PickTimeOption ) 可选 时间选择操作的参数
返回值: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>
<!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>
1.8、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[ String ] ) 可选 输入对话框上显示的按钮数组
返回值: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>
<!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>
1.9、toast: 显示自动消失的提示消息
void plus.nativeUI.toast( message, options );
说明:创建并显示系统样式提示消息,弹出的提示消息为非阻塞模式,显示指定时间后自动消失。 提示消息显示时间可通过options的duration属性控制,长时间提示消息显示时间约为3.5s,短时间提示消息显示时间约为2s。
参数:
message: ( String ) 必选 提示消息上显示的文字内容
options: ( ToastOption ) 可选 提示消息的参数。可设置提示消息显示的图标、持续时间、位置等。
返回值: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>
<!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>
2、对象
2.1、ActionButtonStyle: JSON对象,原生选择按钮框上按钮的样式参数
属性:
title: (String 类型 )按钮上显示的文字内容
style: (String 类型 )按钮的样式,可取值“destructive”、“default”。“destructive”表示警示按钮样式、“default”表示默认按钮样式,默认为“default”。
平台支持:Android - ALL (不支持),iOS - 5.0+ (支持): iOS7及以下系统只仅支持一个按钮为“destructive”样式按钮,iOS8及以上系统可支持多个“destructive”样式按钮。
示例:
- <!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>
<!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>
2.2、ActionSheetStyle: JSON对象,原生选择按钮框的样式参数
属性:
title: (String 类型 )选择按钮框的标题
cancel: (String 类型 )取消按钮上显示的文字内容,不设置此属性,则不显示取消按钮。
buttons: (Array[ ActionButtonStyle ] 类型 )选择框上的按钮,ActionButtonStyle对象数组
示例:
- <!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>
<!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>
2.3、PickDateOption: JSON对象,日期选择对话框的参数
属性:
(1)、title: (String 类型 )日期选择对话框显示的标题,如果未设置标题,则默认显示标题为当前选择的日期。
- <!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 );
- },{title:"请选择日期:"});
- }
- </script>
- </head>
- <body>
- 弹出系统日期选择对话框
- <br/>
- <button onclick="pickDate()">选择日期</button>
- <br/>
- 设置标题为“请选择日期:”
- </body>
- </html>
<!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 );
},{title:"请选择日期:"});
}
</script>
</head>
<body>
弹出系统日期选择对话框
<br/>
<button onclick="pickDate()">选择日期</button>
<br/>
设置标题为“请选择日期:”
</body>
</html>
(2)、date: (Date 类型 )日期选择对话框默认显示的日期,如果未设置默认显示的日期,则显示当前的日期。
- <!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(){
- var d=new Date();
- d.setFullYear(2008,7,8);
- plus.nativeUI.pickDate( function(e){
- var d=e.date;
- console.log( "选择的日期:"+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate() );
- },function(e){
- console.log( "未选择日期:"+e.message );
- },{date:d});
- }
- </script>
- </head>
- <body>
- 弹出系统日期选择对话框
- <br/>
- <button onclick="pickDate()">选择日期</button>
- <br/>
- 设置默认日期为“2008-08-08”
- </body>
- </html>
<!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(){
var d=new Date();
d.setFullYear(2008,7,8);
plus.nativeUI.pickDate( function(e){
var d=e.date;
console.log( "选择的日期:"+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate() );
},function(e){
console.log( "未选择日期:"+e.message );
},{date:d});
}
</script>
</head>
<body>
弹出系统日期选择对话框
<br/>
<button onclick="pickDate()">选择日期</button>
<br/>
设置默认日期为“2008-08-08”
</body>
</html>
(3)、minDate: (Date 类型 )日期选择对话框可选择的最小日期,Date类型对象,如果未设置可选择的最小日期,则使用系统默认可选择的最小日期值。
- <!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(){
- var d=new Date();
- d.setFullYear(2010,0,1);
- plus.nativeUI.pickDate( function(e){
- var d=e.date;
- console.log( "选择的日期:"+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate() );
- },function(e){
- console.log( "未选择日期:"+e.message );
- },{minDate:d});
- }
- </script>
- </head>
- <body>
- 弹出系统日期选择对话框
- <br/>
- <button onclick="pickDate()">选择日期</button>
- <br/>
- 设置最小可选日期为“2010-01-01”
- </body>
- </html>
<!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(){
var d=new Date();
d.setFullYear(2010,0,1);
plus.nativeUI.pickDate( function(e){
var d=e.date;
console.log( "选择的日期:"+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate() );
},function(e){
console.log( "未选择日期:"+e.message );
},{minDate:d});
}
</script>
</head>
<body>
弹出系统日期选择对话框
<br/>
<button onclick="pickDate()">选择日期</button>
<br/>
设置最小可选日期为“2010-01-01”
</body>
</html>
(4)、maxDate: (Date 类型 )日期选择对话框可选择的最大日期,Date类型对象,如果未设置可选择的最大日期,则使用系统默认可选择的最大日期值。 其值必须大于minDate设置的值,否则使用系统默认可选择的最大日期值。
- <!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(){
- var d=new Date();
- d.setFullYear(2014,11,31);
- plus.nativeUI.pickDate( function(e){
- var d=e.date;
- console.log( "选择的日期:"+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate() );
- },function(e){
- console.log( "未选择日期:"+e.message );
- },{maxDate:d});
- }
- </script>
- </head>
- <body>
- 弹出系统日期选择对话框
- <br/>
- <button onclick="pickDate()">选择日期</button>
- <br/>
- 设置最大可选日期为“2014-12-31”
- </body>
- </html>
<!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(){
var d=new Date();
d.setFullYear(2014,11,31);
plus.nativeUI.pickDate( function(e){
var d=e.date;
console.log( "选择的日期:"+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate() );
},function(e){
console.log( "未选择日期:"+e.message );
},{maxDate:d});
}
</script>
</head>
<body>
弹出系统日期选择对话框
<br/>
<button onclick="pickDate()">选择日期</button>
<br/>
设置最大可选日期为“2014-12-31”
</body>
</html>
(5)、popover: (JSON 类型 )时间选择对话框弹出指示区域,JSON类型对象,格式如{top:10;left:10;width:200;height:200;},所有值为像素值,其值为相对于容器Webview的位置。 如未设置此值,默认在屏幕居中显示。仅在iPad上有效,其它设备忽略此值。
2.4、PickTimeOption: JSON对象,时间选择对话框的参数
属性:
(1)、time: (Date 类型 )时间选择对话框默认显示的时间,如果未设置标题,则默认显示标题为当前选择的时间。
- <!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(){
- var t=new Date();
- t.setHours(6,0);
- plus.nativeUI.pickTime( function(e){
- var d=e.date;
- console.log( "选择的时间:"+d.getHours()+":"+d.getMinutes() );
- },function(e){
- console.log( "未选择时间:"+e.message );
- },{time:t});
- }
- </script>
- </head>
- <body>
- 弹出系统时间选择对话框
- <br/>
- <button onclick="pickTime()">选择时间</button>
- <br/>
- 设置默认显示时间为早上6点
- </body>
- </html>
<!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(){
var t=new Date();
t.setHours(6,0);
plus.nativeUI.pickTime( function(e){
var d=e.date;
console.log( "选择的时间:"+d.getHours()+":"+d.getMinutes() );
},function(e){
console.log( "未选择时间:"+e.message );
},{time:t});
}
</script>
</head>
<body>
弹出系统时间选择对话框
<br/>
<button onclick="pickTime()">选择时间</button>
<br/>
设置默认显示时间为早上6点
</body>
</html>
(2)、title: (String 类型 )时间选择对话框显示的标题,如果未设置标题,则默认显示标题为当前选择的时间。
- <!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 );
- },{title:"请选择时间:"});
- }
- </script>
- </head>
- <body>
- 弹出系统时间选择对话框
- <br/>
- <button onclick="pickTime()">选择时间</button>
- <br/>
- 设置标题为“请选择时间:”
- </body>
- </html>
<!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 );
},{title:"请选择时间:"});
}
</script>
</head>
<body>
弹出系统时间选择对话框
<br/>
<button onclick="pickTime()">选择时间</button>
<br/>
设置标题为“请选择时间:”
</body>
</html>
(3)、is24Hour: (Boolean 类型 )是否24小时制模式true表示使用24小时制模式显示,fale表示使用12小时制模式显示,默认值为true。
- <!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 );
- },{is24Hour:false});
- }
- </script>
- </head>
- <body>
- 弹出系统时间选择对话框
- <br/>
- <button onclick="pickTime()">选择时间</button>
- <br/>
- 设置12小时制显示
- </body>
- </html>
<!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 );
},{is24Hour:false});
}
</script>
</head>
<body>
弹出系统时间选择对话框
<br/>
<button onclick="pickTime()">选择时间</button>
<br/>
设置12小时制显示
</body>
</html>
(4)、popover: (JSON 类型 )日期选择对话框弹出指示区域。JSON类型对象,格式如{top:10;left:10;width:200;height:200;},所有值为像素值,其值相对于容器webview的位置。 如未设置此值,默认在屏幕居中显示。仅在iPad上有效,其它设备忽略此值。
2.5、Waiting: 系统等待对话框对象
说明:可通过plus.nativeUI.showWaiting方法创建,用于控制系统样式等待对话框的操作,如关闭、设置标题内容等。
2.5.1、方法
(1)、setTitle: 设置等待对话框上显示的文字内容
wobj.setTitle( title );
说明:在调用plus.nativeUI.showWaiting方法时设置等待对话框初始显示的文字内容,显示后可通过此方法动态修改等待对话框上显示的文字,设置后文字内容将立即更新。
参数:title: ( String ) 必选 要设置的文本信息
返回值: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>
<!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>
(2)、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>
<!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>
2.5.2、事件
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>
<!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>
2.6、WaitingOptions: JSON对象,原生等待对话框的参数
属性:
(1)、width: (String 类型 )等待框背景区域的宽度。值支持像素值("500px")或百分比("50%"),百分比相对于屏幕的宽计算,如果不设置则根据内容自动计算合适的宽度。
(2)、height: (String 类型 )等待框背景区域的高度。值支持像素绝对值("500px")或百分比("50%"),如果不设置则根据内容自动计算合适的高度。
(3)、color: (String 类型 )等待框中文字的颜色。颜色值支持(参考CSS颜色规范):颜色名称(参考CSS Color Names)/十六进制值/rgb值/rgba值,默认值为白色。
(4)、size: (String 类型 )等待框中文字的字体大小。如"14px"表示使用14像素高的文字,未设置则使用系统默认字体大小。
(5)、textalign: (String 类型 )等待对话框中标题文字的水平对齐方式。对齐方式可选值包括:"left":水平居左对齐显示,"center":水平居中对齐显示,"right":水平居右对齐显示。默认值为水平居中对齐显示,即"center"。
(6)、padding: (String 类型 )等待对话框的内边距。值支持像素值("10px")和百分比("5%"),百分比相对于屏幕的宽计算,默认值为"3%"。
(7)、background: (String 类型 )等待对话框显示区域的背景色。背景色的值支持(参考CSS颜色规范):颜色名称(参考CSS Color Names)/十六进制值/rgb值/rgba值,默认值为rgba(0,0,0,0.8)。
(8)、style: (String 类型 )等待对话框样式,可取值"black"、"white",black表示等待框为黑色雪花样式,通常在背景主色为浅色时使用;white表示等待框为白色雪花样式,通常在背景主色为深色时使用。 仅在iOS平台有效,其它平台忽略此值,未设置时默认值为white。
(9)、modal: (Boolen 类型 )等待框是否模态显示,模态显示时用户不可操作直到等待对话框关闭,否则用户在等待对话框显示时也可操作下面的内容,未设置时默认为true。
(10)、round: (Number 类型 )等待框显示区域的圆角。值支持像素值("10px"),未设置时使用默认值"10px"。
(11)、padlock: (Boolen 类型 )点击等待显示区域是否自动关闭。true表示点击等待对话框显示区域时自动关闭,false则不关闭,未设置时默认值为false。
(12)、back: (String 类型 )返回键处理方式,可取值"none"表示截获处理返回键,但不做任何响应;"close"表示截获处理返回键并关闭等待框;"transmit"表示不截获返回键,向后传递给Webview窗口继续处理(与未显示等待框的情况一致)。
平台支持Android - 2.3+ (支持)iOS - ALL (不支持): iOS设备无返回键,忽略此属性。
(13)、loading: (WaitingLoadingOptions 类型 )自定义等待框上loading图标样式
2.7、WaitingLoadingOptions: JSON对象,原生等待对话框上loading图标自定义样式
属性:
(1)、display: (String 类型 )loading图标显示样式。可取值: "block"表示图标与文字分开两行显示,上面显示loading图标,下面显示文字; "inline"表示loading图标与文字在同一行显示,左边显示loading图标,右边显示文字; "none"表示不显示loading图标;
(2)、icon: (String 类型 )loading图标路径。自定义loading图标的路径,png格式,并且必须是本地资源地址; loading图要求宽是高的整数倍,显示等待框时按照图片的高横向截取每帧刷新。
(3)、interval: (Number 类型 )loading图每帧刷新间隔。单位为ms(毫秒),默认值为100ms。
2.8、ToastOption: JSON对象,系统提示消息框要设置的参数
属性:
(1)、icon: (String 类型 )提示消息框上显示的图标
(2)、duration: (String 类型 )提示消息框显示的时间。可选值为"long"、"short",值为"long"时显示时间约为3.5s,值为"short"时显示时间约为2s,未设置时默认值为"short"。
(3)、align: (String 类型 )提示消息框在屏幕中的水平位置。可选值为"left"、"center"、"right",分别为水平居左、居中、居右,未设置时默认值为"center"。
(4)、verticalAlign: (String 类型 )提示消息在屏幕中的垂直位置。可选值为"top"、"center"、"bottom",分别为垂直居顶、居中、居底,未设置时默认值为"bottom"。
3、回调方法
3.1、ActionSheetCallback: 系统选择按钮框的回调函数
void onActioned( Event event ){
// actionsheet handled code.
var index=event.index; // 用户关闭时点击按钮的索引值
}
参数:event: ( Event ) 必选 用户操作选择按钮框关闭后返回的数据,可通过event.index(Number类型)获取用户关闭时点击按钮的索引值,索引值从0开始; 0表示用户点击取消按钮,大于0值表示用户点击ActionSheetStyle中buttons属性定义的按钮,索引值从1开始(即1表示点击buttons中定义的第一个按钮)。
返回值:void : 无
平台支持:Android - ALL (不支持),iOS - 4.3+ (支持): 用户只能通过点击选择按钮上的按钮进行关闭。
示例:
- <!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>
<!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>
3.2、AlertCallback: 系统提示框确认的回调函数
void onAlerted( Event event ){
// Alert handled code.
var index=event.index; // 用户关闭提示对话框点击按钮的索引值
}
参数:event: ( Event ) 必选 用户操作确认对话框关闭后返回的数据。可通过event.index(Number类型)获取用户关闭确认对话框点击按钮的索引值,点击确认键的索引值为0。 Android平台上通过返回按钮关闭时索引值为-1。
返回值:void : 无
平台支持:Android - 2.2+ (支持): 用户点击设备“返回”按键导致提示对话框关闭,也会触发此回调函数,此时回调返回参数中的index属性值为-1。iOS - 4.3+ (支持): 用户只能通过点击提示对话框上的按钮进行关闭。
3.3、ConfirmCallback: 关闭确认对话框的回调函数
void onConfirmed( Event event ) {
// Confirm handled code.
var index=event.index; // 用户关闭确认对话框点击按钮的索引值
}
参数:event: ( Event ) 必选 用户操作确认对话框关闭后返回的数据。可通过event.index(Number类型)获取用户关闭确认对话框点击按钮的索引值,索引值从0开始;
返回值:void :
无平台支持:Android - 2.2+ (支持): 用户点击设备“返回”按键导致确认对话框关闭,则回调函数中event的index属性值为-1。iOS - 4.3+ (支持): 用户只能通过点击确认对话框上的按钮进行关闭。
3.4、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类型)获取用户输入的内容,如果没有输入则返回空字符串。
返回值:void : 无
平台支持:Android - 2.2+ (支持): 用户点击设备“返回”按键导致输入对话框关闭,则回调函数中event的index属性值为-1,value值为空字符串。iOS - 4.3+ (支持): 用户只能通过点击输入对话框上的按钮进行关闭。
3.5、PickDatetimeSuccessCallback: 选择日期或时间操作成功的回调函数
function void onPickSuccess( Event event ) {
// Date picked code.
var date = event.date;// 用户选择的日期或时间
}
参数:event: ( Event ) 必选 用户完成选择日期或时间后返回的数据。可通过event.date(Date类型)获取选择的日期或时间值。 若调用的是日期选择操作则仅年、月、日信息有效,若调用的是时间选择操作则仅时、分信息有效。
返回值:void : 无
3.6、PickDatetimeErrorCallback: 选择日期或时间操作取消或失败的回调函数
function void onPickError( Exception error ) {
// Date picked error.
var code = error.code; // 错误编码
var message = error.message; // 错误描述信息
}
参数:error: ( Exception ) 必选 用户选择操作失败信息。可通过error.code(Number类型)获取错误编码; 可通过error.message(String类型)获取错误描述信息。
返回值:void : 无
HTML5+规范:nativeUI(管理系统原生界面)的更多相关文章
- HTML5规范尘埃落定,5个开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻.数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势.其 ...
- 脊柱外科病人资料管理系统的界面设计分析(2)--JOA评分记录的实现
在上篇随笔<脊柱外科病人资料管理系统的界面设计分析>中介绍了一些常用的界面设计方面的内容,本篇继续上一篇,介绍脊柱外科病人管理系统的JOA评分记录模块的界面设计以及实现方面的内容. JOA ...
- HTML5做的浏览器欢迎界面自动跳转
HTML5做的浏览器欢迎界面自动跳转 思路很简单,随手装逼呗.根据时间来控制背景图和文字,背景图加了毛玻璃效果,效果直接看图,用javascript来实现. 完整代码 <!DOCTYPE htm ...
- HTML5仿手机微信聊天界面
HTML5仿手机微信聊天界面 这篇文章主要为大家详细介绍了HTML5仿手机微信聊天界面的关键代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 给大家带来的是HTML5仿手机微信聊天界面, ...
- Android原生和H5交互;Android和H5混合开发;WebView点击H5界面跳转到Android原生界面。
当时业务的需求是这样的,H5有一个活动商品列表的界面,IOS和Android共用这一个界面,点击商品可以跳转到Android原生的商品详情界面并传递商品ID: 大概就是点击H5界面跳转到Androi ...
- 开发原生安卓cordova插件(有原生界面)
上文开发的插件没有调用原生界面,本文介绍开发带有activity的插件 本文很多操作与上文重复,重复部分会省略 首先打开plug1,先开发插件的原生代码 在以下命名空间创建一个activity 名称为 ...
- HTML5+规范:Webview(管理应用窗口界面)
一.知识点 Webview模块管理应用窗口界面,实现多窗口的逻辑控制管理操作.通过plus.webview可获取应用界面管理对象. 1.方法 1.1.all: 获取所有Webview窗口 Array[ ...
- HTML5能取代IOS原生应用吗
介绍 移动应用程序(App)和HTML5都是目前最火的技术,二者之间也有不少重叠之处.在移动设备浏览器里运行的html5的web页面,也可以重新打包成不同平台上运行的app.目前很多浏览器都有很好的跨 ...
- 基于 WebGL 3D 的 HTML5 档案馆可视化管理系统
前言 档案管理系统是通过建立统一的标准以规范整个文件管理,包括规范各业务系统的文件管理的完整的档案资源信息共享服务平台,主要实现档案流水化采集功能.为企事业单位的档案现代化管理,提供完整的解决方案,档 ...
随机推荐
- ffmpeg结合SDL编写播放器(一)
ffmpeg 工具是一个高效快速的命令行工具,进行视音频不同格式之间的转换. ffmpeg命令行 ffmpeg可以读取任意数量的输入“文件”(可以是常规文件,管道,网络流,抓取设备等)读取,由 -i ...
- 下拉选择的blur和click事件冲突了
当写个下拉选择框时我们希望当input失去焦点时,下拉框消失,或者当选择下拉框中的内容的同时将内容填入input并且使下拉框消失. 这时候我们会想到blur和click,单独使用的时候是没有问题的,但 ...
- [linux][c/c++]代码片段01
#include <stdio.h> #include <unistd.h> void usage() { printf("Usage:\n"); prin ...
- 第10组 Alpha冲刺(2/4)
队名:凹凸曼 组长博客 作业博客 组员实践情况 童景霖 过去两天完成了哪些任务 文字/口头描述 继续学习Android studio和Java 完善项目APP原型 展示GitHub当日代码/文档签入记 ...
- SpringCloud-Feign声明式服务调用
在前面的文章中可以发现当我们通过RestTemplate调用其它服务的API时,所需要的参数须在请求的URL中进行拼接,如果参数少的话或许我们还可以忍受,一旦有多个参数的话,这时拼接请求字符串就会效率 ...
- 【Gamma】设计与计划
目录 需求分析 已实现 功能 用户使用动机分析 当前阶段推广困难 当前阶段任务优先级 主要功能解析 社团活动场地申请 - 实现成本较高,正在调研社长的需求 完善入社流程的信息提示 通知功能 通知管理 ...
- Seq2Seq模型 与 Attention 策略
Seq2Seq模型 传统的机器翻译的方法往往是基于单词与短语的统计,以及复杂的语法结构来完成的.基于序列的方式,可以看成两步,分别是 Encoder 与 Decoder,Encoder 阶段就是将输入 ...
- Docker运行图形化程序
原理 Docker支持图形化程序,是利用Linux的X11技术. 相关文章 如何在Docker容器中启动D-Bus 引文详情 如何在Docker容器中启动D-Bus 翻译自 https://georg ...
- Egg.js运行环境配置场景
没有NODE_ENV和EGG_SERVER_ENV环境变量的场景 执行npm run dev,默认读取config.default.js. 执行npm run start,默认读取config.pro ...
- 解决在SQLPLUS中无法使用方向键、退格键问题
1. wget ftp://ftp.pbone.net/mirror/ftp5.gwdg.de/pub/opensuse/repositories/home:/matthewdva:/build:/E ...