bootstrap切换tab页局部刷新_AdminLTE实现局部刷新

本文介绍了如何在使用AdminLTE前端模板时,针对二级菜单实现点击切换Tab页的局部刷新功能,避免整个页面刷新。通过修改`Tree.prototype._setUpListeners`方法并添加`mainMenuClickFunc`方法,实现了在点击包含`fa-circle-o`类的二级菜单时,使用Ajax加载新内容到`content-wrapper`中。
摘要由CSDN通过智能技术生成

前言

AdminLTE是一个基于boostrap的前端模板,里面集成了好多插件,可以说方便又臃肿,毕竟不是所有插件都用得到,。好不容易找到个喜欢的前端模板,无奈每次点击菜单都会整个页面刷新一次,网上找了半天也没找到一个喜欢的局部刷新的解决方法。只好自己去啃js了。由于修改了原生adminlte.js部分,可能不适用于所有布局,此处暂且以原生布局情况下为例,同时暂且仅对二级菜单做了局部刷新,未处理一级菜单包含链接时的状态。

20e02ab4a05f036223a87e5bf92ac68b.png

正文

效果图如下:

7c87601858ffb653d1a28ba3ba1abd79.gif

1、Tree.prototype._setUpListeners

主要需要修改菜单树的Tree.prototype._setUpListeners方法,这里可是说是用来区分一级菜单和二级菜单的方法。此处根据是否包含fa-circle-o该class区分,以便区别对待。其中,当为二级菜单时调用mainMenuClickFunc方法处理局部刷新事件,代码如下:

Tree.prototype._setUpListeners = function (param) {

var that = t

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值