收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 5442|回复: 1

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

[复制链接]
发表于 2016-2-17 09:56:16 | 显示全部楼层 |阅读模式
弹出面板,是我们经常使用的组件。今天,就来说说关闭弹出面板的事儿。

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



一、自动关闭



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

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

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

如果还有需要,往下继续:

自动关闭策略一共有三种,分别是:

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

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

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

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



很方便,不是吗?

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

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

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

往下看。



二、自己设置关闭



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



1. “拖”



如图所示,三步:

A. 双击进入弹出面板,选定一个组件(比如按钮)。

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

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









2. “加”



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

如图所示,三步:

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

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

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






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



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

附图,弹出面板的内容区域:

发表于 2016-12-2 14:26:21 | 显示全部楼层

弹出面板,是我们经常使用的组件。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-10-20 08:39 , Processed in 0.077926 second(s), 7 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表