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 04 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
jquery插件实现轮播图效果
Oct 19 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 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
prototype1.4中文手册
2006/09/22 Javascript
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
JS数组合并push与concat区别分析
2015/12/17 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
微信小程序和百度的语音识别接口详解
2019/05/06 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
JS实现打字游戏
2019/12/17 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
JavaScript的垃圾回收机制与内存管理
2020/08/06 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
bat和python批量重命名文件的实现代码
2016/05/19 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
Python测试模块doctest使用解析
2019/08/10 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
python实现图片转字符画的完整代码
2021/02/21 Python
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
PyQt 如何创建自定义QWidget
2021/03/24 Python
医院护士专业个人的求职信
2013/12/09 职场文书
商超业务员岗位职责
2014/03/12 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
聘用意向书
2014/07/29 职场文书
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
招商引资工作汇报
2014/10/28 职场文书
2014年优秀党员材料
2014/12/18 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
罗马假日观后感
2015/06/08 职场文书
python实现求纯色彩图像的边框
2021/04/08 Python
基于CSS3画一个iPhone
2021/04/21 HTML / CSS