简介

左侧菜单包含二级菜单:(右图所示)

  1. 用于分类的二级菜单
  2. 用于打开页面的三级菜单

菜单的配置项比较简单,每个对象代表一个左侧菜单,一个模块有一个左侧菜单包含以下字段:

  1. id:模块的编号,用于定位模块
  2. homePage:模块默认显示的主页,使用页面的id
  3. collapse:左侧菜单是否默认收缩,默认false
  4. menu:菜单的集合,是一个数组,其中每个对象代表一个二级菜单

二级菜单的配置项:

  1. text:文本
  2. collapsed:是否收缩,默认false
  3. closeable: 是否可以关闭标签,默认true,如果设置成首页,可以将此属性设为false
  4. items:三级菜单集合

三级菜单的配置项

  1. id: 页面id,用于避免重复打开页面
  2. text:标题,同时是打开tab的标题
  3. href:页面URL

图示

示例

var config = [{   //模块菜单
  id:'menu',      //模块编号
  collapsed:true, //默认左侧菜单收缩
  homePage:'code', //默认打开的主页
  menu:[{         //二级菜单
      text:'首页内容',
      items:[   //三级菜单
        {id:'code',text:'首页代码',href:'main/code.html',closeable : false}, //设置不能关闭标签
        {id:'c',text:'标签页',href:'test.html'},
        {id:'d',text:'窗口变化',href:'test.html'},
        {id:'e',text:'首页资源文件',href:'test.html'},
        {id:'g',text:'其他',href:'test.html'}
      ]
    },{
      //二级菜单
      
    },{
      //二级菜单
  }]
},{
  
  //模块菜单
}];
//初始化主页菜单
new PageUtil.MainPage({
  modulesConfig : config
});