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中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
jQuery实现穿梭框效果
Jan 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下用GD生成生成缩略图的两个选择和区别
2007/04/17 PHP
PHP开发的一些注意点总结
2010/10/12 PHP
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
PHP中文分词 自动获取关键词介绍
2012/11/13 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
图片按比例缩放函数
2006/06/26 Javascript
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
python实现按长宽比缩放图片
2018/06/07 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
劳动模范事迹材料
2014/01/19 职场文书
八一慰问活动方案
2014/02/07 职场文书
《将心比心》教学反思
2014/04/08 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
简单谈谈Python面向对象的相关知识
2021/06/28 Python