使用AdminLTE 在content区，打开相应网页
参考：https://bbs.csdn.net/topics/391846671
问：
比如打开starter.html，然后点击其左边栏的链接(如user.html
)的时候，怎么实现在右边的content区打开user.html的网页。看他的实现范例，好像u
ser.html也带有如starter.html完整的边栏、上面导航条的信息？
答：
首先，在主页面的<div class="content-wrapper">区的<section class="content">中，增加一个iframe，如<iframe id="menuFrame" name="menuFrame" src="main.htm" style="overflow:visible;" scrolling="yes" frameborder="no" height="100%" width="100%"></iframe>，注意：其中的main.html是默认显示的一个页面。name为menuFrame。
然后在侧边栏的链接处，设置<a>标签的target属性为menuFrame，如下所示：
<li class="active"><a href="pages/test.html" target="menuFrame" ><i class="fa fa-link"></i> <span>用户管理</span></a></li>
例子
首页：
完整代码：
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>管理后台</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" th:href="@{/assets/plugins/bootstrap/css/bootstrap.min.css}">
<!--<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">-->
<!-- Font Awesome -->
<link rel="stylesheet" th:href="@{/assets/plugins/font-awesome/css/font-awesome.min.css}">
<!-- Ionicons -->
<!-- Theme style -->
<link rel="stylesheet" th:href="@{/assets/css/AdminLTE.min.css}">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" th:href="@{/assets/css/_all-skins.min.css}">
<!-- iCheck -->
<link rel="stylesheet" th:href="@{/assets/plugins/iCheck/square/blue.css}">
<link rel="stylesheet" th:href="@{/assets/css/home.css}">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]--> </head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<header class="main-header">
<!-- Logo -->
<a href="#" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>A</b>LT</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>WindCoder</b>.com</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<li class="dropdown messages-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope-o"></i>
<span class="label label-success">4</span>
</a>
<ul class="dropdown-menu">
<li class="header">您有4条信息</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li><!-- start message -->
<a href="#">
<div class="pull-left">
<img th:src="@{/assets/img/user2-160x160.jpg}" class="img-circle" alt="User Image">
</div>
<h4>
小西西
<small><i class="fa fa-clock-o"></i> 5 mins</small>
</h4>
<p>你是谁?</p>
</a>
</li>
<!-- end message -->
</ul>
</li>
<li class="footer"><a href="#">查看所有信息</a></li>
</ul>
</li>
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img th:src="@{/assets/img/user2-160x160.jpg}" class="user-image" alt="User Image">
<span class="hidden-xs">WindCoder</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img th:src="@{/assets/img/user2-160x160.jpg}" class="img-circle" alt="User Image">
<p>
WindCoder - 超级管理员
<small>Member since Nov. 2012</small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<div class="row">
<div class="col-xs-6 text-center">
<a href="#">粉丝</a>
</div> <div class="col-xs-6 text-center">
<a href="#">关注</a>
</div>
</div>
<!-- /.row -->
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">个人信息</a>
</div>
<div class="pull-right">
<a href="/logout" class="btn btn-default btn-flat">退出</a>
</div>
</li>
</ul> </li>
<!-- Control Sidebar Toggle Button -->
</ul>
</div>
</nav>
</header>
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel --> <!-- /.search form -->
<!-- sidebar menu: : style can be fo\
<section class="content-header">
<h1>
Dashboard
<small>Version 2.0.0</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Home Page</a></li>
<li class="active">Dashboard</li>
</ol>
</section> <!-- Main content -->
<section class="content">
<!-- Small boxes (Stat box) -->
<div class="row">
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-aqua">
<div class="inner">
<h3>150</h3> <p>新订单</p>
</div>
<div class="icon">
<i class="ion ion-bag"></i>
</div>
<a href="#" class="small-box-footer">更多 <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-green">
<div class="inner">
<h3>53<sup style="font-size: 20px">%</sup></h3> <p>跳出率</p>
</div>
<div class="icon">
<i class="ion ion-stats-bars"></i>
</div>
<a href="#" class="small-box-footer">更多 <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-yellow">
<div class="inner">
<h3>44</h3> <p>User Registrations</p>
</div>
<div class="icon">
<i class="ion ion-person-add"></i>
</div>
<a href="#" class="small-box-footer">更多 <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-red">
<div class="inner">
<h3>65</h3> <p>访客</p>
</div>
<div class="icon">
<i class="ion ion-pie-graph"></i>
</div>
<a href="#" class="small-box-footer">更多 <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
</div>
<!-- /.row --> <iframe scrolling="yes" frameborder="0"
style="width: 100%; min-height: 450px; overflow: visible; background: #fff;"
id="menuFrame" name="menuFrame" src="/main"></iframe>
<!--<iframe id="menuFrame" name="menuFrame" src="main.html" style="overflow:visible;"-->
<!--scrolling="yes" frameborder="no" height="100%" width="100%"></iframe>-->
</section>
</div> </div>
<!-- ./wrapper -->
<script>
var basePath = "";
</script>
<!-- jQuery 3 -->
<script th:src="@{/assets/js/jquery.min.js}"></script>
<!-- Bootstrap 3.3.7 -->
<script th:src="@{/assets/plugins/bootstrap/js/bootstrap.min.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/assets/js/adminlte.js}"></script>
</body>
</html>
点击用户管理
<li class="active"><a href="/test" target="menuFrame" ><i class="fa fa-link"></i> <span>用户管理</span></a></li> 点击之后的效果如下
首页WindCoder.com参考：https://github.com/HalfWater/WebDemos
仪表盘及控制面板参考：http://adminlte.la998.com/
使用AdminLTE 在content区，打开相应网页的更多相关文章
- 使用C语言在windows下一口气打开一批网页
作者:郝峰波 mail : fengbohello@qq.com 本博客地址:http://www.cnblogs.com/fengbohello/p/4374450.html 1.核心函数说明 核心 ...
- 从tcp的角度看，打开一个网页到底发生了什么
使用wireshark进行抓包分析:新建表达式过滤器,选择协议,字段,匹配方式,应用就能筛选出想要的数据包. 一个示例:(tcp.srcport == 1523 or tcp.dstport == 1 ...
- PHP 连接打开新网页带参数
PHP 连接打开新网页带参数 detail.php?ID=<?PHP echo $row['ID'];?> aa.php?ID=123 取ID参数 $aid=$_GET['ID']; 网页 ...
- jQuery 实现网页跳转或用命令打开指定网页！
Jquery实现网页跳转或用命令打开指定网页! location.href = "www.baidu.com"; location.href = "aa.aspx&quo ...
- Python-webbrowser实现自动打开关、定时打开关闭网页/刷新网页
webbrowser- 方便的Web浏览器控制器,是Python一个模块,可实现自动打开关.定时打开关闭网页/刷新网页,在Unix下,图形浏览器在X11下更受欢迎,但如果图形浏览器不可用或X11显示器 ...
- 火狐插件simple timer 定时打开指定网页
今天我要介绍的是火狐浏览器一款插件:Simple Timer,该插件是火狐一个可以添加计时器和定时提醒功能插件,该插件的主要作用就是当你的设置在某一个时刻提醒时,插件会自动弹出通知,并且自动打开你想要 ...
- 树莓派开机自动启动Chomium浏览器并打开指定网页
树莓派开机自动启动Chomium浏览器并打开指定网页 cd /home/pi/.config mkdir autostart cd autostart vi my.desktop [Desktop E ...
- 2015.2.16 关于delphi web控件打开新网页时弹出关闭页面（js代码）出错的解决办法研究
参考网址1:http://www.csharpwin.com/csharpspace/2360.shtml...参考网址2:http://www.oschina.net/question/234345 ...
- 点击TextView浏览器打开指定网页
直接上代码: /** * 点击跳转到版权页面 */ private void getCopyRight() { // TODO Auto-generated method stub TextView ...
随机推荐
- win7 "com surrogate“ 已停止工作的解决办法
1.在文件夹选项里选“始终显示图标,从不显示缩略图”. 2.数据执行保护(DEB),依次打开:计算机——属性——高级系统设置——高级——性能——设置——数据执行保护 选下面的单选按钮“为除下列选定程序 ...
- Using keytool to import keystore
open command line and locate to the location of keytool.exe. import cert to keystore command: keyto ...
- Python使用win32com实现的模拟浏览器功能
# -*- coding:UTF- -*- #!/user/bin/env python ''' Created on -- @author: chenzehe ''' import win32com ...
- 设计模式（三）Singleton Pattern单例设计模式
1.饿汉式 public class SingletonDemo { private static SingletonDemo s=new SingletonDemo(); private Singl ...
- 【转】构造自己的DIB类
ZC: 搜索"DIB_HEADER_MARKER"时,看到的这个文章 http://blog.csdn.net/yyyuhan/article/details/2026652 ...
- vue模板编译
Vue 的模板编译是在 $mount 的过程中进行的,在 $mount 的时候执行了 compile 方法来将 template 里的内容转换成真正的 HTML 代码. complie 最终生成 re ...
- 《剑指offer》第五十五题（二叉树的深度）
// 面试题55(一):二叉树的深度 // 题目:输入一棵二叉树的根结点,求该树的深度.从根结点到叶结点依次经过的 // 结点(含根.叶结点)形成树的一条路径,最长路径的长度为树的深度. //如果左右 ...
- Golang socket
1.本例子实现了一个简单的TCP echo.客户端发送Hello,服务端回应World. 参考:<Socket编程> 2.服务端代码 package main import ( " ...
- Codeforces 1016 E - Rest In The Shades
E - Rest In The Shades 思路: 相似 红色的长度等于(y - s) / y 倍的 A' 和 B' 之间的 fence的长度 A' 是 p 和 A 连线和 x 轴交点, B'同理 ...
- python Django 项目创建
注:后续如不特色说明,使用python版本均为python3 创建项目 django-admin startproject projectName 启动服务 python manage.py runs ...