自制tab page扩展（仿layui）

设计背景：
因为之前一个同事留下来的项目，借鉴的框架没有iframe版本的tab page，然后我搜索也找不到比较好的控件能够简单地将这样方便的工具添加到新的项目上，于是就想着不如自己封装一个简单的tab page吧，即方便扩展，自己写的组件又比较容易修改。

重要提示：
因为代码用在了公司项目上，虽然是我自己写的，但是因为里面写了不少公司项目内容，所以这里将只提及设计思路和注意事项，！！不会贴上完整代码或相关文件！！，希望各个大朋友小朋友们能够自己动手做一做吧~其实也不难。

设计思路：
因为完全不知道怎么实现这样的功能，之前了解只是知道是“上方页面标签 + 下方iframe页面”的实现方案，对于ui设计和整个功能流程都不是很有头绪，所以这里随便找了一个有tab page的前端框架，layui作为我的抄袭对象(￣▽￣)~*

前端样式问题我这里就不赘述了（因为我也不会，就是抄得差不多像就是了），只说一下整体结构：

1. 上方的标签栏
   1.1 左右箭头，用于切换过长的头部tabs空间
   1.2 “首页”标签
   1.3 其他页面标签
   1.4 向下箭头的“更多操作”标签
2. 下方的iframe具体页面显示区域

大致就是上面的这些结构，这里样式我建议直接抄layui就好，就是一些css，如果你对css样式比较熟悉也可以自己写一个差不多的，但是我比较不熟悉就直接抄个样子就好啦~

标题那么到这里，我们样子就做出来了，就如文章开头的那个图片一样，现在我们需要解决的事情就是js怎么写，才能够让这个页面控制切换N个子页面。

1. 关键问题，tab怎么能够切换到不同的iframe
   答：写一个openTab方法，传入“标题”，“id”，“页面路径”这三个基础参数，如果“id”存在，则选中这个tab，然后隐藏其他iframe，显示目标id的iframe；如果这个页面不存在，那么用“标题”和“id”去创建一个tab标签，然后用“id”和“页面路径”去创建一个iframe页面，用“id”将tab和iframe关联起来

2. 左右箭头怎么去切换过长的tab内容
   答：这个问题我一开始也不知道怎么实现这样神奇的操作的，然后我看了下layui，甚至没看js，只看了在左右箭头点击的时候，tabs的样式改变。然后神奇得发现，只是把tabs左移或者右移了而已。。。因为限制了显示长度（整个tabs是一个ul标签），所以左移或者右移的时候，不在显示区间的tab都会隐藏掉，就是配合css的一个小技巧而已，我当初还以为是用比较复杂的js实现的。。。

3. 如何删除子页面
   答：由第1问可以知道，tab和iframe是靠它们记录的id联系在一起的，所以当你点击tab的“×”的时候，将这个tab标签移除，然后找到对应id的iframe，移除掉即可。

4. “更多操作”标签（就是最左边向下箭头的按钮），里面的各项功能具体如何实现
   答：“刷新当前页面”，因为按F5的话，是将整个页面刷新了，所以整个tab page都会复原回你刚打开页面的样子，这是你不想见到的事情。那么我们就监听F5的事件，阻止它原本的操作（就是刷新整个父页面），然后我们获取当前子页面（被选中的tab我会加个active类，找到active类就行了），找到相应的iframe，重新访问iframe的页面路径就可以达到只刷新当前子页面的效果了；其他四个关闭页面的操作，就是区分active页面和其他页面的关系，然后将符合条件需要关闭的页面注意执行它们tab标签上的“×”操作就是了。

注意事项：

1. 这里有个稍微比较成熟的小建议。建议父页面打开的时候，默认打开一个“首页”，并且不能被你上面写的任何操作关闭，这样的话不至于你突然关页面的时候整个页面都是空的，起码有个首页做垫底。当然你硬要首页也删也是没问题的。

说得比较凌乱，但是重点难点大概都写出来了，我是用laravel框架的，所以我整个扩展写了一个view和一个js，view就是写文章开头第一张图那样的样式啦，js就是绑定所有监听器，以及初始化首页的。这样我在其他没有tab page的新项目里面，只要引用view + js 这两个文件，就能扩展出一个tab page控件啦 ~

我大概样式研究了一个上午，然后js写了一两个小时吧，就做完了，难度不高，实用性比较强，而且因为js是自己写的，所以以后要加什么骚操作也是比较容易的添加进去的，建议大家自己写一套这样的扩展(｀・ω・´)