Mockplus原型交互跟我做之10 – 关闭弹出面板的那点事儿

jongde

弹出面板，是我们经常使用的组件。今天，就来说说关闭弹出面板的事儿。

内容相对不那么好玩，但是挺重要，所以你需要了解。耐心阅读下，你发现并不复杂，同样是简单的。



一、自动关闭



默认情况下，弹出面板弹出后，系统在一定策略下，会自动关闭它。

试试：弹出面板弹出后，你在它的外部位置点击一下，它会自动关闭。这就是自动关闭策略在起作用。

如果你只是做一般的草图或线框图，只是有一些基本交互需要，到这里，基本就可以打住不看了。因为已经够用了。

如果还有需要，往下继续：

自动关闭策略一共有三种，分别是：

“无”：无论点击哪里，都不会自动关闭（除非你自己设置了关闭命令）。这个对于关闭的限制最强。

“点击外部”：点击弹出面板的内容区域的外面，就自动关闭。这个限制中等。

“点击所有区域”：不管点击哪里，都会自动关闭。这个限制最松。

默认地，弹出面板的关闭策略是“点击外部”自动关闭。如图：



很方便，不是吗？

这里稍微要理解下：所谓弹出面板内容区域，是个虚拟的矩形区域范围。那么这个范围有多大呢？回答是：它的大小正好可以装下弹出面板中的所有组件。超过这个区域之外，就是“外部”。见本文最后的附图。

如果你没有更多的其它要求，看到这里，可以不再继续了。

但是，不少时候，我们需要根据自己的需求，来关闭弹出面板（比如点击弹出面板中的一个指定的按钮，才关闭弹出面板），这个时候，你需要多做一点事儿了。

往下看。



二、自己设置关闭



自己设置关闭弹出面板，有两个方法，一个是“拖”，一个是“加”。



1. “拖”



如图所示，三步：

A. 双击进入弹出面板，选定一个组件（比如按钮）。

B. 拖拽它的链接点，移动到弹出面板自己“身上”（图中的背景红框）。

C. 在交互面板上，选择“弹出状态”的参数“关闭”。









2. “加”



顾名思义，就是把弹出面板作为关闭的目标对象，加上。然后对它施加关闭。

如图所示，三步：

A. 先选中弹出面板中的一个组件（比如按钮）。

B. 在交互面板上点击加号，在弹出的交互目标树中，选择“弹出面板”，双击确定。

C. 在交互面板上，选择“弹出状态”的参数“关闭”。






好了，我们已经介绍了关闭弹出面板的全部操作。
感谢你看完。关于交互的介绍，目前，这篇是打字最多的了。



===============================================

附图，弹出面板的内容区域：