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


Posted in jQuery onDecember 25, 2017

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 相关文章推荐
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery操作css样式
May 15 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
jQuery实现查看图片功能
Dec 01 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 #jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 #jQuery
webpack写jquery插件的环境配置
Dec 21 #jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 #jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 #jQuery
jquery自定义显示消息数量
Dec 19 #jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 #jQuery
You might like
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
一段实时更新的时间代码
2006/07/07 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
js调用图片隐藏&amp;显示实现代码
2013/09/13 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
纯js模仿windows系统日历
2017/02/04 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
js实现图片推拉门效果代码实例
2019/05/18 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
js刷新页面location.reload()用法详解
2019/12/09 Javascript
Python切换pip安装源的方法详解
2016/11/18 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
Python socket模块ftp传输文件过程解析
2019/11/05 Python
python实现串口通信的示例代码
2020/02/10 Python
Python使用socketServer包搭建简易服务器过程详解
2020/06/12 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
2016/05/27 HTML / CSS
法制宣传实施方案
2014/03/13 职场文书
班级寄语大全
2014/04/10 职场文书
娱乐节目策划方案
2014/06/10 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
廉政承诺书2015
2015/04/28 职场文书
商务宴会祝酒词
2015/08/11 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电