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 相关文章推荐
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 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运行速度的一些小技巧分享
2012/07/03 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
javascript天然的迭代器
2010/10/29 Javascript
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
js中eval详解
2012/03/30 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
深入学习js瀑布流布局
2016/10/14 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
Python threading多线程编程实例
2014/09/18 Python
单链表反转python实现代码示例
2018/02/08 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
python按比例随机切分数据的实现
2019/07/11 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
基于opencv实现简单画板功能
2020/08/02 Python
用Python 执行cmd命令
2020/12/18 Python
NFL Game Pass欧洲:在线观看NFL比赛直播和点播,以高清质量播放
2018/08/30 全球购物
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
优秀英语专业毕业生求职信
2013/11/23 职场文书
后勤主管工作职责
2013/12/07 职场文书
单身联谊活动方案
2014/01/29 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
Python入门之基础语法详解
2021/05/11 Python