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文件不能自动提示问题解决
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
