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使用unlock.js插件实现滑动解锁
Apr 04 jQuery
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
详解jQuery-each()方法
Mar 13 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
jquery插件实现代码雨特效
Apr 24 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
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
php UBB 解析实现代码
2011/11/27 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
浅谈Javascript中Object与Function对象
2015/09/26 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
js实现盒子移动动画效果
2020/08/09 Javascript
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python文件与目录操作实例详解
2016/02/22 Python
python3.x上post发送json数据
2018/03/04 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
python使用matplotlib的savefig保存时图片保存不完整的问题
2021/01/08 Python
酒店前台接待岗位职责
2013/12/03 职场文书
房屋租赁协议书
2014/04/10 职场文书
期中考试反思800字
2014/05/01 职场文书
给市场的环保建议书
2014/05/14 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
大学生实习推荐信
2015/03/27 职场文书
考生诚信考试承诺书
2015/04/29 职场文书
长江七号观后感
2015/06/11 职场文书
情人节单身感言
2015/08/03 职场文书