说在前面的话:
该组件主要使用ace admin实现Tab页联动sidebar。实现的目标是:
1、不改动ace admin的模板框架(Bootstrap v3.3.6);
2、tab页的加载默认使用ajax,get方式,详见(bootstrap.addtabs.js);不用iframe;
3、sidebar实现蓝色图标点击选中效果;
4、sidebar标题与tab页的联动,tab页与sidebar的联动可实现;
5、tab标签页的动态滚动(左滚、右滚,左右滚动一屏);
6、右键菜单(关闭左侧、右侧、其他,全部关闭,刷新),全屏
一、效果展示
二、代码部分
新增JS文件:bootstrap.addtabs.js,bootstrap.js(压缩后的文件名为bootstrap.min.js)
新增CSS文件:bootstrap.addtabs.css
index.html引入对应JS、CSS文件
index.html页面结构未变,更改页面元素的样式,其中sidebar部分修改微小,大致如下