EasyUi 動態tabs 在實際項目中遇到問題與解決方法
需求：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>
相關文章
- 1. Redis在實際項目中遇到的問題及解決方案
- 2. Android問題收集——實際項目中遇到的問題及解決方案
- 3. servlet與tomcat 項目中遇到的問題和解決方法
- 4. 簡介 IndexedDB 與 詳解 IndexedDB 在實際項目中可能遇到的問題與解決方案
- 5. 實際項目開發中遇到的問題及解決辦法
- 6. Vue 項目中遇到的跨域問題及解決方法
- 7. 項目中遇到的問題，解決的方法
- 8. Redis實際運用中遇到的問題及解決方案
- 9. video在安卓與ios實際應用中遇到的問題及解決
- 10. 前端項目中遇到的問題及解決方式
- 更多相關文章...
- • Thymeleaf項目實踐 - Thymeleaf 教程
- • Redis悲觀鎖解決高併發搶紅包的問題 - 紅包項目實戰
- • SpringBoot中properties文件不能自動提示解決方法
- • IntelliJ IDEA中SpringBoot properties文件不能自動提示問題解決
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
