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实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
Jquery Fade用法详解
Nov 06 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+MYSQL会员系统的开发实例教程
2014/08/23 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
php观察者模式应用场景实例详解
2017/02/03 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
jQuery控制Div拖拽效果完整实例分析
2015/04/15 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
Python可变参数*args和**kwargs用法实例小结
2018/04/27 Python
python实现多人聊天室
2020/03/31 Python
python读取文件名并改名字的实例
2019/01/07 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
Android面试题及答案
2015/09/04 面试题
计算机专业毕业生自荐信范文
2014/03/06 职场文书
应届生求职信范文
2014/06/30 职场文书
班级课外活动总结
2014/07/09 职场文书
经典演讲稿开场白
2014/08/25 职场文书
2014年销售工作总结
2014/12/01 职场文书
证劵公司反洗钱宣传活动总结
2015/05/08 职场文书
运动会入场词
2015/07/18 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书