点击切换到对应的页面
获得点击的回调数据
判断点击哪个显示对应的列表展示
所用样式文件
.aj-clearfix {
zoom: 1;
}
.aj-clearfix:after,
.aj-clearfix:before {
content: "";
display: table;
clear: both;
overflow: hidden;
font-size: 0;
height: 0;
}
*{
margin: 0;
padding: 0;
}
body,html{
width:100%;
height:100%;
overflow:hidden;
}
.YJ-home{
text-align: right;
margin-top: -4%;
padding-right: 1%;
cursor: pointer;
z-index:99999;
}
#aj-menuList {
font-size:30px;
width:100%;
height:100%;
background-color:#0087E5;
color: #fff;
background: url('./img/case.png') no-repeat;
background-size:100% 100% ;
position: relative;
}
.aj-menuListTitle {
font-size: 46px;
text-align: center;
height: 100px;
line-height:70px;
}
.aj-menuListContent {
position: absolute;
top:50%;
left:50%;
margin-left:-130px;
margin-top:-90px;
width: 290px;
font-size: 40px;
z-index:999;
}
.aj-menulist {
height: calc(100% - 100px);
width: 100%;
border-top: 1px solid transparent;
position: relative;
}
.aj-menulist li{
color: #fff;
list-style: none;
cursor: pointer;
}
.aj-menulist li span {
font-size: 40px;
}
.aj-menulist span:nth-of-type(1) {
width: 370px;
height: 100px;
display: block;
}
.aj-menulist li:hover{
color: #CDC819;
}
.aj-menuleft {
float: left;
width: 50%;
height: 100%;
}
.aj-menuleft li span:nth-of-type(1){
background: url('./img/btn.png') no-repeat;
background-size: 100% 100%;
}
.aj-menuleft li span:nth-of-type(1):hover{
background: url('./img/btn_1.png') no-repeat;
background-size: 100% 100%;
}
.aj-menuleft li span:nth-of-type(2){
position: absolute;
top: 20px;
left: 100px;
}
.aj-menuleft li span:nth-of-type(3){
position: absolute;
top: 28px;
left: 30px;
}
.aj-menuright {
float: right;
width: 50%;
height: 100%;
}
.aj-menuright li span:nth-of-type(1){
background: url('./img/btn.png') no-repeat;
background-size: 100% 100%;
transform: rotate(180deg);
}
.aj-menuright li span:nth-of-type(1):hover{
background: url('./img/btn_1.png') no-repeat;
background-size: 100% 100%;
transform: rotate(180deg);
}
.aj-menuright li span:nth-of-type(2){
position: absolute;
top: 20px;
right: 30px;
}
.aj-menuright li span:nth-of-type(3){
position: absolute;
top: 28px;
right: 220px;
}
.aj-menuleft li:nth-child(1) {
position: absolute;
left: 200px;
top: 100px;
}
.aj-menuleft li:nth-child(2) {
position: absolute;
left: 140px;
top: 280px;
}
.aj-menuleft li:nth-child(3) {
position: absolute;
left: 160px;
top: 480px;
}
.aj-menuleft li:nth-child(4) {
position: absolute;
left: 280px;
top: 650px;
}
.aj-menuright li:nth-child(1) {
position: absolute;
right: 200px;
top: 100px;
}
.aj-menuright li:nth-child(2) {
position: absolute;
right: 140px;
top: 280px;
}
.aj-menuright li:nth-child(3) {
position: absolute;
right: 160px;
top: 480px;
}
.aj-menuright li:nth-child(4) {
position: absolute;
right: 280px;
top: 650px;
}
所用require.js文件
define(['jquery'],function ($) {
function gisMenuList(options){
this.hasEl = $("body").find(options.contentId).length;
this.containerName = options.contentId.substr(1);
this.menuData = options.menuData;
this.clickTitleCallback = options.clickTitleCallback || null;
this.itemData = options.itemData;
if(this.menuData){
var menuStr = '';
menuStr += '<div class="aj-menuListContent"></div>'
menuStr += '<div class="aj-menuListTitle">辅助决策方案</div>'
menuStr += '<div class="YJ-home" >返回首页</div>'
menuStr +='<div class="aj-menulist aj-clearfix"><ul class="aj-menuleft">'
for(var i=0;i<this.menuData.length;i++){
if(this.menuData[i].liPosition == 1){
menuStr +='<li data-title="'+this.menuData[i].tabTitle+'"><span></span><span>'+this.menuData[i].tabTitle+'</span><span class="'+this.menuData[i].name+'"></span></li>'
}
}
menuStr +='</ul>'
menuStr +='<ul class="aj-menuright">'
for(var i=0;i<this.menuData.length;i++){
if(this.menuData[i].liPosition == 0){
menuStr +='<li data-title="'+this.menuData[i].tabTitle+'"><span></span><span>'+this.menuData[i].tabTitle+'</span><span class="'+this.menuData[i].name+'"></span></li>'
}
}
menuStr +='</ul></div>'
$('#'+this.containerName).html(menuStr);
}
var clickLiItem = $("#"+this.containerName).find(".aj-menulist li");
var clickSpanItem = $("#"+this.containerName).find(".aj-menulist li span");
var self = this;
clickLiItem.unbind("click");
clickLiItem.on("click",function (){
if(self.clickTitleCallback){
self.clickTitleCallback($(this).attr('data-title'))
clickLiItem.removeClass('aj-act');
$(this).addClass('aj-act');
setTimeout(function(){
},3000);
clickSpanItem.removeClass('aj-cur');
$(this).children().addClass('aj-cur');
}
});
$('#aj-menuList .YJ-home').click(function(){
window.close();
})
};
return gisMenuList;
});