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实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery中库的引用方法
Jan 06 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jquery检测上传文件大小示例
Apr 26 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实现把数字ID转字母ID
2013/08/12 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
Jquery读取URL参数小例子
2013/08/30 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
py中的目录与文件判别代码
2008/07/16 Python
python下如何让web元素的生成更简单的分析
2008/07/17 Python
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
Python 元组操作总结
2019/09/18 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
ProBikeKit新西兰:自行车套件,跑步和铁人三项装备
2017/04/05 全球购物
四年的大学生生活自我评价
2013/12/09 职场文书
运动会广播稿20字
2014/02/18 职场文书
施工协议书范本
2014/04/22 职场文书
公司承诺书怎么写
2014/05/24 职场文书
班风口号
2014/06/18 职场文书
暂住证证明
2015/06/19 职场文书
python实现层次聚类的方法
2021/11/01 Python
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL
Docker安装MySql8并远程访问的实现
2022/07/07 Servers