<!--弹出的div列表对应的详情-->
<div id="newhtml" class="white_content">
<div style="height: 5%;">
<ul class="mui-table-view" id="cd_ul_top">
</ul>
</div>
<div style="top:5%;overflow:auto;height:95%;">
<ul class="mui-table-view" style="height: 100%;" id="cd_ul">
</ul>
</div>
</div>
<!--结合div的遮罩层-->
<div id="fade" class="black_overlay">
</div>
如下是弹出div和遮罩层的样式.初始默认为隐藏.
.black_overlay{
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 998;//该属性如果不写,如果div的position属性值为fixed,则会出现遮罩层盖不住的情况
background-color: black;
opacity:.35;
}
.white_content {
display: none;
position: fixed;
top: 40%;
width: 100%;
height: 30px;
background-color: white;
z-index:1002;
text-align: center;
}
mui实例中统计图显示:mychart.setOption();
//使用刚制定的配置和数据显示图表
mychart.setOption(option);
getli(list_dc_id,list_num,list_sum,list_name);
//生成li列表,用mui设置每个li的监听事件,.this.id获取该li标签的动态id,,this.innerHTML查看li标签内的内容(子标签的所有内容).this.outerHTML显示整个li标签的所有内容(包括自己的所有内容)
function getli(list_dc_id,list_num,list_sum,list_name){
var ul_li = document.getElementById(\'ul_li\');
if(list_num==""&&list_sum==""&&list_name==""){
ul_li.innerHTML="";
}else{
var ul_li_html = \'<li class="mui-table-view-cell mui-col-xs-12" style="text-align: center;" >\'+
\'<span class="mui-pull-left"style="width: 33.30%;">姓名</span>\'+
\'<span style="width: 33.30%;">单数</span>\'+
\'<span class="mui-pull-right"style="width: 33.30%;">金额</span></li>\';
for(var i = 0;i<list_name.length;i++){
var li_html=\'<li class="mui-table-view-cell mui-col-xs-12" style="text-align: center;"id=\'+list_dc_id[i]+\'>\'+
\'<span class="mui-pull-left"style="width: 33.30%;">\'+list_name[i]+\'</span>\'+
\'<span style="width: 33.30%;">\'+list_num[i]+\'</span>\'+
\'<span class="mui-pull-right"style="width: 33.30%;">\'+list_sum[i]+\'</span></li>\';
ul_li_html+=li_html;
}
ul_li.innerHTML=ul_li_html;
}
}
如下图,通过监听li标签,设置div层和遮罩层样式display属性值为block.显示div和遮罩层
//菜单列表ul_li的监听
mui(\'#ul_li\').on(\'tap\',\'li\',function(){
var dc_id = this.id;
if(dc_id==""){
return;
}
//传统ajax的post请求方式
mui.ajax(\'http://192.168.1.23:8080/YSE/back/queryapp_getFoodSale.action\', {
data: {
type: type,
user:dc_id,
date: nd,
token: token
},
dataType: \'json\', //服务器返回json格式数据
type: \'post\', //HTTP请求类型
success: function(data) {
//服务器返回响应，根据响应结果，分析是否登录成功；
if(data == null) {
mui.toast(\'服务器连接失败，请重新尝试!!!\');
}else if(data==""){
mui.toast(\'未查询到该点餐数据!!!\');
}else if(data == \'1\') {//成功
}else{
var newData = JSON.stringify(data);//在这里stringfy()的作用是用于将一个对象解析成字符串
var newData2 = eval(\'(\'+newData+\')\');
var newhtml = \'<li class="mui-table-view-cell mui-col-xs-12" style=" width:100%; margin-top:0px;text-align: center; color: white;background-color: #1C86EE;z-index:99">\'+
\'<span class="mui-pull-left"style="width: 33.30%;">菜名</span>\'+
\'<span style="width: 33.30%;">数量</span>\'+
\'<span class="mui-pull-right"style="width: 33.30%;">金额</span></li>\';
var li_html="";
for(var i = 0;i<newData2.length;i++){
var name = newData2[i].name;
var num = newData2[i].num;
var sum = newData2[i].sum;
li_html += \'<li class="mui-table-view-cell mui-col-xs-12" style="text-align: center;">\'+
\'<span class="mui-pull-left"style="width: 33.30%;">\'+name+\'</span>\'+
\'<span style="width: 33.30%;">\'+num+\'</span>\'+
\'<span class="mui-pull-right"style="width: 33.30%;">\'+sum+\'</span></li>\';
}
document.getElementById(\'cd_ul_top\').innerHTML = newhtml;
document.getElementById("cd_ul").innerHTML = li_html;
document.getElementById(\'newhtml\').style.display=\'block\';
document.getElementById(\'fade\').style.display=\'block\';
}
},
error: function(xhr, type, errorThrown) {
//异常处理；
console.log(xhr + "," + type + "," + errorThrown);
mui.toast("服务器连接异常!!!");
}
});
});
利用mui框架设置手机回退按键功能.如果div属性为block,点击回退执行操作:设置属性none隐藏div层和遮罩层,否则继续执行回退按键回退webview操作.
第二个为监听点击遮罩层,同样隐藏div层和遮罩层
//回退按钮
var oldBack = mui.back;
mui.back = function(event) {
if(document.getElementById(\'newhtml\').style.display==\'block\'){
document.getElementById(\'newhtml\').style.display=\'none\';
document.getElementById(\'fade\').style.display=\'none\';
return false;
}else{
oldBack();
}
};
document.getElementById(\'fade\').addEventListener(\'tap\',function(){
document.getElementById(\'newhtml\').style.display=\'none\';
document.getElementById(\'fade\').style.display=\'none\';
})
//弹出层后,设置样式,禁止底部滑动:
主要是设置html和body两个标签的overflow属性:hidden超出部分隐藏.实现不能滑动
.noscroll{
height: 100%;
overflow: hidden;
}
//添加属性class="noscroll",禁止滑动
document.getElementsByTagName(\'html\')[0].className="noscroll";
document.getElementsByTagName(\'body\')[0].className="noscroll";