Angular实现双向折叠列表组件的示例代码


Posted in Javascript onNovember 21, 2017

最近在做一个双向折叠组件,如下图所示,页面是分为两组,左边页面是Summary Panel,主要是一组列表,右边页面是Detail Panel,展示左边列表中某一项的具体信息,我们把它记作“Middle State”。

Angular实现双向折叠列表组件的示例代码

我们还看到有“<”和“>”两组按钮,这就是我们要做的“双向折叠组件”。点击左边的“<”,Summary Panel折叠起来,Detail Panel铺满整个页面,我们把它记作“Left State”,如下图:

Angular实现双向折叠列表组件的示例代码

在Summary Panel折叠状态下,点击“>”,又回到“Middle State”。点击“>”,Detail Panel折叠起来,Summary Panel铺满整个页面,我们把它记作“Right State”,如下图:

Angular实现双向折叠列表组件的示例代码

我们通过以上的需求分析可知,

1.页面的总体布局是一个Summary的div,两个箭头buttons,一个Detail的div。

2.页面总共有三种state:“Middle”、“Left”、“Right”,有两个button:“<”和“>”,也就是两个button去控制三个state。

因此我们需要定义一个枚举来记录页面的三种状态(注意,定义枚举要用export导出,否则后面会出错)

export enum CollapseExpandState {
  Middle = 1,
  Left,
  Right
}

页面的结构如下,并且通过一个变量_collapseExpandState去控制“left”和“right”两个button,具体为“<”会在页面状态为“Middle”和“Right”的情况下出现,“>”会在页面状态为“Middle”和“Left”状态下出现,从需求图中即可得知:

<div id="container">
  <div id="summary"></div>
  <div id="buttons">
    <div id="left" *ngIf="_collapseExpandState === CollapseExpandState.Middle || CollapseExpandState.Right" (click)="_onHandleLeft($event)">《</div>
    <div id="right"> *ngIf="_collapseExpandState === CollapseExpandState.Middle || CollapseExpandState.Left" (click)="_onHandleLeft($event)">》</div>
  </div>
  <div id="detail"></div>
</div>

这里在angular的template中用到了枚举,遭遇了一些麻烦,如果我们按上述定义了枚举,并且在Angular Component的template中用了枚举,我们会得到以下的错误提示:

TypeError: Cannot read property 'Middle' of undefined

也就是说,在Angular2的template中无法识别定义的枚举类型CollapseExpandState,这是因为你写的Angular Component的template模板的执行环境是你定义的component class,但是在class中并没有关于CollapseExpandState枚举的任何引用,所以Angular在为你的component生成模板的时候认为CollapseExpandState是undefined的。知道了原因,解决方案就很容易了,只需要在component class中加入这个枚举的引用即可:

@component(...)
export class ContainerWidget {
  public CollpaseExpandState: any = CollapseExpandState;
}

我们通过枚举状态来控制了两个buttons是否在恰当的页面状态显示与否,但是即使是同一个buttons,在不同的页面状态下所用到的样式也会不同,这里的样式其实最主要的就是位置了。我们先来考虑如何去控制button的样式,再来考虑如何去正确定位不同页面状态下button的位置。

对于控制button的样式,我们需要控制三个样式:"left button"、"right button"还有“buttons”。能够想到有三种方案:

I、用ng-class

ng-class一般的用法如下:

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

因此它需要用boolean去控制,每一种样式需要一个boolean去控制,left和right各有两种样式,buttons有三种样式,这样就需要用5个boolean去控制,略显麻烦。

II、 用ElementRef.nativeElement.className

分别在buttons、left和right上用模板变量,然后在class中定义:

@ViewChild("buttons") buttons: ElementRef;
@ViewChild("left") left: ElementRef;
@ViewChild("right") right: ElementRef;

在处理函数中这样去给class赋值从而改变样式:

this.left.nativeElement.className = "XXXXX";

