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 27 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
jQuery 移除事件的方法
Jun 20 jQuery
jQuery实现电梯导航模块
Dec 22 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 面向对象 PHP5 中的常量
2010/05/05 PHP
PHP不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
ThinkPHP登录功能的实现方法
2014/08/20 PHP
PHP面向对象精要总结
2014/11/07 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
WordPress中邮件的一些修改和自定义技巧
2015/12/15 PHP
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
AngularJS语法详解
2015/01/23 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
Vue 使用beforeEach实现登录状态检查功能
2019/10/31 Javascript
Python splitlines使用技巧
2008/09/06 Python
Python使用Matplotlib模块时坐标轴标题中文及各种特殊符号显示方法
2018/05/04 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
无故旷工检讨书
2014/01/26 职场文书
管事部库房保管员岗位职责
2014/02/21 职场文书
志愿者事迹材料
2014/12/26 职场文书
工程部部长岗位职责
2015/02/12 职场文书
小学家长意见怎么写
2015/06/03 职场文书
岁月神偷观后感
2015/06/11 职场文书
情人节单身感言
2015/08/03 职场文书
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python
为什么你写的height:100%不起作用
2021/05/10 HTML / CSS
Python Numpy库的超详细教程
2022/04/06 Python