需求:javascript
一、點擊菜單列表新增tabcss
二、點擊切換按鈕,隱藏左側列表,tab寬度100%,再次點擊還原html
三、tab標籤頁的內容會用到bootstrap table插件與echart插件html5
遇到的問題java
一、新增的iframe 高度用百分比在谷歌瀏覽器中無效 jquery
解決方法:設置Iframe的高度爲內容的高度,若是使用了bootstrap table插件,因爲bootstrap table的高度也是JS設置的,在Iframe加載bootstrap table 的時候,bootstrap table高度尚未執行完畢,致使Iframe高度很小,能夠採用先設置Iframe的高度,並用localstorage存儲,bootstrap table插件獲取localstorage存儲的高度並設置。數據庫
二、點擊切換按鈕tabs的resize方法無效bootstrap
解決方法:使用setTimeout(fn,time)canvas
三、鼠標移到iframe上會有滾動條 瀏覽器
解決方法:鼠標浮上去的時候會顯示tooltip ,不把tooltip追加到dom中
完整的例子以下
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>添加信息</title> <!-- 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.5 --> <link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="../../plugins/easyUI/themes/material/easyui.css"> <link rel="stylesheet" type="text/css" href="../../plugins/easyUI/themes/icon.css"> <!-- Font Awesome --> <link rel="stylesheet" href="../../fontawesome-4.2.0/css/font-awesome.min.css"> <!-- Theme style --> <link rel="stylesheet" href="../../dist/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" href="../../dist/css/skins/_all-skins.css"> <link rel="stylesheet" href="../../dist/css/admin2.css"> <link rel="stylesheet" href="../../dist/css/head2.css"> <link rel="stylesheet" href="../../plugins/bootstrap-table-develop/src/bootstrap-table.css"> <style type="text/css"> /*div.tooltip.tooltip-bottom{display:none;height:0;overflow:hidden;}*/ </style> <!-- 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="fixed"> <div class="wrapper"> <header class="main-header"> <nav class="navbar navbar-static-top"> <div class="navbar-header"> <a href="" class="navbar-brand"><img class="topLogo" src="../../dist/img/weeglogo.png" class="" alt="維格電子"></a> </div> <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <div class="navbar-custom-menu"> <ul class="list-unstyled"> <li><a class="margin_r20" onclick="javascript:history.back(-1);"><i class="fa fa-reply"></i> 返回</a> </li> <li><a class="margin_r20"><i class="glyphicon glyphicon-home" ></i> 首頁</a></li> <li> <a class="margin_r20"><i class="fa fa-gears"></i> 註冊</a> </li> <li><a class="margin_r20"><i class="fa fa-database"></i> SQL</a> </li> <li class="dropdown"> <a class="margin_r20" data-toggle="dropdown"><i class="fa fa-retweet"></i> 接口<span class="caret"></span></a> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Java</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">數據挖掘</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">數據通訊/網絡</a> </li> </ul> </li> <li><a class="margin_r20 exit"><i class="fa fa-power-off"></i> 退出</a> </li> </ul> </div> </nav> </header> <!-- Left side column. contains the logo and sidebar --> <aside class="main-sidebar"> <section class="sidebar"> <ul class="sidebar-menu"> <li class="treeview active"> <a href="#"> <i><img src="../../dist/img/admin-shezhi.png" width="20" height="20" ></i> <span>系統設置</span> <i class="fa fa-angle-left pull-right"></i> </a> <ul class="treeview-menu"> <li class="active"><a href="#" onclick="addTab('驅動註冊','content1.html',1)">驅動註冊</a></li> <li><a href="#" onclick="addTab('遠程數據庫','content2.html',2)">遠程數據庫</a></li> <li><a href="#" onclick="addTab('報警設置','content3.html',2)">報警設置</a></li> <li> <a href="#">服務接口 <i class="fa fa-angle-left pull-right"></i></a> <ul class="treeview-menu"> <li class=""><a href="#"><i class="fa fa-angle-double-right"></i>Modbus Tcp</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i>Weather Server</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i>Control Server</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i>Share Pipe Xml</a></li> </ul> </li> </ul> </li> <li class="treeview"> <a href="#"> <i><img src="../../dist/img/admin-shebeiqudong.png" width="20" height="20" ></i> <span>設備驅動</span> <i class="fa fa-angle-left pull-right"></i> </a> <ul class="treeview-menu"> <li> <a href="#">FCC-III Modbus <i class="fa fa-angle-left pull-right"></i></a> <ul class="treeview-menu"> <li><a href="#"><i class="fa fa-angle-double-right"></i>變量</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i>自定義變量</a></li> </ul> </li> <li> <a href="#">維格DTUGC <i class="fa fa-angle-left pull-right"></i></a> <ul class="treeview-menu"> <li><a href="#"><i class="fa fa-angle-double-right"></i>變量</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i>自定義變量</a></li> </ul> </li> </ul> </li> </ul> </section> <!-- /.sidebar --> </aside> <!-- Content Wrapper. Contains page content --> <div class="content-wrapper"> <!-- Content Header (Page header) --> <section class="content-header clearfix"> <ol class="breadcrumb"> <li><a href="#"><i class="fa fa-desktop"></i> 用戶列表 </a></li> <li class="active">用戶展現</li> </ol> </section> <!-- Main content --> <section class="content"> <div id="tt" class="easyui-tabs" style="overflow:hidden;"> <div title="Home"> <!-- <div class="homeContent" style="padding:15px;">this is the home page!!1</div> --> <iframe id="firstIframe" scrolling="no" frameborder="0" src="content1.html" style="width:100%;height:99%;"></iframe> </div> </div> </section> </div> <!-- /.content-wrapper --> <footer class="main-footer"> <div class="pull-right hidden-xs"> </div> <img src="../../dist/img/weeglogo.png"> WeegView客戶管理系統,版權全部:常州維格電子有限公司 </footer> </div> <!-- ./wrapper --> <!-- jQuery 2.1.4 --> <script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script> <!-- Bootstrap 3.3.5 --> <script src="../../bootstrap/js/bootstrap.min.js"></script> <script src="../../plugins/easyUI/jquery.easyui.min.js"></script> <!-- FastClick --> <script src="../../plugins/fastclick/fastclick.min.js"></script> <!-- AdminLTE App --> <script src="../../dist/js/app.min.js"></script> <script src="../../plugins/bootstrap-table-develop/src/bootstrap-table.js"></script> <script src="../../plugins/bootstrap-table-develop/src/locale/bootstrap-table-zh-CN.js"></script> <script> $(function() { $(".sidebar-toggle").on("click", function() { $('#tableTest3').bootstrapTable('resetView'); //點擊按鈕時採用標籤頁的resize方法,調整標籤頁(tabs)容器的尺寸並作佈局。可是效果不如直接設置dom的寬度100%頁面切換流暢, // setTimeout(function(){$('#tt').tabs('resize', { // width: '100%' // })},400) $(".easyui-tabs").css("width", "100%"); $(".tabs-header").css("width", "100%"); $(".tabs-panels").css("width", "100%"); $(".tabs-panels .panel").css("width", "100%"); $(".panel.panel-htop").css("width", "100%"); $(".panel-body").css("width", "100%"); $(".tabs-wrap").css("width", "100%") }) }); </script> <script> var tabHeight= $(window).height()-150; var btTableHeight=$(window).height()-190; localStorage.setItem("btheight",btTableHeight); function setHeight(iframe) { iframe.height = iframe.contentWindow.document.documentElement.scrollHeight;//當bootstrap table 設置高度時 此函數能夠正常使用 } function addTab(title, url, label) { if ($('#tt').tabs('exists', title)) { $('#tt').tabs('select', title); } else { // var content = '<iframe class="frame_content" scrolling="no" frameborder="no" src="' + url + '" onload="setHeight(this,' + label + ')" style="width:100%;"></iframe>'; var content = '<iframe class="frame_content" scrolling="no" frameborder="no" src="' + url + '" onload="setHeight(this)" style="width:100%;"></iframe>'; $('#tt').tabs('add', { title: title, content: content, closable: true, }); } } $("#tt").tabs({ width: "100%", height: tabHeight }) </script> <script> $(".treeview-menu li").click(function() { $(this).addClass("active"); $(this).siblings().removeClass("active") }) </script> </body> </html>
content1.html
主要js
<script> $(function () { var height = localStorage.getItem("btheight")-20 $('#tableTest3').bootstrapTable('resetView',{ height:height }); $(window).resize(function () { $('#tableTest3').bootstrapTable('resetView'); }); $(".sidebar-toggle").on("click",function(){ $('#tableTest3').bootstrapTable('resetView'); }) }); </script>