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+PHP+Mysql实现抽奖程序
Apr 12 jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jQuery插件实现图片轮播效果
Oct 19 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 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
php类的定义与继承用法实例
2015/07/07 PHP
php中namespace use用法实例分析
2016/01/22 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
PHP 8新特性简介
2020/08/18 PHP
加速IE的Javascript document输出的方法
2010/12/02 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
JavaScript代码复用模式详解
2014/11/07 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
js尾调用优化的实现
2019/05/23 Javascript
Python标准库与第三方库详解
2014/07/22 Python
使用python实现接口的方法
2017/07/07 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
Python matplotlib可视化实例解析
2020/06/01 Python
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
百丽国际旗下购物网站:优购
2017/02/28 全球购物
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
计算机工程学院个人求职信
2013/10/05 职场文书
库房主管岗位职责
2013/12/31 职场文书
面试必备的求职信
2014/05/25 职场文书
计生工作先进事迹
2014/08/15 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
Python机器学习之逻辑回归
2021/05/11 Python