Bootstrap + iframe + sbadmin2 highly adaptive background management system Template

There are more and more background management templates based on the bootstrap framework. Previously said there are ACE,SB admin2, metronic and so on. See the resources at the end of this article.

Among them, involving the IFRAME seems not to have mentioned, today to share a bootstrap+iframe+sbadmin2 highly adaptive background Management system template.

First SB admin2 I don't introduce this is called the backstage template of the silly force, everybody can see: [Based on Bootstrap simple beautiful backstage Management system template UI:SB Admin 2]

First look at the effect of the picture:

Preview Demo:bootstrap+iframe Background Management system Demo

Baidu Network disk download code: Link: http://pan.baidu.com/s/1nuqjHP3 Password: 4qwq

1, the reference of JS and CSS are SB admin2 from the belt. Latest Version

In head reference:

<!--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 Reference:

<!--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, the IFRAME support according to the content of adaptive. Reference: [The IFRAME automatically adapts to the height according to the content change]

Set Menu click events and adapt Height:

<!--left Menu control toggle right Content js-->
<script>
$ (document). Ready (function (e) {
$ (". Menuc"). Click (function () {
var url = $ (this). attr ("url");
$ ("#iframecon"). attr ("src", url);
})
});
</script>
<!--iframe Adaptive content height 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, the application scene:

We use HTML static pages directly in this system. Use jquery to invoke the remote WCF service to complete the business logic. The concrete Realization Way Reference:

Note: Do not use the local file debugging, hanging on the web site or localhost. Will complain:

Uncaught securityerror:failed to read the ' Contentdocument ' property from ' htmliframeelement ': Blocked a frame with Origi  n "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