许多网站背景或B/S结构应用系统通常具有这样的功能：左侧是导航菜单，当单击菜单时，页面将以标签（也称为标签）的形式打开。右侧主要区域。然后单击第二个菜单，右侧的主选项卡将打开第二个选项卡以显示该页面。如果您不熟悉此功能，可以查看邮箱系统的Web版本（例如简单等等）。今天分享的案例是教你使用转发器和内联框架在网站的背景下实现多页签名。

1.原型分析

这个功能看起来很简单，但是如果你深入研究它，你会发现很多逻辑。

问题1：单击菜单以显示主区域中与菜单对应的选项卡和页面。

扩展名1：如果菜单对应的页面未打开，请在新选项卡中打开页面;

分机2：如果菜单对应的页面已打开但未显示，则页面将显示在原始选项卡中;

扩展3：如果打开并显示与菜单对应的页面，则不执行任何操作。

问题2：需要同步选项卡和页面。

问题3：打开多个选项卡后，单击选项卡以切换相应的页面显示。

问题4：需要突出显示与当前显示页面对应的选项卡。

问题5：单击选项卡上的关闭图标以关闭选项卡和相应的页面。

扩展名1：如果当前显示的页面已关闭，则关闭后会显示最后一个打开的页面;

扩展2：如果当前显示的页面未关闭，则关机后仍会显示当前页面。

2.设计理念

此功能由三部分组成：菜单部分，标签部分和显示页面的一部分。让我们考虑使用哪些组件来实现这三个部分。

对于菜单部分：有许多可选组件，这里没有列出，只要基本上可以点击组件，但使用不同组件的结果是过程的复杂性和灵活性。但考虑到原型的多功能性，菜单项在不同情况下是不同的，因此请考虑使用更灵活的转发器组件来制作菜单。

对于标签部分：因为这部分将涉及标签的动态增加和减少，所以不要犹豫选择转发器。

对于显示页面的一部分：因为显示不同页面需要不同的菜单或标签，所以它基本上是动态显示。要考虑的组件有三个选项，一个是内联框架，另一个是动态面板+内联框架。第三个是转发器+内联框架，因为内联框架是必不可少的，因为要显示页面。你如何选择这三种方案？通过简单的比较，您可以发现第三种方案比第一种方案更宽，比第二种方案更简单，因此采用第三种方案。

然后，在确定了三个部分中使用的所有组件之后，下一步是基于这个想法练习（踩坑）。

本案例的三个部分都是使用中继器实现的。优点是配置简单，灵活性和可重用性高。如果你尝试其他组件，你会明白使用中继器实际上是一个时间问题。

3.生产过程

3.1准备三个中继器

在画布上拖动三个中继器，并将它们命名为“Menu”，“>选项卡“和”页面“，然后按照以下步骤进行设置。

（1）设置“ldquo;菜单”中继器

将转发器的列设置为“id”rdquo; （其值必须是唯一的），< ;; menu" （存储菜单名称）和“url” （存储菜单指向的页面链接）并添加一些自定义数据，请遵循中继附带的“矩形”组件样式。修改转发器的“每个加载时间”用例。

（2）设置“ldquo;标签”中继器

将转发器的列设置为“id”rdquo;和< ;; menu”，并清除随附的数据。转发器附带的“矩形”元素应由您自己设置。修改转发器的“Every Item loading time”用例。

（3）设置“ Page” Relayer

将转发器的列设置为“id””，“url”和“url”。和< ;; sort“ （存储排序编号），清除自己的数据，保留一个空行（或在网址中定义初始页面），删除继电器设备中的矩形，并拖入内联框架，修改转发器的“每个加载时间”用例，修改转发器的分页样式（多页显示，每页的项数1）。

3.2实施点击菜单打开标签和页面

返回“菜单”;中继器，设置“矩形”。在“矩形”上零件;用例，插入转发器“tab”中。 " " " "页面"一行数据。  标签”在转发器中插入的是当前菜单“ld”; id”和“菜单”，使新标签可以显示菜单名称，“页面”&nd;插入转发器当前菜单的“id”rdquo;和“url”，以便添加的页面可以在其内嵌框架中显示与菜单对应的页面。

这时，我们可以预览原型。单击菜单时，您会发现向后连续添加选项卡，并且不显示页面（或者仅显示与第一个菜单对应的选项卡，并且不再显示后续选项卡。），它不会没关系，我们现在将总结原型的问题，然后在接下来的步骤中逐一解决它们。

事实上，这里会有很多问题，有简单和复杂，这里我会根据问题的优先级解决三个问题，因为这三个问题都解决了，我们的原型可以在需求相对较低时停在这里。 ，已经能够满足基本的演示。然后这三个问题是：

问题1：页面显示不正确

问题2：当我点击打开的标签

问题3：我希望可以突出显示当前打开的选项卡

3.3解决页面无法正常显示的问题

熟悉转发器的朋友应该立即知道为什么页面显示不正确，因为当我们在前面设置转发器时，我们配置转发器的分页属性，即每页显示一个项目，我们就是单击菜单，每次单击都会添加一个像转发器一样的项目，但默认情况下会列出添加的项目，即第2页，第3页，第N页。所以我们只能看到第一个菜单的页面，然后单击菜单的页面将不可见。

解决问题很容易。我们只需要在点击前面后排列菜单中插入的项目。然后我们使用转发器的排序功能。请按照以下步骤继续。

首先添加一个全局变量< ;; sort” （或将默认的全局变量名称更改为“sort””），然后修改菜单的“鼠标单击”事件。点击菜单时，给出排序值+1，并将该行添加到“页面”中。转发器，将排序值设置为等于新的全局变量排序值。这允许每个打开的页面具有比前一个更大的排序值，然后使用转发器的排序功能将最后打开的页面放在前面。

