关于 esayui 的 Accordion 的使用

最新推荐文章于 2021-02-28 02:40:42 发布
最新推荐文章于 2021-02-28 02:40:42 发布
阅读量282 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42506285/article/details/80759639
版权
本文介绍如何使用EasyUI框架创建折叠面板（Accordion），包括必要的样式链接、JavaScript引用及示例代码。通过设置不同属性，如title和iconCls，可以轻松定义折叠面板的内容和外观。
摘要由CSDN通过智能技术生成
使用 esayui 的 easyui-accordion
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div class="easyui-accordion" style="width:300px;height:200px;">
    <div title="About Accordion" iconCls="icon-ok" style="overflow:auto;padding:10px;">
        <h3 style="color:#0099FF;">Accordion for jQuery</h3>
        <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
    </div>
    <div title="About easyui" iconCls="icon-reload" selected="true" style="padding:10px;">
        easyui help you build your web page easily
    </div>
    <div title="Tree Menu">
        <ul id="tt1" class="easyui-tree">
            <li>
                <span>Folder1</span>
                <ul>
                    <li>
                        <span>Sub Folder 1</span>
                        <ul>
                            <li><span>File 11</span></li>
                            <li><span>File 12</span></li>
                            <li><span>File 13</span></li>
                        </ul>
                    </li>
                    <li><span>File 2</span></li>
                    <li><span>File 3</span></li>
                </ul>
            </li>
            <li><span>File2</span></li>
        </ul>
    </div>
</div>
</body>
</html>
注意：
使用各个折叠的关键是
1、样式与 js
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
2、注意最外面 的有 easyui-accordion 是框，就是除了各个需要折叠的 div 外就没有任何东西
3、三个 div 注意 样式不一样，但都是有 title , title 是重要 属性，没有，但不能显示该折叠面板
<div title="About Accordion" iconCls="icon-ok" style="overflow:auto;padding:10px;">
<div title="About easyui" iconCls="icon-reload" selected="true" style="padding:10px;">
<div title="Tree Menu">
4、selected="true" 这个是被选择，即是被打开的，但如果只有一个，都是默认打开，但这种
情况就是 设置 selected="false" 也会被默认打开
这时得这样做，建一个不显示的 面板，设置 为打开selected="true"，想要默认关闭的 设置 selected="true"

