本节知识点
- MUI的4种提示框
(1) 警告提示框
- 一共3个参数 第一个是内容 第二个是提示,第三个是回调函数
mui.alert("欢迎使用MUI警告框","Mui提示",function(){
alert("你刚关闭了警告框");
})
(2)消息确认框
- 一共四个参数 第一个是内容,第二个是提示的标题,第三个是按钮上面的文字,第四个是回调函数
实际情况是在右边,因为让用户去点击
/*确认框组件*/
button2.addEventListener("tap",function(){
var arr = ["是","否"];
mui.confirm("你喜欢MUI框架吗?","提示框标题",arr,function(e){
if(e.index==0)
{
alert("你点击的是");
}else
{
alert("你点击的是否");
}
})
})
/*确认框组件*/
(3) 输入框组件
一共5个参数: 第一个内容 第二个输入框的内容,第三个标题,第四个按钮上面的文字,第五个回调函数。回调函数里面利用e.index和e.value来判断点击和输入的文字
button3.addEventListener("tap",function(){
var arr = ["谢谢评价","请评价一下"];
mui.prompt("请输入本次的评价","内容好","评价标题",arr,function(e){
if(e.index==0)
{
alert("你点击的是并且输入的话是"+e.value);
}else
{
alert("你点击的是否");
}
})
})
(4)自动消息提示框用的最多
这样他加载完以后会自动隐藏的
button4.addEventListener("tap",function(){
mui.toast("加载中");
})
(5) 日期框 plus.nativeUI.pickDate
/*日期选择框开始*/
button5.addEventListener("tap",function(){
//js里的月份 是从0月开始的,也就是说,js中的0月是我们1月
var dDate=new Date(); //默认显示的时间
dDate.setFullYear(2018,1,28);
var minDate=new Date(); //可选择的最小时间
minDate.setFullYear(2010,0,1);
var maxDate=new Date(); //课选择的最大的时间
maxDate.setFullYear(2020,12,31);
plus.nativeUI.pickDate( function(e) {
var d=e.date;
alert('您选择的日期是:'+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+ d.getDate());
},function(e){
alert('您没有选择日期');
},{title:"请选择日期",date:dDate,minDate:minDate,maxDate:maxDate});
})
(6)时间框 pickTime
var dTime=new Date();
dTime.setHours(20,0); //设置默认时间
plus.nativeUI.pickTime(function(e){
var d=e.date;
alert("您选择的时间是:"+d.getHours()+":"+d.getMinutes());
},function (e){
alert('您没有选择时间');
},{title:"请选择时间",is24Hour:true,time:dTime});