这样的话,我们需要从元素的角度出发,只需要3个元素变量,从而改变元素上的className即可。但是这样做有个隐患,注意到我们是用的ngIf来控制left和right在不同状态下是否存在,因为每一次事件处理都需要对三个元素的样式进行赋值,但是如果某个页面状态下ngIf为false从而元素不存在,那么就会报“Null Pointer”的错误,所以如果所引用的元素受到了ngIf的控制,不确定是否一定存在的情况下,要慎用该方法为元素赋予样式。

III、 用class="{{}}"

为了II中的尴尬,我们采用在HTML元素上对class进行直接赋值的方式,但是需要借用插值表达式{{}}。我们在css中用class的形式定义好样式,并且在compoennt class中定义三个字符串变量记录className,然后在事件处理函数中把相应的className赋予变量即可。这样我们就不用担心元素是否存在而导致的空指针了。

考虑完如何控制样式,下面我们进入CSS样式的讨论,这里其实主要考虑的就是位置。

我们采用flex布局,从左到右依次排列Summary Panel, buttons和Detail Panel。我们希望Buttons向左移,但是空出的位置被Detail Panel来填充。首先来看一下不设样式的效果图:

Angular实现双向折叠列表组件的示例代码

显然buttons是占据了文档流的位置的,如果这时候我们用relative定位buttpms,并且设置left的值为-74px(注意到left为负数就会把元素往左推):

.buttons{
  display: flex;
  position: relative;
  margin-top: 23px;
  left: -74px;
}

效果图为:

Angular实现双向折叠列表组件的示例代码

发现如果用left的话,buttons原来的文档流位置依然存在,只是buttons相对于原来的位置移动了一定的位移。

如果我们用margin-left来设置呢:

.buttons{
  display: flex;
  position: relative;
  margin-top: 23px;
  margin-left: -74px;
}

效果图为:

Angular实现双向折叠列表组件的示例代码

它和left不同之处在于,left会留住原来的文档流位置,但是用margin-left原来的文档流位置会消失,而由后面的元素补充过来,而我们想要的效果,正好是用margin-left来实现的。

所以用CSS定位的时候,要明白left和margin-left的区别,从而选择正确的方式来定位。

总结一下,从这个案例中我们学习到了:

  1. 双向折叠可以用“3种页面状态去控制2个按钮”来实现
  2. enum在Angular Component的template中用到时,需要在compnent class中添加它的引用
  3. 控制元素样式有很多方法,要选择合适的方法
  4. CSS定位中left和margin-left虽然都能把元素推向左边,但是left保留原来文档流位置,margin-left不保留原来文档流位置。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在textarea中显示html页面的javascript代码
Apr 20 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
Nov 11 Javascript
谷歌地图打不开的解决办法
Aug 07 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
分享ES6的7个实用技巧
Jan 18 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
前端深入理解Typescript泛型概念
Mar 09 Javascript
JS前端监控采集用户行为的N种姿势
Jul 23 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 #Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 #Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 #Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
Nov 21 #Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 #Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 #Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 #Javascript
You might like
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
jquery validate 自定义验证方法介绍 日期验证
2014/02/27 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
js模拟微博发布消息
2017/02/23 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
2018/07/26 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
Vue和React有哪些区别
2020/09/12 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
python3安装speech语音模块的方法
2018/12/24 Python
python+pyqt5实现KFC点餐收银系统
2019/01/24 Python
Python 实现一个简单的web服务器
2021/01/03 Python
aec加密 php_php aes加密解密类(兼容php5、php7)
2021/03/14 PHP
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
意大利在线药房:Farmacia Loreto Gallo
2019/08/09 全球购物
火山动力Java笔试题
2014/06/26 面试题
千元咖啡店的创业计划书范文
2013/12/29 职场文书
周年庆典主持词
2014/04/02 职场文书
村长贪污检举信
2014/04/04 职场文书
不服从上级领导安排的检讨书
2014/09/14 职场文书
考试作弊万能检讨书
2014/10/19 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
行政处罚决定书
2015/06/24 职场文书
党课主持词大全
2015/06/30 职场文书
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers