0
点赞
收藏
分享

微信扫一扫

BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)


系列文章目录

文章目录

  • ​​系列文章目录​​
  • ​​前言​​
  • ​​一、EasyUI-accordion折叠效果的使用​​
  • ​​二、EasyUI-tab选项卡效果的使用​​
  • ​​三、EasyUI-动态添加tab选项卡​​
  • ​​总结​​

前言

接着上一篇,在上一篇的基础上,继续往下讲解

一、EasyUI-accordion折叠效果的使用

BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_css


BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_css_02


BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_css_03


然后将源码拷贝到项目中去

BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_动态添加_04


然后跟上一篇一样,进行一些分析

最后删减分析,做成这样,

注意重点。我们要的是折叠效果,定位要准

BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_动态添加_05


下面我们也可具体再来分析分析,做个加强版,在第一个例子layout.jsp上加上这个特效

具体操作

BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_动态添加_06


小改一下021accordion_1.jsp里面的代码

BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_css_07


BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_动态添加_08


注意如果没有效果的话,去分析demo里面的basic.html,很简单,复制代码即可,可能是有些地方复制错了

根据分析我们可以很容易猜到,title属性应该就是触发折叠效果的

效果如下:

BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_选项卡_09


BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_选项卡_10


BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_css_11


附上成功的源代码(注意引用那些,需要自己去配置,每个项目的引用目录是不尽相同的)

<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2021/3/14
Time: 21:46
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/demo/demo.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>

<title>021accordion_1</title>
</head>
<body class="easyui-layout">
<div data-options="region:'north'" style="height:50px;text-align:center">A</div>
<div data-options="region:'south'" style="height:50px;text-align:center">B</div>
<div data-options="region:'east'" title="East" style="width:180px;text-align:center">C</div>
<div data-options="region:'west'" title="West" style="width:100px;text-align:center">D
<div class="easyui-accordion" data-options="fit:true">
<div title="面板1">
1
</div>
<div title="面板2" >
2
</div>
<div title="面板3">
3
</div>
</div>
</div>
<div data-options="region:'center'" style="text-align: center">E</div>
</body>
</html>

二、EasyUI-tab选项卡效果的使用

同样的,先看demo

BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_选项卡_12


BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_选项卡_13


然后复制源码、分析可

最后跟前面的例子一样

BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_css_14


然后我们再把它放到最开的的布局源码里面去,复制前面的例子

BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_动态添加_15


BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_动态添加_16

下面我们再来具体看看另一个问题,怎么关掉这个选项卡

BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_选项卡_17


很简单,我们分析一下源码即可

BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_选项卡_18


BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_css_19


验证一下即可

BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_选项卡_20


至此完成,其实很简单

敲一遍我们会发现,其实就是这样的套路

三、EasyUI-动态添加tab选项卡

什么叫动态添加tab选项卡?

如下

BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_css_21


还是一样的套路,先看源码,我们可以知道:肯定是有一个点击事件用来监听点+还是-的

BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_css_22


肯定是有一个点击事件用来监听点+还是-的

我们先写一段测试代码

BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_动态添加_23


BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_css_24


BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_动态添加_25


BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_选项卡_26


综合两个来看 还是写# 比较靠谱 javascript(0) 还是会跳转,导致报错下面我们来看动态添加或者删除选项卡怎么弄

BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_选项卡_27


放到我们那个方法里面去即可

BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_css_28


BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_css_29


BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_选项卡_30


效果有一条线,我们加一个属性即可

BOS项目01_08_jQuery EasyUI_02:EasyUI-accordion折叠效果、tab选项卡效果、动态添加tab选项卡如何使用、fit(自动适应自动拉伸)_动态添加_31

看起来有点小复杂,懂事敲一敲,发现非常简单

总结

1、如果上一篇看懂了,入门了后面都非常简单,放心大胆写就行了,easyUI就是修修改改而已,重点是入门和后面的多练习,熟读唐诗三百首不会作诗也会吟
2、只要会用了,工作中很多时间基本上也是copy代码来完成工作任务的
总结一下
Accordion折叠效果

<!-- 1.accordion称为折叠
2.title标题属性一定要写
3.fit:true 表示自适应拉伸尺寸
-->
<div class="easyui-accordion" data-options="fit:true">
<div title="面板一">1</div>
<div title="面板二">2</div>
<div title="面板二">3</div>
</div>

Tabs选项卡

<div class="easyui-tabs" data-options="fit:true">
<!-- closable:true:表示显示关闭按钮 -->
<div title="快递列表" data-options="closable:true">快递列表</div>
<div title="快递列表">快递列表</div>
<div title="快递列表">快递列表</div>
</div>

动态添加tabs选项卡

<script type="text/javascript">
var index = 1;
function addTab() {
$('#tt').tabs('add',{
title: '收单列表'+index,
content: '<div >Content'+index+'</div>',
closable: true
});
index++;
}
</script>


举报

相关推荐

0 条评论