现在位置首页 / 项目实战 /正文

Bootstrap+iframe+sbadmin2高度自适应后台管理系统模板

作者: IT小兵 | 2015年12月16日| 热度:℃ | 评论: |参与:

基于bootstrap框架的后台管理模板是越来越多了。以前说的有ace,sb admin2、Metronic等等。详见本文最后的参考资料。

其中,涉及到iframe的好像没有讲到,今天分享一下Bootstrap+iframe+sbadmin2高度自适应后台管理系统模板。

首先sb admin2 我就不介绍这个叫做傻逼的后台模板了,大家可以详见:[基于Bootstrap 的简约美观的后台管理系统模板UI:SB Admin 2]

先看效果图:


预览demo:Bootstrap+iframe后台管理系统演示

百度网盘下载代码:链接: http://pan.baidu.com/s/1nuqjHP3 密码: 4qwq 

http://www.suchso.com/code/sbadminiframe/

1、引用的js和css都是sb admin2自带的。最新版本

在head引用:

<!-- Bootstrap Core CSS -->
<link href="./sbadmin/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="./sbadmin/bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="./sbadmin/dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="./sbadmin/bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/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/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

js引用:

<!-- jQuery --> 
<script src="./sbadmin/bower_components/jquery/dist/jquery.min.js"></script> 
<!-- Bootstrap Core JavaScript --> 
<script src="./sbadmin/bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 
<!-- Metis Menu Plugin JavaScript --> 
<script src="./sbadmin/bower_components/metisMenu/dist/metisMenu.min.js"></script> 
<!-- Custom Theme JavaScript --> 
<script src="./sbadmin/dist/js/sb-admin-2.js"></script>

2、iframe支持根据内容自适应。参考:[iframe根据内容变化自动适应高度的方法]

设定菜单点击事件并自适应高度:

<!--左边菜单控制切换右侧内容js-->
<script>
$(document).ready(function(e) {
    $(".menuc").click(function(){
		var url = $(this).attr("url");
		$("#iframecon").attr("src",url); 
		})
});
</script>
<!--iframe自适应内容高度js-->
<script type="text/javascript" language="javascript">
    function iFrameHeight() {
        var ifm= document.getElementById("iframecon");
        var subWeb = document.frames ? document.frames["iframepage"].document :
ifm.contentDocument;
            if(ifm != null && subWeb != null) {
            ifm.height = subWeb.body.scrollHeight;
            }
    }
</script>

3、应用场景:

我们在本系统中直接使用html静态页面。用jquery调用远程wcf服务完成业务逻辑。具体实现方式参考:

http://www.suchso.com/projecteactual/jquery-ajax-parsererror-was-not-called.html


注意事项:不要在本地用file调试,挂到网站或者localhost上。会报错:

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "null" from accessing a frame with origin "null".  The frame requesting access has a protocol of "file", the frame being accessed has a protocol of "data". Protocols must match.
iFrameHeight @ index.html:217onload @ index.html:183

参考:

[Bootstrap Metronic 学习系列:简介]

[推荐10个bootstrap及其他框架的后台管理模板]

[Bootstrap 3管理模板Bracket Responsive]

[Metronic-简洁优雅的 Metro UI 风格的Bootstrap 响应式后台管理模板]

[Bootstrap 轻量级后台管理系统模板--ACE使用介绍]


点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询