EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
更新时间：2010年10月26日 13:06:49 作者：
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码,需要的朋友可以参考下。
tabs代码如下：
<div id="tabs" class="easyui-tabs">
<div title="tabs1">
tabs1
</div>
<div title="tabs2">
tabs2
</div>
</div>
如果id="tabs"的div未设置宽度和高度，easyUI默认的宽度和高度是auto，这样在google浏览器下显示正常，但是在IE下默认不显示任何内容，并且和dialog还有冲突（dialog无法弹出窗口）。
无奈去google搜索，找到一个解决方法如下：
1. 去掉div里的class="easyui-tabs"
2. 加上一段JS
<script type="text/javascript">
$(function(){
$("#tabs").tabs({
width:$("#tabs").parent().width(),
height:$("#tabs").parent().height()
});
});
</script>
加上这段代码后，发现容器会很高，因为他获得是父容器的height
解决方法：
JS修改为
$('#tabs').tabs({
width: $("#tabs").parent().width(),
height: "auto"
});
Ok，搞定
复制代码 代码如下:
<div id="tabs" class="easyui-tabs">
<div title="tabs1">
tabs1
</div>
<div title="tabs2">
tabs2
</div>
</div>
如果id="tabs"的div未设置宽度和高度，easyUI默认的宽度和高度是auto，这样在google浏览器下显示正常，但是在IE下默认不显示任何内容，并且和dialog还有冲突（dialog无法弹出窗口）。
无奈去google搜索，找到一个解决方法如下：
1. 去掉div里的class="easyui-tabs"
2. 加上一段JS
复制代码 代码如下:
<script type="text/javascript">
$(function(){
$("#tabs").tabs({
width:$("#tabs").parent().width(),
height:$("#tabs").parent().height()
});
});
</script>
加上这段代码后，发现容器会很高，因为他获得是父容器的height
解决方法：
JS修改为
复制代码 代码如下:
$('#tabs').tabs({
width: $("#tabs").parent().width(),
height: "auto"
});
Ok，搞定
相关文章
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
基于jquery实现的一个选择中国大学的弹框，需要的朋友可以参考下2012-07-07
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
在使用jquery.ui.dialog的过程中，发现position参数有些问题，无法通过position: [PosX, PosY]动态传递位置参数。下面是官方demo 代码2009-11-11
在网上看到许多的jquery插件实现滚动新闻，特别是新闻显示在div里面的，比较了一番发现这款jquery.vticker-min.js还是挺不错的，于是就将它集成到我的毕业设计里面。2010-06-06
jquery中关于inArray()函数的详细使用说明2011-10-10
本文给大家分享的是一则使用jQuery实现图片切换的插件，效果非常不错，兼容性也很好，推荐给大家，有需要的小伙伴快来参考下吧。2015-03-03
jQuery 验证插件 Web前端设计模式(asp.net)
asp.net下用户注册页面的验证代码，花了点时间将验证做成一个jQuery插件，希望对需要的朋友有所帮助。2010-10-10
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
Slider Revolution插件是一款非常强大的插件了，我们可以利用它来制作出各种效果并且还支持移动设备，支持手机触摸，键盘翻页；它内置幻灯、视频播放计时器等等效果，具体我们来看看。2015-06-06
JQuery SELECT单选模拟jQuery.select.js
本文件是跟据 zhangjingwei 的Jquery Select(单选) 模拟插件 V1.3.4 修改而来的，需要的朋友可以参考下。2009-11-11
jQuery的数组处理、便捷、功能齐全。一步到位的封装了很多原生JavaScript数组不能企及的功能。下面是jquery数组的使用详解,需要的朋友可以参考下2014-03-03
jquery validate 实现动态增加/删除验证规则操作示例
这篇文章主要介绍了jquery validate 实现动态增加/删除验证规则操作,结合实例形式分析了jQuery validate表单验证相关操作技巧,需要的朋友可以参考下2019-10-10
最新评论