值得分享的Bootstrap Ace模板实现菜单和Tab页效果

前端之家收集整理的这篇文章主要介绍了值得分享的Bootstrap Ace模板实现菜单和Tab页效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文分享了项目中使用Ace模板的菜单样式和基于iframe的Tab页效果

一、效果展示

折腾了好久,终于将菜单样式和Tab页的效果从项目中抽出来了。

1、初始加载出来的效果

2、展开菜单支持多级展开,后面代码介绍)

3、点击子菜单,以Tab页的形式打开对应的页面

4、支持菜单折叠

5、打开的菜单过多时自动换行显示,折叠后自适应

二、代码示例

有现成的东西用很方便的,总的来说Bootstrap Ace模板的功能还是比较强大的,并且支持各种终端设备。本文主要使用的它的菜单效果,下面就来看看Ace模板菜单效果的实现代码

1、菜单效果 由于Ace是基于Bootstrap的,所以首先需要引用jquery和bootstrap组件,先来总的看看它需要引用哪些文件吧。  

<script src="/Content/bootstrap/js/bootstrap.min.js">

<script src="/Content/ace/js/ace-extra.min.js">
<script src="/Content/ace/js/ace.min.js">

  <script src="/Content/sidebar-menu/sidebar-menu.js">

呵呵,看着还是挺多的吧。除了最后一个js文件 页面的html标签

bootstrap-tab.js这个文件里面封装了addTabs方法

猜你在找的Bootstrap相关文章