`

EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码

    博客分类:
  • HTML
 
阅读更多


转载自:http://blog.sina.com.cn/s/blog_770467360100qav3.html



摘要: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"
});



转载自:http://blog.sina.com.cn/s/blog_770467360100qav3.html
分享到:
评论

相关推荐

    easyui datagrid标题列宽度自适应

    描述中提到的“标题列宽度自适应”问题,通常出现在用户希望datagrid的列宽能够根据浏览器窗口大小的变化或者数据内容的长短自动调整,以保持良好的界面显示效果。这在响应式设计中尤为重要,确保用户在不同设备上都...

    Easyui tabs 标题居左,文字竖着

    Easyui tabs 标题居左,文字竖着

    Easyui tabs 左侧文字竖着显示

    Easyui tabs Title居左侧,并且文字竖着显示

    easyui tabs 右键关闭菜单扩展插件

    非常好看的易用的easyui tabs 右键插件,自己两行代码就搞定

    easyUI datagrid rownumber自适应宽度扩展JS

    easyUI datagrid 自动调整行号大小

    easyui tabs 右键关闭

    在本主题中,我们将聚焦于“easyui tabs 右键关闭”这一功能,即如何在 EasyUI 的选项卡上实现类似浏览器的右键菜单,允许用户通过右键点击关闭当前选项卡。 首先,我们需要创建一个基本的 EasyUI 选项卡结构。这...

    EasyUI 数据表格datagrid列自适应内容宽度的实现

    总的来说,实现EasyUI数据表格列宽自适应内容宽度的过程涉及到对数据表格的遍历、对文本内容的长度计算、列宽的动态设置以及对列宽调整功能的冻结。通过这些步骤,我们可以确保数据表格的列宽能够恰当地展示内容,...

    扩展EasyUI tabs 组件,加载tab页时添加遮罩

    标题"扩展EasyUI tabs 组件,加载tab页时添加遮罩"指出了我们将在EasyUI的tabs组件上进行自定义,以便在新tab页内容加载期间显示一个遮罩层。遮罩层是一种常见的视觉提示,用于告知用户页面正在处理数据或加载内容,...

    EasyUI tabs添加右键关闭菜单

    在网页开发中,EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列的 UI 组件,如表格、对话框、窗口、菜单等,帮助开发者快速构建用户界面。在本主题“EasyUI tabs 添加右键关闭菜单”中,我们将探讨如何为 ...

    EasyUI布局 高度自适应

    在这个例子中,`fit:true` 使得整个 `layout` 随浏览器窗口大小变化而调整大小,`north` 区域固定高度,而 `center` 区域中的 Datagrid 会自适应剩余空间。 3. 基于不同标签的 EasyUI-Layout - **基于 body 标签**...

    如何让easyui gridview 宽度自适应窗口改变及fitColumns应用

    本文将详细讲解如何实现EasyUI GridView的宽度自适应窗口变化以及`fitColumns`属性的应用。 首先,`fitColumns`是EasyUI datagrid的一个配置选项,当设置为`true`时,它会使表格的所有列宽度自动填充整个表格宽度,...

    easyUI各版本与ie浏览器兼容问题

    easyUI各版本与ie浏览器兼容问题

    easyui 模态窗口插件

    在上述代码中,`id` 属性定义了模态窗口的唯一标识,`class` 使用了 `easyui-dialog` 来应用 EasyUI 的对话框样式。`closed` 属性设置初始状态为关闭,`title` 定义窗口标题,`modal="true"` 表明这是一个模态窗口。...

    jQuery Easyui Tabs扩展根据自定义属性打开页签

    函数createTabContent用于根据提供的url和高度(h)来创建页签内容,但是这部分代码在给定的内容中并未显示。通常,这部分代码会负责根据url来加载页面内容,并将其设置为新页签的正文。 最后,作者提到easyui是一...

    JavaScript提高:005:ASP.NET使用easyUI TABS标签显示问题

    在本主题"JavaScript提高:005:ASP.NET使用easyUI TABS标签显示问题"中,我们将深入探讨如何在ASP.NET项目中正确使用EasyUI的TABS组件,并解决可能出现的显示问题。 EasyUI是一个基于jQuery的UI框架,提供了丰富的...

    手把手教你制作easyUI工作站,主要学习tabs方法

    在本文中,我们将深入探讨如何使用EasyUI框架创建一个具备tabs功能的工作站。EasyUI是一个基于jQuery的用户界面插件集合,它为开发者提供了丰富的组件和便捷的API,以简化Web应用的界面开发。让我们逐步了解如何利用...

Global site tag (gtag.js) - Google Analytics