jQuery EasyUI 折叠面板accordion的使用实例(分享)

更新时间：2017年12月25日 08:30:03 作者：你我他学习吧

下面小编就为大家分享一篇jQuery EasyUI 折叠面板accordion的使用实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

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的使用实例(分享)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Jquery 例外被抛出且未被接住原因介绍
正如标题所言肯定是js代码写错的问题，经检查，果然发现问题在此与大家分享下以免有同样的错误发生
2013-09-09
基于jQuery实现选项卡效果
这篇文章主要为大家详细介绍了基于jQuery实现选项卡效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
jquery 插件学习（六）
把其中的参数默认值作为$.fn.color对象的属性单独进行设计，然后借助jquery.extend方法，覆盖原来的参数选项即可
2012-08-08
jquery checkbox实现单选小例
checkbox是复选框如何将其变为单选呢？下面有个不错的示例，感兴趣的朋友可以参考下
2013-11-11
jQuery zTree插件快速实现目录树
这篇文章主要为大家详细介绍了jQuery zTree插件快速实现目录树，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-08-08
jQuery基于cookie实现换肤功能实例
这篇文章主要介绍了jQuery基于cookie实现换肤功能,结合具体实例形式分析了jQuery使用cookie记录与读取用户信息实现页面样式的操作方法,需要的朋友可以参考下
2017-10-10
jquery可定制的在线UEditor编辑器
这篇文章主要介绍了jquery可定制的在线UEditor编辑器，UEditor的功能非常强大，ueditor更具有功能插件接口，很轻松地添加自己定义功能到编辑器中，方便项目的不同需求，需要的朋友可以参考下
2015-11-11
使用jQuery的attr方法来修改onclick值
这篇文章主要介绍了通过jQuery的attr修改onclick值的解决方法 ,需要的朋友可以参考下
2014-07-07
jQuery实现花式轮播之圣诞节礼物传送效果
这篇文章主要介绍了jQuery实现花式轮播之圣诞节礼物传送效果,需要的朋友可以参考下
2016-12-12
jQuery将表单序列化成一个Object对象的实例
下面小编就为大家带来一篇jQuery将表单序列化成一个Object对象的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11