AdminLTE学习笔记-修改LTE使得支持Iframe的方式

发布时间:2017-12-07 浏览次数:5961 次

我们可以看到 <ul class="sidebar-menu" data-widget="tree">这个就是左侧菜单的ul标签

里面的每一个li就是一个菜单

我们改为如下

       

 <ul class="sidebar-menu" data-widget="tree">
<li class="header">菜单</li>
<li class="active treeview">
   <a href="#">
	   <i class="fa fa-dashboard"></i> <span>系统</span>
	   <span class="pull-right-container">
		   <i class="fa fa-angle-left pull-right"></i>
	   </span>
   </a>
   <ul class="treeview-menu">
	   <li class="active"><a href="index.html"><i class="fa fa-circle-o"></i>用户管理</a></li>
	   <li><a href="index2.html"><i class="fa fa-circle-o"></i>缓存管理</a></li>
   </ul>
</li>
       

然后我们以用户管理为例,我们加入一个target=“right”

然后添加一个id为right的iframe框架

<div class="content-wrapper"> 这个就是我们的右侧主题页了

我们把里面的内容删掉 加入iframe 代码如下

       <!-- Content Wrapper. Contains page content -->

       <div class="content-wrapper">

           <iframe scrolling="auto" rameborder="0" src="/admin/channel/index" name="right" width="100%" height="100%"></iframe>

       </div>

       <!-- /.content-wrapper -->


我们把上面的菜单 加入 target

<li class="active"><a href="/home/userindex" target="right" ><i class="fa fa-circle-o"></i>用户管理</a></li>

ok 这样就可以 点击右侧菜单 改变左侧iframe的页面了

我们加入一个userindex的action

       public ActionResult UserIndex()

       {

           return View();

       }

视图如下


@{

   Layout = null;

}

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width" />
   <title>UserIndex</title>
</head>
<body>
   <div>
       用户管理列表
   </div>
</body>
</html>

OK 这样 就达到了这样的效果了