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实现前端分页功能
Mar 23 jQuery
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
jQuery实现带进度条的轮播图
Sep 13 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
一个PHP日历程序
2006/12/06 PHP
PHP 中常量的知识整理
2017/04/14 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
JavaScript库 开发规则
2009/01/31 Javascript
jQuery 渐变下拉菜单
2009/12/15 Javascript
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
haskell实现多线程服务器实例代码
2013/11/26 Python
Python简单获取自身外网IP的方法
2016/09/18 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
公务员党员评议表自我鉴定
2014/09/14 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
办公室文员岗位职责
2015/02/04 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
农村党员干部承诺书
2015/05/04 职场文书
会计做账心得体会
2016/01/22 职场文书
如何理解PHP核心特性命名空间
2021/05/28 PHP