<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../../css/mui.min.css">
<!--App自定义的css-->
<!--<link rel="stylesheet" type="text/css" href="../css/app.css" />-->
</head>
<body>
<style>
.mui-control-content {
background-color: white;
min-height: 352px;
}
.topstar{
position: absolute;
right: 40px;
top: 58px;
z-index: 1;
}
.topstar span:after{
font-size: 18px;
content: '★';
color: orange;
}
.button_content{
width: 100%;
height: 44px;
background-color: #007AFF;
position: absolute;
bottom: 0;
}
.stars{
width: 100%;
list-style: none;
margin: 0 auto;
text-align: center;
line-height: 44px;
color: #F0AD4E;
}
.stars span{
font-size: 25px;
padding: 15px;
}
.stars span:after{
content: '☆';
}
.stars .show:after,.stars .show2:after{
content: '★';
}
.show {
color: yellow;
}
.show2{
color: orange;
}
</style>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">base</h1>
</header>
<div class="mui-content">
<div style="margin: 0; background-color: #007AFF;width: auto;height: 120px;"></div>
<div class="topstar">
<span></span>
</div>
<div class="mui-content-padded" style="background-color: white; margin: 0;">
<div class="mui-input-row mui-search" style="margin: 0px 8px; position: relative; bottom: 18px; z-index: 1;">
<input type="search" class="mui-input-clear" placeholder="" style="background-color: whitesmoke; box-shadow: 5px 5px 5px #888888;">
</div>
</div>
<div id="slider" class="mui-slider">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item" href="#item1mobile">部门</a>
<a class="mui-control-item" href="#item2mobile">工单类型</a>
<a class="mui-control-item" href="#item3mobile">工单标题</a>
</div>
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
<div class="mui-slider-group">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
<div id="scroll1" class="mui-scroll-wrapper">
<ul class="mui-table-view"></ul></div></div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<div id="scroll2" class="mui-scroll-wrapper">
<ul class="mui-table-view"></ul></div></div>
<div id="item3mobile" class="mui-slider-item mui-control-content">
<div id="scroll3" class="mui-scroll-wrapper">
<ul class="mui-table-view"></ul></div></div></div></div>
<div class="button_content">
<div class="stars">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<script src="../../js/mui.min.js"></script>
<script>
mui.init({
swipeBack: false
});
data = {"北京":{"朝阳":["cya","cyb","cyc"],"丰台":["fta","ftb","ftc"],"海淀":["hda","hdb","hdc"]},"福建":{"福州":["fza","fzb","fzc"],"厦门":["xma","xmb","xmc"],"漳州":["zza","zzb","zzc"]},"江西":{"南昌":["nca","ncb","ncc"],"九江":["jja","jjb","jjc"],"赣州":["gza","gzb","gzc"]}};
// 处理部门列表显示
function lu_ls(data){
var uls = document.querySelector(".mui-table-view");
for(i in data){
var lis = document.createElement("li");
lis.className = "mui-table-view-cell";
lis.innerHTML=i;
uls.appendChild(lis);
}
}
(function($) {
$('.mui-scroll-wrapper').scroll({
indicators: false //是否显示滚动条
});
lu_ls(data);
var item2 = document.getElementById('item2mobile');
var item3 = document.getElementById('item3mobile');
//监听tap事件
mui(".mui-slider-group").on('tap','.mui-table-view-cell',function(){
//抓到点击项目的值，如“资讯处”，二级菜单如“机台类型”。。。
var ul_key = document.getElementsByClassName(this.getAttribute("class"))[0].innerHTML;
console.log("选中 "+ul_key);
//alert(ul_key);
if (ul_key in data){
//二级联动某部门下的工单类型
var g_uls = item2.querySelector(".mui-table-view");
var chi_uls = g_uls.children;
for (var k=0; k<chi_uls.length; k++){
g_uls.removeChild(chi_uls[k]);
k--
}
for (var i in data[ul_key]){
var g_lis = document.createElement("li");
g_lis.className = "mui-table-view-cell";
g_lis.innerHTML=i;
g_uls.appendChild(g_lis);
}
//保存上一次点击的结果数据
sub_data = data[ul_key]
}else if(ul_key in sub_data){
//三级联动某工单类型下的工单标题
console.log(sub_data[ul_key])
var t_uls = item3.querySelector(".mui-table-view");
var chi_uls = t_uls.children;
for (var k=0; k<chi_uls.length; k++){
t_uls.removeChild(chi_uls[k]);
k--
}
thr_data = sub_data[ul_key]
for (k=0; k<thr_data.length; k++){
var t_lis = document.createElement("li");
t_lis.className = "mui-table-view-cell";
t_lis.innerHTML=thr_data[k];
t_uls.appendChild(t_lis);
}
}
});
var stars=document.querySelectorAll('.stars span');
var active=-1; //记录当前点击的是哪颗星星
for(var i=0;i<stars.length;i++){
stars[i].index=i;
stars[i].onmouseover=function(){setStar(this.index);};
stars[i].onmouseout=function(){setStar(active);};
stars[i].onclick=setClick;
}
function setStar(nub){
var name='';
name= nub<2?'show':'show2';
for(var i=0;i<stars.length;i++){
stars[i].className= i<=nub?name:'';
}
}
function setClick(){
active=this.index;
}
})(mui);
</script>
</body> </html>
