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.serializeJSON
Jun 23 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
jQuery层叠选择器用法实例分析
Jun 28 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 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
新浪新闻小偷
2006/10/09 PHP
PHP 中的批处理的实现
2007/06/14 PHP
php抓取https的内容的代码
2010/04/06 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
iframe 异步加载技术及性能分析
2011/07/19 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
vue.js单页面应用实例的简单实现
2017/04/10 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
python 不关闭控制台的实现方法
2011/10/23 Python
python控制台英汉汉英电子词典
2020/04/23 Python
Python Tkinter GUI编程入门介绍
2015/03/10 Python
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
python语言基本语句用法总结
2019/06/11 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
现金会计岗位职责
2013/12/05 职场文书
学生感冒英文请假条
2014/02/04 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
Python语言中的数据类型-序列
2022/02/24 Python
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android