bodyTab模块是layuiCMS 2.0的核心，通过简单的配置就能实现左侧导航的输出、点击菜单添加新窗口的功能。同时优化了窗口过多的展示效果和相关操作。打开的窗口超出可视区域的时候不再以下拉的形式展示，而是通过左右拖动来查看被隐藏的窗口。打开的窗口未超出可视区域的情况下则正常显示，没有拖动效果。添加了“刷新当前”，“关闭其他”，“关闭全部”操作，但需要给相应的元素添加"refresh"、"closePageOther"、"closePageAll"类【如class="closePageAll"】。
模块加载名称：bodyTab
核心方法

语法：layui.bodyTab(options)

		layui.use('bodyTab', function(){
		  layui.bodyTab(options);
		});

options是一个对象参数，为了操作简单，所以只设置了一些常用的功能。可支持的key如下表

参数 状态 类型 默认值 作用
openTabNum 非必填 string undefined 设置可打开窗口的最大数量，默认可以无限打开。如果想设置最多可以打开10个窗口则：openTabNum:"10"
tabFilter 非必填 string bodyTab 添加窗口的filter。这里的“非必填”指的是没有更改index.html中源码的情况下，如果修改过，则为必填项。具体用法为：在<ul class="tab"></ul>中添加新窗口，应该设置为<ul class="tab" lay-filter="bodyTab"></ul>，此处填写的为lay-filter的值。
url 必填 object undefined 获取菜单的接口路径。请严格按照需要的Json格式返回菜单信息。Json详细格式见下表
参数 类型 作用
title string 菜单名称
menu1 string 与顶部菜单的data-menu属性值相同，具体请参考：三级菜单menu字段与顶部菜单data-menu属性的关系
icon string 菜单前面的图标（可不填）。如果调用的图标是框架中的，填写的内容为Unicode（如 &#xe603;）。如果调用的图标为外部引入的，填写的内容为Font CLass（如 icon-chakan）【如果是“图标管理”中的图标可以直接使用，如果是自己通过阿里图标库选择的，有两种方法：1、请将“Font Family”修改为“seraph”，如何修改：“iconfont.cn”-“图标管理”-“我的项目”-“更多操作”-“编辑项目”-“Font Family”的值修改为“seraph”；2、将bodyTab.js文件中第30-80行中的seraph修改为你自己设置的class名称，阿里默认为“iconfont”。不会第一种方式的可直接使用第二种方法】
href string 对应的页面链接。（有子菜单的情况下建议不填）
spread boolean 子菜单是否展开。（默认不展开）
children object 子菜单数据。（格式同上）
target string 控制对应页面链接的打开方式。不设置的情况下以窗口形式打开，设置后页面整体跳转，如“登录页面”。可选参数：_blank。

这是一个菜单JSON较为完整的例子

	{
	  "menu1": [{
	      "title": "菜单格式",
	      "icon": "",
	      "href": "topPage.html",
	      "spread": false,
	      "children": [{
	          "title": "二级菜单",
	          "icon": "",
	          "href": "page.html",
	          "spread": false,
	          "target": "_blank"
	       }]
	   }]
	}
内置方法

bodyTab模块是这套模版的核心。主要作用是点击菜单生成窗口及一些对窗口进行的操作。下面我将对这些方法做一些简单的介绍。使用方法：layui.bodyTab.method(option)，其中method为方法名，option为参数，如 layui.bodyTab.navBar(dataStr)。其中“无需主动执行”的方法简单了解一下就好，“需主动执行”的方法可以仔细的研究一下用法。

tabAdd() 方法

此方法需主动执行，这是bodyTab模块中的核心，此方法只有一个参数，即被点击的元素。此元素需要包含下面的属性和标签：

参数 类型 作用
data-url 属性 链接的窗口路径，类似 a 标签的 href 属性。如：<a data-url="index.html"></a>
i 标签 添加窗口时标题前面的图标。如：<i class="seraph icon-icon10" data-icon="icon-icon10"></i>或者<i class="layui-icon" data-icon="&#xe68e;"></i>
cite 标签 所添加窗口的标题。如：<cite>后台首页</cite>

下面是一个完整的被点击元素：

		<a href="javascript:;" data-url="index.html">
		  <i class="seraph icon-icon10" data-icon="icon-icon10"></i>  //这是外部引入的图标
		  <i class="layui-icon" data-icon="&#xe68e;"></i>  //这是框架中的图标【与外部引入的图标进行二选一】
		  <cite>后台首页</cite>
		</a>

它的主要作用是添加窗口。点击菜单时如果窗口已经打开，则进行窗口的切换，否则添加窗口。执行方法为：

		layui.bodyTab.tabAdd(_this);      //主窗口（如index.html）中
		top.layui.bodyTab.tabAdd(_this);  //iframe（如main.html）中

tabMove() 方法

此方法为仅次于tabAdd()的一个方法。其主要作用是通过判断已打开的窗口宽度是否小于可视宽度（包括改变浏览器的大小）。如果已打开的窗口宽度是否小于可视宽度，则不做任何操作；否则为窗口盒子（此处为 #top_tabs_box）添加鼠标滑动事件，用以通过鼠标滑动去选择其他的窗口。模版中对一些会操作窗口盒子的位置都执行了此方法。如果想要在其他的地方执行：

		layui.bodyTab.tabMove();

navBar() 方法

此方法无需主动执行，它的主要作用是将后台返回的菜单json文件生成菜单然后通过render方法渲染到页面上，一般情况下外部不会调用。只有一个参数，这个参数是一个符合菜单格式的json文件。

render() 方法

此方法需主动执行，它与navBar配合使用，用于将navBar方法生成的字符串渲染到页面上。在需要渲染菜单的页面都需要主动执行此方法，否则将不显示菜单。

changeRegresh() 方法

此方法无需主动执行，它的主要作用是通过判断“是否设置过切换窗口刷新页面”去进行页面的刷新。如果在“功能设置”中开启此功能，则切换窗口的时候会进行页面的刷新，否则将不会刷新页面。

set() 方法

此方法无需主动执行，它的主要作用是设置bodyTab的参数。可以在引入模块的时候直接配置。无需直接执行此方法进行配置。方法如下：

		layui.use('bodyTab', function(){
		  layui.bodyTab({
		    openTabNum : "50",  //最大可打开窗口数量
		    url : "json/navs.json" //获取菜单json地址
		  });
		});

getLayId() 方法

此方法无需主动执行，它的主要作用是通过title获取lay-id，主要用在窗口切换和删除时的定位到所操作的窗口。返回值为当前元素的 lay-id

hasTab() 方法

此方法无需主动执行，它的主要作用是通过title判断点击的菜单时候打开过，如果打开过则切换到对应的窗口，否则添加一个新的窗口。返回值为 1或者-1，如果点击的菜单存在相应的窗口则返回1，否则返回-1

jq方法

通过on()方法写的一些简单的切换窗口、删除窗口、刷新当前页面、关闭其他页面、关闭前部页面等方法，在此不做赘述，有兴趣的可以查看一下源码。

也许通过上面的描述，你已经大致了解如何使用 bodyTab 了，但愿TA能成为你永久的开发伙伴，转化为你屏幕上的万千字节！