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插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
jquery实现简单每周轮换的日历
Sep 10 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设计模式 Proxy (代理模式)
2011/06/26 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
PHP简单日历实现方法
2016/07/20 PHP
php之可变变量的实例详解
2017/09/12 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
Python-copy()与deepcopy()区别详解
2019/07/12 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
Python 没有main函数的原因
2020/07/10 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
如何使用 Flask 做一个评论系统
2020/11/27 Python
Python读写Excel表格的方法
2021/03/02 Python
Java基础知识面试题
2014/03/25 面试题
体育教师工作总结的自我评价
2013/10/10 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
C++程序员求职信
2014/05/07 职场文书
租房协议书范例
2014/10/14 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
六年级语文教学反思
2016/03/03 职场文书