`

jquery ui accordion高度自适应

 
阅读更多

官网上提供了accordion的一些介绍,根据这些,能够实现当浏览器大小改变时,accordion自动适应其父元素的大小,并充满父元素。前提是,父元素的高度随浏览器动态改变。

代码:

 window.onresize = function() {
            autoHeight();
            $("#permissionTree").accordion("resize");

        }

        $(function() {
            autoHeight();
            $("#permissionTree").accordion({
                fillSpace: true
            });

        });

其中,后一个函数是实现浏览器第一次加载页面时,accordion的正常加载。fillspace:true使得其自动充满父元素。前一个函数实现了在窗口改变大小时,调用accordion的resize方法。其中的autoHeight()函数用来控制页面其他元素(包括accordion的父元素)的大小。

分享到:
评论

相关推荐

    弹出层 jquery-ui 要用到的js以及css文件

    height: 'auto', // 自适应高度 modal: true // 创建模态对话框 }); }); ``` 4. **Dialog 的方法和选项**: Dialog 提供了许多方法和选项来控制其行为,如 `open()` 打开对话框,`close()` 关闭对话框,`option...

    jquery ui页面滚动底部显示浮动弹出层图文列表展示

    jQuery UI 提供了诸如对话框(Dialog)、拖放(Draggable)、可排序(Sortable)和可折叠(Accordion)等组件。在这个场景中,我们将主要利用 Dialog 组件来创建浮动弹出层。 1. **设置环境**:确保你已经在项目中...

    jQuery accordion插件:一个可折叠的面板【菜单】特效.rar

    jQuery UI是jQuery的一个扩展库,包含了accordion在内的多种UI元素,但你提到的这个可能是一个独立的、轻量级的accordion实现。 该插件的主要特点包括: 1. 自定义风格:你可以根据自己的需求调整accordion的样式...

    jqueryUI dialog

    height: 'auto', // 自适应高度 modal: true, // 创建模态对话框 }); ``` 二、Dialog的选项与方法 Dialog组件提供了一系列可配置的选项,如`title`用于设置对话框标题,`buttons`用于定义对话框底部的按钮,`...

    78个个常用的jquery 插件 jquer插件

    1. **导航和菜单插件**:jQuery提供了丰富的导航和菜单插件,如jQuery UI的Accordion(手风琴效果)和Dropdown(下拉菜单)。它们可以帮助创建动态、响应式的导航结构,使得用户在网站中更容易导航。 2. **表单验证...

    JQUER UI 前端框架

    - **容器高度自适应**:组件容器可以根据内容自动调整高度。 - **CSS Table**:对表格样式进行增强,提高表格的可读性和美观度。 - **在线编辑器**:集成在线文本编辑功能。 - **分页组件**:提供页面导航功能,适用...

    jquery+easyui学习文档.doc

    `$('#aa').accordion({...})` 初始化 Accordion,并设置其宽度、高度和是否自适应容器。 参数说明: - `width`:设置 Accordion 的宽度,默认值为 `auto`。 - `height`:设置 Accordion 的高度,默认值为 `auto`...

    jquery easyui1.2.5和帮助文档

    4. **响应式布局**:尽管EasyUI主要面向桌面应用,但随着移动设备的普及,1.2.5版本可能已经考虑了响应式设计,使得UI能在不同屏幕尺寸上自适应。 **二、jQuery EasyUI 主要组件详解** 1. **Dialog(对话框)**:...

    jquery-easyUI

    - `fit`:是否让 Accordion 自适应父容器的高度和宽度。 - **扩展**: - 可以通过设置 `class="easyui-accordion"` 和 CSS 样式来进一步定制 Accordion 的外观。 ##### 2. DateBox(日期框) **DateBox** 控件...

    推荐30个新鲜出炉的精美 jQuery 效果

    10. **UI Bootstrap**: 基于Bootstrap框架的jQuery UI组件,提供一套统一的界面元素和交互效果。 11. **Stylish Accordion**: 优雅的折叠面板,节省空间的同时保持内容的清晰组织。 12. **On-demand Search Box**: ...

    响应式jQ标签切换

    3. **jQuery插件**:有时,开发者会选择使用现有的jQuery插件,如Bootstrap的Tab插件或jQuery UI的Accordion组件,来快速实现标签切换功能。这些插件已经预设了动画效果和交互行为,可以节省大量开发时间。 4. **...

    js自适应左侧下拉菜单代码

    手风琴效果(Accordion)是一种常见的UI设计元素,它允许用户展开或折叠内容区域,通常用于显示隐藏的内容或分类。在这个场景中,手风琴效果被应用到左侧的下拉菜单中,使得用户可以逐级展开和收起子菜单,节省了...

    AmazeUI折叠式卡片布局,整合内容列表、表格组件实现

    【JavaScript资源】引入了jQuery库和AmazeUI的JavaScript文件,AmazeUI依赖jQuery来处理交互和动画效果。在HTML结构中,使用AmazeUI的折叠式卡片类(如`.am-accordion`、`.am-accordion-item`等)和状态类(如`.am-...

    手风琴效果

    - 除了自己编写代码,还可以利用现有的前端框架或库,如Bootstrap的`collapse`组件或jQuery UI的`accordion`插件,它们提供了开箱即用的手风琴效果,并处理了很多细节问题。 通过以上步骤,我们可以创建一个功能...

    dwz 学习文档

    8. **容器高度自适应**: 容器的高度可根据内容自动调整。 9. **CSS Table**: 通过CSS实现表格布局。 10. **Table扩展**: 增强表格功能,如排序、筛选等。 11. **在线编辑器**: 提供富文本编辑功能。 12. **分页组件*...

    dwz-user-guide

    - **容器高度自适应**:使页面元素能够根据内容自动调整高度。 - **Table扩展**:增强表格功能,如排序、过滤等。 - **在线编辑器**:提供文本编辑能力,支持富文本格式。 - **分页组件**:简化分页逻辑,便于处理大...

    DWZ+富客户端框架使用手册

    - **容器高度自适应**: 容器能够根据内容自动调整高度。 - **CSSTable**: 使用CSS而非传统的表格标签来布局页面内容。 - **Table扩展**: 支持数据表格的各种交互操作,如排序、筛选等。 #### 在线编辑器 提供了在线...

    DWZ富客户端框架,使用教程

    - **容器高度自适应**:通过简单的标记,让容器根据内容自动调整高度。 - **CSSTable与Table扩展**:增强了表格的样式控制能力,支持复杂的数据展示需求。 - **在线编辑器**:提供文本编辑功能,支持富文本格式。...

Global site tag (gtag.js) - Google Analytics