easyui之layout布局+accordion折叠面板+tabs选项卡面板

最新推荐文章于 2021-03-16 00:17:34 发布
最新推荐文章于 2021-03-16 00:17:34 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： java-web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36357608/article/details/80963523
版权
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 先引入 jquery的 js -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<!-- 引入 easyui的js -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
<!-- 引入国际化 js -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入 默认样式 css -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css"/>
<!-- 引入 icon图标 css  -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css"/>
</head>
<body class="easyui-layout"> <!-- 使用layout布局 -->
<!-- easyui 在 标签 data-options 配置 属性 -->
<!-- 只有center区域 是必须的  -->
<div data-options="region:'north',title:'北部面板'" style="height:100px;">北部</div>
<div data-options="region:'south',title:'南部面板'" style="height:100px;">南部</div>
<div data-options="region:'west',title:'西部面板'" style="width:200px;">
<!-- 折叠面板  -->
<!-- fit属性，使当前div大小占满父容器  -->
<div class="easyui-accordion" data-options="fit:true">
<!-- 通过iconCls 设置图标，找 icon.css中 类定义 -->
<div data-options="title:'基本功能',iconCls:'icon-mini-add'">面板一</div> <!-- 这里每个div就是一个面板 -->
<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:'center'">
<!-- 选项卡面板 -->
<div class="easyui-tabs" data-options="fit:true">
<div data-options="title:'选项卡一'">内容一</div> <!-- 这里每个div 就是一个选项卡 -->
<!-- closeable 可关闭 -->
<div data-options="title:'选项卡二',closable:true">内容二</div>
<div data-options="title:'选项卡三'">内容三</div>
</div>
</div>

</body>
</html>
zengwenhe1987
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css实现折叠面板
赵玉玲的博客
11-22 9237
纯css实现折叠面板本例实现了已知高度元素的显示与折叠，但不能应用于高度不固定的元素 <input type="checkbox" class="fold-button"> <section> <div class="fold-content"></div> </section> .fold-button{ appearance: none;
easyui页面布局示例
04-03
首先，EasyUI 提供了多种布局模式，如网格布局（grid layout）、面板布局（panel layout）、窗口布局（window layout）等，这些布局方式可以帮助开发者灵活地组织页面元素。在本示例中，很可能是使用了网格布局来...
折叠面板，类似于二级目录的效果，纯css编写
天纵神武的博客
10-12 1436
html> html> head> meta charset="utf-8"> title>titletitle> style type="text/css"> #parent >li> span{background: #0c9399;display: block;width: 200px;} li {line-height: 50px
easyui_layout折叠
{竹子}
09-23 6522
$(function(){         $(".easyui-layout").layout('collapse','north');         $(".easyui-layout").layout('collapse','west'); });
自定义模拟easyui的layout面板的折叠或者展开
weixin_33858485的博客
02-24 763
2019独角兽企业重金招聘Python工程师标准>>> ...
EasyUI之选项卡Tabs
牛栏山矿泉水
10-23 175
1、实例背景 EasyUI选项卡Tabs，获取选中第几个并打印Tabs标签内容 2、实现实例 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;EasyUI之选项卡Tabs&lt;/title&gt; &lt;link rel=&quo
jQuery+EasyUI+1.2.4+API+中文文档(标记).rar
02-17
Tabs 标签页/选项卡 Accordion 手风琴 Layout 布局 Menu and Button 菜单和按钮 Menu 菜单 LinkButton 链接按钮 MenuButton 菜单按钮 SplitButton 拆分按钮 （这个一直不知道中文该如何表述才恰当，谁...
EasyUI中文API1.5
07-02
8. **其他组件**：还有如`tabs`（选项卡）、`accordion`（折叠面板）、`slider`（滑块）、`progressbar`（进度条）等，覆盖了日常开发中的大部分需求。 9. **事件处理**：EasyUI允许开发者通过绑定事件来响应用户的...
easyui折叠菜单写法
10-18
easyui折叠菜单写法！
jQuery EasyUI 1.2.4 API 中文文档.chm
11-18
Tabs 标签页/选项卡 Accordion 手风琴 Layout 布局 Menu and Button 菜单和按钮 Menu 菜单 LinkButton 链接按钮 MenuButton 菜单按钮 SplitButton 拆分按钮 （这个一直不知道中文该如何表述才恰当，谁知道一定...
10、EasyUI的折叠选项卡
xyphf的博客
12-26 396
EasyUI的折叠选项卡，添加class=”easyui-accordion”closable:true表示该项可删除<body> <div class="easyui-accordion" data-options="selected:-1" style="width:600px;height:300px"> <div title="收货地址1">收货地址111111111111111<
easyui layout 折叠之后显示标题
aas3637721的博客
03-28 1446
(function($){  var buttonDir = {north:'down',south:'up',east:'left',west:'right'};     $.extend($.fn.layout.paneldefaults,{         onBeforeCollapse:function(){             /**/             var
BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit（自动适应自动拉伸）
小良的博客
03-16 304
系列文章目录 文章目录系列文章目录前言一、EasyUI-accordion折叠效果的使用二、EasyUI-tab选项卡效果的使用三、EasyUI-动态添加tab选项卡总结 前言 接着上一篇，在上一篇的基础上，继续往下讲解 一、EasyUI-accordion折叠效果的使用 然后将源码拷贝到项目中去 然后跟上一篇一样，进行一些分析 最后删减分析，做成这样， 注意重点。我们要的是折叠效果，定位要准 下面我们也可具体再来分析分析，做个加强版，在第一个例子layout.jsp上加上这个特效 具体操作 小
EasyUI-Load Panel Content
dxm809的博客
03-20 315
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Sc...
layout页面布局accordion折叠面板tabs选项卡面板
a623982022的博客
01-10 407
layout页面布局accordion折叠面板tabs选项卡面板
布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局...
weixin_34143774的博客
07-04 748
EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults。 面板（panel）当做其他内容的容器使用。它是创建其他组件（比如：Layout 布局、Tabs 标签页/选项卡、Accordion 折叠面板，等等）的基础组件。它也提供内置的可折叠、可关闭、可最大化、可最小化的行为以及其他自定义行为。面板（panel）可以简单地嵌入到网页的任何位置。 ...
（十）easyUI之折叠面板+选项卡+树完成系统布局
weixin_34198762的博客
11-01 208
一、效果 二 、编码 　　数据库设计 数据库函数设计，该函数根据父节点id 查询出所有字节点（包括孙子节点） BEGIN #声明两个临时变量 DECLARE temp VARCHAR(1000); DECLARE tempChd VARCHAR(1000); SET temp = '0'; SET tempChd=CAST(rootId AS ...
jQueryEasyUI 1.2.4 API 中文文档详解
9. **Layout布局** - 包括Panel面板、Tabs标签页/选项卡、Accordion手风琴和整体Layout，这些组件提供了灵活的页面布局方案，详细介绍了各自用法、特性、事件和方法。 10. **Menu and Button菜单和按钮** - 提供了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值