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，搞定

赞 (0)

相关推荐

  • 如何解决jQuery EasyUI 已打开Tab重新加载问题

    先给大家说下我的需求,如下: 点击左侧已经打开的tab可以刷新重新加载datagrid. 也就是说解决easyui 左侧tab重新刷新加载问题实现. 实现如下: function addTab(subtitle, url) { if (!$('#tabs').tabs('exists', subtitle)) { $('#tabs').tabs('add', { title : subtitle, content :<span style="font-family: Arial, Helv

  • jQuery EasyUI 中文API Layout(Tabs)

    jQuery EasyUI 中文API Layout(Tabs)

    Tabs[标签] 创建一个tab标签 使用说明 使用到的头文件:easyui.css.icon.css.jquery-1.4.2.min.js.jquery.easyui.min.js html 复制代码 代码如下: <div id="tt" style="width:500px;height:250px;"> <div title="Tab1" style="padding:20px;display:none;&qu

  • jquery easyui 结合jsp简单展现table数据示例

    jquery easyui 结合jsp简单展现table数据示例

    复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&qu

  • jQuery EasyUI Tab 选项卡问题小结

    jQuery EasyUI Tab 选项卡问题小结

    需要解决的问题: 比如说 我先把行政区域的页面打开之后,我又把产品类型管理的页面打开,之后我再产品类型管理里添加了一条数据,当我点击横着的行政区域选项卡时,我需要使用到产品类型管理岗添加的数据,但是在行政区域里不存在那条数据.我就想让这条数据显示出来,所以我就想当我点击横着的选项卡的时候,我就想让刷新一下页面.这时那条数据就会显示出来. 主要是我完全不知道我点击横着的选项卡触发的事件.代码如下: html 选项卡 <div data-options="region:'center',col

  • jQuery EasyUI API 中文文档 - Tabs标签页/选项卡

    jQuery EasyUI API 中文文档 - Tabs标签页/选项卡

    Tabs 标签页/选项卡 用$.fn.tabs.defaults重写defaults. 依赖 panel linkbutton 用法示例 创建tabs 1. 经由标记创建Tabs 从标记创建Tabs更容易,我们不需要写任何JavaScript代码.记住把 'easyui-tabs' 类添加到<div/>标记,每个tab panel 经由子<div/>标记被创建,其用法与Panel一样. 复制代码 代码如下: <div id="tt" class="

  • easyui的tabs update正确用法分享

    一直以为 tabs update 是 easyui 的 bug,最近在用的时候发现可以这样解决 复制代码 代码如下: function updateTab(url){ var tab = $('#tt').tabs('getSelected'); $("#tt").tabs('update',{        tab: tab,        options:{ href: url        }    });    tab.panel('refresh'); }

  • 基于Jquery easyui 选中特定的tab

    获取选中的 Tab // 获取选中的 tab panel 和它的 tab 对象 var pp = $('#tt').tabs('getSelected'); var tab = pp.panel('options').tab; // 相应的 tab 对象 更新特定的选项卡面板 可使用update方法,param参数包含2个属性: tab: 将被更新的选项卡. options: 选项卡相关配置项. Example: //当前tab var current_tab = $('#frame_tabs'

  • jQuery EasyUI 布局之动态添加tabs标签页

    jQuery EasyUI 布局之动态添加tabs标签页

    在没看下文之前先给大家简单介绍easyui相关知识. easyui是一种基于jQuery的用户界面插件集合.ddd easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能. 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面. easyui是个完美支持HTML5网页的完整框架. easyui节省您网页开发的时间和规模. easyui很简单但功能强大的. 通过使用 jQuery EasyUI 可以很容易地添加 Tabs.您只需要调用

  • 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默认的宽度和高度是

  • JS动态修改iframe高度和宽度的方法

    本文实例讲述了JS动态修改iframe高度和宽度的方法.分享给大家供大家参考.具体如下: 如果希望通过按钮动态修改iframe的高度和宽度,可以参考下面的JS代码 <!DOCTYPE html> <html> <head> <script> function changeSize() { document.getElementById("myframe").height="300"; document.getEleme

  • ios实现自动获取label高度、宽度及最后一个位置详解

    前言 本文主要给大家介绍了关于ios自动获取label高度.宽度及最后一个位置的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.获取宽度,获取字符串不折行单行显示时所需要的长度 CGSize titleSize = [aString sizeWithFont:font constrainedToSize:CGSizeMake(MAXFLOAT, 30)]; 注:如果想得到宽度的话,size的width应该设为MAXFLOAT. 二.获取高度,获取字符串在指定的si

  • js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 复制代码 代码如下: document.body.offsetWidth document.body.offsetHeight 在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小: 代码如下复制代码 复制代码 代码如下: document.documentElement.clientWidth document.documentElement.cli

  • jQuery获取页面及个元素高度、宽度的总结——超实用

    下面把jQuery获取页面及个元素高度.宽度的方法汇总,分享给大家. 获取浏览器显示区域(可视区域)的高度 : 复制代码 代码如下: $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : 复制代码 代码如下: $(window).width(); 获取页面的文档高度 复制代码 代码如下: $(document).height(); 获取页面的文档宽度 : 复制代码 代码如下: $(document).width(); 浏览器当前窗口文档body的高度: 复制代码 代码

  • JavaScript获取网页、浏览器、屏幕高度和宽度汇总

    经常发现在写JavaScript的时候,都需要用到网页.浏览器或屏幕的高度和宽度来解决布局定位的问题,时常前用后忘,要不就是在网上search,干脆自己总结一下,这样也方便再次使用,省时省力. 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的

  • javascript获取设置div的高度和宽度兼容任何浏览器

    Javascript如何获取和设置div的高度和宽度,并且兼容任何浏览器?看代码: 复制代码 代码如下: <div id="div1" style="height:300px;width:200px;">http://www.itdos.com</div> <div id="div2" style="height:30px;width:20px;">http://www.itdos.com&

  • 微信小程序 动态的设置图片的高度和宽度详解及实例代码

    微信小程序图片等比例缩放 动态的获取图片的高度和宽度 动态的设置图片的高度和宽度 前言: 在小程序布局中,如果图片不是固定高度和高度,但image设置的是固定的高度和宽度,这时候原始图片相对image设置的固定高度和宽度不是等比例大小,那么这张图片就会变形,变的不清晰.这时就可以使用下面的等比例缩放的方式缩放图片,让图片不变形.或者通过image的bindload方法动态的获取图片的高度和宽度,动态的设置图片的高度和宽度,是图片布局的高度和宽度和原始图片的高度和宽度相等. 1.图片等比例缩放工具

  • js获取页面及个元素高度、宽度的代码

    网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线和滚动条的宽); 网页可见区域高: document.body.offsetHeight (包括边线的宽); 网页正文全文宽: document.body.scrollWidth; 网页正文全文高: document.body.scrollHeight; 网页被卷去的高(f

  • javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等

    HTML精确定位属性:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度offsetLeft:获取对

随机推荐