云瑞
关注
easyUI快速入门第三讲——easyUI中的accordion（分类）组件
李阿昀的博客
10-29 1098
accordion（分类）组件的概述 分类空间允许用户使用多面板，但在同一时间只会显示一个。每个面板都内建支持展开和折叠功能。点击一个面板的标题将会展开或折叠面板主体。面板内容可以通过指定的href属性使用ajax方式读取面板内容。用户可以定义一个被默认选中的面板，如果未指定，那么第一个面板就是默认的。 可以看到accordion（分类）组件有点类似手风琴的效果。 accordion（分类）组件...
EasyUI Accordion折叠面板
qq_47906421的博客
07-01 823
EasyUI Accordion折叠面板Accordion介绍效果图依赖于panel用法刷新折叠面板（Accordion Panel）内容新添加面板获取指定的面板（panel）索引容器选择Panel选项事件使用方法 Accordion介绍 折叠面板（accordion）允许您提供多个面板（panel），同时显示一个或多个面板（panel）。每个面板（panel）都有展开和折叠的内建支持。点击面板（panel）头部可展开或折叠面板（panel）主体。面板（panel）内容可通过 ajax 指定 ‘href’
easyUi初次学习之accordion使用
肥猫钓鱼
11-24 163
jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签 jQuery EasyUI 提供了用于创建跨浏览器网页的完整的组件集合，包括功能强大的 datagrid（数据...
Java的accordion_easyUI Accordion
weixin_42357719的博客
02-28 147
@author YHC覆盖默认值$.fn.accordion.defaultsaccordion允许你提供提供多个panel每次显示一个,所有的内置的panel都内置支持展开(expanding)和折叠(collapsing),点击一个panel的头部展开或者折叠这个panel的body,panel的内容可以通过ajax加载,通过一个特定的"href"属性.用户可以定义一个panel让其选中,如...
使用easyui时导入的jar包
策马扬鞭追蜗牛
07-20 5033
<script type="text/javascript" src="../js/jquery-easyui-1.4.4/jquery.min.js"> <script type="text/javascript" src="../js/jquery-easyui-1.4.4/jquery.easyui.min.js" charset="utf-8"> <link rel="styleshe
easyui之accordion
xclsky的博客
12-18 1662
1 accordion是类似与抽屉一样。有多个抽屉，但是每次只能打开一个抽屉。需要的引用的样式为easyui-accordion。 如：         11111             2222             3333         2 要想使用accordion，必须先引用相对应的easyui的css和js。 如：     
jQuery EasyUI Accordion可伸缩面板组件使用详解
10-20
在使用 jQuery EasyUI Accordion 组件之前，需要先引入 jQuery EasyUI 的核心库文件，包括 jQuery 库、jQuery EasyUI 的 JavaScript 文件以及 CSS 样式文件。在给定的示例代码中，首先通过标签引入了 jQuery 的核心...
jQuery EasyUI 折叠面板accordion的使用实例(分享)
01-19
1、对折叠面板区域 div 设置 class=”easyui-accordion” ...easyui-折叠面板accordion的使用</title> <!-- 导入jquery核心类库 --> <script type=text/javascript src=../js/jqu
EasyUI accordion导航自动生成
08-18
EasyUI accordion导航自动生成JS
【EasyUI篇】Accordion分类组件
ouYang的博客
08-29 772
微信公众号：程序yuan 关注可了解更多的教程。问题或建议，请公众号留言; 查看--&gt; 全套EasyUI示例目录 9.Accordion分类组件           JSP文件 &lt;%--   Created by IntelliJ IDEA.   User: ooyhao   Date: 2018/7/29 0029   Time: 9:21...
accordion
08-28
accordion
jquery UI accordion 菜单折叠
04-22
NULL 博文链接：https://747017186.iteye.com/blog/1945210
Easyui如何关闭所有的折叠面板Accordion Actions
流萤飞火的博客
03-21 3237
在使用Easyui折叠面板的时候，当折叠面板与Dialog共同使用的时候会出现一个问题，就是当你打开dialog，展开所有的折叠面板后，关闭dialog，在重新打开的时候发现折叠面板没有复原，这个时候就需要考虑如何在关闭dialog的时候同时关闭所有的折叠面板。Esayui的中文官网也没有通过该方法，通过研究发现，通过组合使用easyui提供的方法可以实现目的。具体代码如下：function cl...
Accordion
无限迭代中......
01-12 328
https://codeforces.com/contest/1101/problem/B 题解： 从左往右找到 [: 记:下标为l 从右往左找到 :] 记:下标为r 查找【l+1，r-1】区间上的 | 数量cnt 答案就是cnt+4 如果不能满足l&lt;r或者找不到 [: 和 :]任意一个那么不存在  /* *@Author: STZG *@Language: C++ */...
B. Accordion
newhonor
05-03 140
https://codeforc.es/contest/1101/problem/B 题意：左边是[:中间可以有|，右边是:]；问最长的串； 思路：先找到[:和:],再看有多少|； #include<algorithm> #include<set> #include<vector> #include<queue> #include<cm...
Accordion（分类）
weixin_34409703的博客
09-22 142
2019独角兽企业重金招聘Python工程师标准>>> ...
Accordion( 分类) 组件
11-30 564
一． 加载方式 //class 加载方式<div id="box" class="easyui-accordion"style="width:300px;height:200px;"><div title="accordion1">accordion1</div><div title="accordion2">accordion2<...
jQuery EasyUI常用组件教程：从Accordion到DataGrid
本篇文档是关于jQuery EasyUI的中文帮助使用文档，它提供了详尽的教程和实例，覆盖了jQuery EasyUI库中的核心组件。文档主要分为以下几个部分： 1. **Accordion（可折叠标签）**：这部分介绍了如何使用Accordion...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值