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.load()和Jsp的include的区别
Apr 12 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
jQuery实现简单全选框
Sep 13 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去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
yii框架表单模型使用及以数组形式提交表单数据示例
2014/04/30 PHP
PHP设置进度条的方法
2015/07/08 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
JavaScript实现网页上的浮动广告的简单方法
2013/06/14 Javascript
JavaScript实现在标题栏上显示当前日期的方法
2015/03/19 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
浅析Python中return和finally共同挖的坑
2017/08/18 Python
Python格式化日期时间操作示例
2018/06/28 Python
python矩阵的转置和逆转实例
2018/12/12 Python
python交换两个变量的值方法
2019/01/12 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
win10安装python3.6的常见问题
2020/07/01 Python
django和flask哪个值得研究学习
2020/07/31 Python
浅谈python锁与死锁问题
2020/08/14 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
元旦晚会邀请函
2014/02/01 职场文书
财务会计自荐信范文
2014/02/21 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
廉洁家庭事迹材料
2014/05/15 职场文书
区级文明单位申报材料
2014/05/15 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
门市房租房协议书
2014/12/04 职场文书
导游词之唐山景点
2019/12/18 职场文书
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js