然后，我们将排序功能添加到转发器< ;; page“，并且可以在转发器< ;; loading”中执行分类动作。

这时，让我们再次预览。无论单击菜单如何，我们都可以发现页面可以正常显示。解决了上述问题1。然后解决问题2.

3.4单击选项卡切换页面

这个问题更容易解决。根据上一步中页面的显示逻辑，单击选项卡时，只需更新“页面”中继中的排序值（基于最新的全局变量排序值）。 +1）。

3.5新打开的选项卡突出显示

突出显示的样式我们可以设置选项卡的形状以“选择”要实现的样式，如果它是当前单击的菜单的选项卡，则将其设置为选择以激活其选定的样式。所以问题是，你什么时候设置要选择的标签的形状？你怎么知道要设置哪个标签？

这个问题可能很简单或很复杂。在简单的情况下，我们只考虑单击菜单或单击选项卡切换显示，单击哪个菜单或选项卡，并选择相应的选项卡，只要通过菜单ID和选项卡判断即可。能够。但是，有一个复杂的情况需要考虑，也就是说，如果我关闭具有所选状态的选项卡，我该怎么办？谁应该留在剩下的标签中？显然以前的解决方案无法解决这个问题。对于一个问题，我们仍然需要制定一个长期计划。

当我在寻找这个问题的解决方案时，我走了很多弯路并尝试了N路。其中一些根本没用。他们中的一些人完美无瑕地工作，但有时他们失败了。但幸运的是，到最后，找到了一个完美的解决方案。计划如下：

首先，当点击菜单或标签时，记录其id以形成一个id字符串，如[id1] [id2] [id3] [id4]，但根据后来的实际经验，记录的顺序需要遵循以前的顺序，即最近点击的菜单或标签的ID首先放置。

然后，当加载“页面标签”的每个项目时，判断当前标签的id是否等于id字符串的id，如果是，则选择它，如果不是，则不执行任何操作。如果删除了第一个id（当选项卡关闭时），则第二个id（即前一个选项卡）成为第一个ID，这也解决了关闭选项卡的问题。签署突出显示的问题。

具体到原型，你需要创建两个全局变量“ld”; id”和“ids”，id用于记录当前id，id用于记录id字符串，然后在菜单和选项卡中“当鼠标点击”时“rdquo;添加操作以更新事件中的ID。最后，执行判断并在每次加载“页面”时选择设置;

“点击菜单时””使用案例：

标签的“点击后””使用案例：

标签的“加载时”用例：if [lids; [[ids.indexOf（Item.id）]]”==” 0″表示ids中的当前id位置为0（0代表第一个位置），设置所选效果。

此时您需要添加一个Case2，即使上述条件不满足，我们仍然需要在选项卡上显示菜单名称。

这时，让我们预览页面。选项卡的选择效果是否已经出现，但仍然存在问题，即切换选项卡时，选项卡的选择效果不会在选项卡之间切换。为什么？什么？这是因为“选项卡”未刷新（即不重新加载）。我们每次单击选项卡时都需要重新加载它。实施是“标记””转发器添加了更新操作（无需添加任何新数据，只需添加此类操作）。

这次，再次预览，切换标签时，所选效果也会切换。到目前为止，这个原型基本上可用于演示，但如果你想继续改进并且不希望原型有一些明显的错误，那么我们需要继续改进并进一步解决原型问题：

问题4：重复单击菜单将打开重复选项卡，我们只想打开选项卡

问题5：我想实现关闭选项卡的功能

3.6解决重复打开标签的问题

要解决此问题，我们只需要在单击菜单时添加判断条件。如果菜单未打开（或打开和关闭），则执行添加操作;如果菜单已打开，则仅执行更新操作。 （更新ID和页面排序）。那么菜单目前是否开放的判断是什么？答案是通过转发器的标记功能，菜单在打开时被标记，标志在关闭时被取消。

修改矩形中“转发器”中的“菜单”“当鼠标单击”时“用例Case1，增加判断条件并标记动作。

添加Case2并在标记菜单时执行更新。

通过上述步骤，您可以避免在同一菜单中打开多个重复的选项卡，并预览原型以查看效果。

3.7关闭标签

由于之前的基础已经确定，关闭tab功能的实现相对简单。你只需要在ids中删除相应的id（使用replace函数，用null替换id中的id以实现删除的效果），删除选项卡。和页面（转发器的删除行功能），然后取消菜单标记（转发器的取消标记功能）。 （如果没有关闭按钮，现在'; tab”在转发器中添加关闭图标）

点击按钮时设置“关闭按钮””用例。

此时，原型已经基本完成，然后去预览，随意点击菜单，切换或关闭标签，你会发现效果非常好。当然，仍然有一些区域可以进行优化，例如控制最多打开的选项卡数量，例如反复单击当前显示的选项卡而不刷新页面等，所以这些问题留给大家自己学习，当然，我沟通有问题。

4.经验总结

实际上，无论是低保真还是高保证，都没有统一的原型绘图标准。这就像做一个项目，同样的需求，一个月一个月，一周一周。原型也是同一个功能，根据不同的目的可以有不同的绘图方法，可以简单而复杂。此外，对于一些复杂的原型，在测试您的工具熟练程度时，它还会测试您的逻辑思维能力。 Axure RP不仅仅是一个原型工具。绘制原型不仅仅是一个“绘图”原型。

专栏

RAEDME大鹏，每个人都是产品经理专栏作家，微信公众号raedme

这篇文章最初发表。未经许可，禁止复制。

地图来自网络