1、对折叠面板区域 div 设置 class=”easyui-accordion” 
2、在区域添加多个 div， 每个 div 就是一个面板 （每个面板一定要设置 title 属性）。 
3、设置面板属性 fit 为 true，自适应父容器大小

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>easyui-折叠面板accordion的使用</title>

         <!-- 导入jquery核心类库 -->

         <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

         <!-- 导入easyui类库 -->

         <link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">

         <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">

         <link rel="stylesheet" type="text/css" href="../css/default.css">

         <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>

     </head>

     <body class="easyui-layout">

         <div data-options="region:'north',title:'你我他学习吧-学习Java的好博客！'" style="height:100px"></div>

         <div data-options="region:'west',title:'菜单导航'" style="width:200px">

             <!--折叠面板-->

             <div class="easyui-accordion" data-options="fit:true">

                 <div data-options="title:'基础菜单'">面板一</div>

                 <div data-options="title:'系统菜单'">面板二</div>

             </div>

         </div>

         <div data-options="region:'center',title:'中部区域'"></div>

         <div data-options="region:'east',title:'东部区域'" style="width:100px"></div>

         <div data-options="region:'south',title:'南部区域'" style="height:100px"></div>

     </body>

 </html>

jQuery EasyUI 折叠面板accordion的使用实例的更多相关文章

  1. jQuery EasyUI 选项卡面板tabs使用实例精讲

    1. 对选项卡面板区域 div 设置 class=”easyui-tabs” 2. 对选项卡面板区域添加多个 div,每个 div 就是一个选项卡(每个面板一定设置 title) 3. 设置面板 fi ...

  2. 修改mui accordion（折叠面板）默认展开收缩行为

    mui的折叠面板 accordion 默认展开收缩逻辑是,展开其中一个的同时收缩起同级已经展开的元素. 实际需求:展开其中一个不必收缩同级元素. 分析mui.js源代码: window.addEven ...

  3. jquery 画板折叠

    <!doctype html><html lang="en"><head> <meta charset="utf-8" ...

  4. 套用JQuery EasyUI列表显示数据、分页、查询

    声明,本博客从csdn搬到cnblogs博客园了,以前的csdn不再更新,朋友们可以到这儿来找我的文章,更多的文章会发表,谢谢关注! 有时候闲的无聊,看到extjs那么肥大,真想把自己的项目改了,最近 ...

  5. 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局

    EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...

  6. Jquery Accordion 折叠面板

    属性 类型 默认值 active Boolean/Number/jQuery/Selector/Element 第一个面板 设定默认显示的面板.设置为 false 时默认不显示面板,需 collaps ...

  7. （八）easyUI之Accordion折叠面板：动态面板

    二.动态面板 数据库设计 函数设计:该函数用于获取某个节点的所有子节点 CREATE FUNCTION fn_getAddress_ChildList_test(rootId INT) RETURNS ...

  8. （七）easyUI之Accordion折叠面板：普通的静态面板

    一.普通的静态面板 前台 <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  9. jquery easyui Accordion的使用

    <html> <head> <script src="jquery-easyui/jquery.min.js"></script> ...

随机推荐

  1. SQL LIKE 操作符

    LIKE 操作符用于在 WHERE 子句中搜索列中的指定模式. LIKE 操作符 LIKE 操作符用于在 WHERE 子句中搜索列中的指定模式. SQL LIKE 操作符语法 SELECT colum ...

  2. BZOJ5197:[CERC2017]Gambling Guide(最短路,期望DP)

    Description 给定一张n个点,m条双向边的无向图. 你要从1号点走到n号点.当你位于x点时,你需要花1元钱,等概率随机地买到与x相邻的一个点的票,只有通过票才能走到其它点. 每当完成一次交易 ...

  3. Linux：Day3 文件系统

    Linux的文件系统: 根文件系统(rootfs):root filesystem /boot:引导文件存放目录:内核文件(vmlinuz).引导加载器(bootloader,grub)都存放于此目录 ...

  4. undo丢失恢复异常恢复，运维DBA反映Oracle数据库无法启动报错ORA-01157 ORA-01110，分析原因为Oracle数据库坏块导致

    本文转自 惜纷飞 大师. 模拟基表事务未提交数据库crash,undo丢失恢复异常恢复,运维DBA反映Oracle数据库无法启动报错ORA-01157 ORA-01110,分析原因为Oracle数据库 ...

  5. Luogu P4323 [JSOI2016]独特的树叶

    一道比较好的树Hash的题目,提供一种不一样的Hash方法. 首先无根树的同构判断一般的做法只有树Hash,所以不会的同学可以做了Luogu P5043 [模板]树同构([BJOI2015]树的同构) ...

  6. TMS-规划图

    规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 规划图 ...

  7. scrapy 爬取糗事百科

    安装scrapy conda install scrapy 创建scrapy项目 scrapy startproject qiubai 启动pycharm,发现新增加了qiubai这个目录 在spid ...

  8. SparkSQL – 从0到1认识Catalyst（转载）

    最近想来,大数据相关技术与传统型数据库技术很多都是相互融合.互相借鉴的.传统型数据库强势在于其久经考验的SQL优化器经验,弱势在于分布式领域的高可用性.容错性.扩展性等,假以时日,让其经过一定的改造, ...

  9. 我的微软最有价值专家(Microsoft MVP)之路

    一.写在前面 2018年对我来说是幸运的一年,对我来说最幸运的事情有两个,一个是在离驾照考试过期还有一个月(报名之后一直没去考)终于拿到了我的驾照,还有一件事莫过于获得了微软MVP.期间,一直有朋友问 ...

  10. 使用docker Registry快速搭建私有镜像仓库

    当我们执行docker pull xxx的时候,docker默认是从registry.docker.com这个地址上去查找我们所需要的镜像文件,然后执行下载操作.这类的镜像仓库就是docker默认的公 ...