Axure中继器实现二级导航栏

Posted 2023-04-15

参考技术A         今天使用中继器来实现一个简单的二级导航栏。这是一款折叠形可变导航，一般应用在系统页面左侧。它的最大优势是：1、菜单根据中继器配置的列表动态加载整个导航菜单（后期系统维护升级可快速增减菜单）。2、二级导航菜单数量不等也可以正常工作（突破局限）。
        下面以制作一个简单的后台管理系统导航为例。

一、准备元件

1、将工作界面划分为三块：头部放一个动态面板，里面放系统logo和系统名称；左侧导航区域放一个动态面板，里面放一个中继器；右侧放一个内联框架(动态交互区域)。

2、双击中继器，进入中继器编辑模式。复制矩形元件并粘贴多三个，共四个按右对齐排列。如下图所示，一级导航（w:180px，h：30px），二级导航（w:160px，h:25px）。注意，各矩形件元件间的行高是10px，各矩形元件的填入文字及命名见图。
将所有二级导航选中，将它们设置为一个组合，命名为：组合_二级导航。这个组合用于点击一级导航进行交互时，实现组合整体展开/收缩（隐藏/显示）。
再将它们设置为一个选项组，命名为：选项组_二级导航。这个选项组用于点击二级导航进行交互时，实现只选中一个二级导航。 注意 ：要将所有二级导航选中，右键选中：选项组，命名为：选项组_二级导航。 不是将它们的组合设置为选项组 。
同样，将一级导航也设置为一个选项组，命名为：选项组_一级导航。

二、设置元件样式

1、设置中继器的行距。即间距为10px。

2、设置一级导航和二级导航的鼠标悬停、选中的样式。一级导航和二级导航鼠标悬停样式设置， 填充 颜色为：FFCC99；一级导航选中样式设置， 字色 为：FFCCCC；二级导航选中样式设置， 填充 颜色为：FFCCCC;

三、设置导航数据。以后系统升级，增减导航就是通过设置导航数据来完成。

1、设置中继器样式数据。选中：中继器，选中：样式。

2、设置样式数据列名。双击第一列：Column0，重新命名为：FirstLevel。这一列对应的是一级导航。双击第二列，命名为：SecLevel1。重复操作，得到 SecLevel2、SecLevel3。SecLevel1、SecLevel2、SecLevel3分别对应的是二级导航1、二级导航2、二级导航3。

3、设置样式数据内容。这是导航显示的结构数据，或者说，导航将根据设置的样式数据内容来显示。以后系统升级，只要修改这个数据内容即可。根据需求，这里设置的数据如下：

四、设置交互

1、设置载入时事件。在载入元件时，根据显示样式数据设置的值作为导航文本。
选中：中继器，选中：交互。选择事件：载入时，选择：设置文本，选择：添加目标。选中：一级导航。点击 fx，弹出编辑框。如下图：

删除中间输入框中的：一级导航。点击：插入变量或函数，选中：Item.FirstLeve，得到结果。如下图：

同样，设置二级导航1、二级导航2、二级导航3 的 fx 值分别为 Item.SecLeve1、Item.SecLeve2、Item.SecLeve3。得到结果，如下图：

2、设置每项加载事件。在每项加载时，根据显示样式数据设置的值显示或隐藏二级导航。从而实现二级导航菜单数量不等也可以工作。
选中：中继器，选中：交互。选择事件：每项加载，选择：启用情形。添加条件，第一个框选中：值，点击第二个框：fx，选中：Item.SecLevel1。如下图：

在此情形下，添加动作，选择：显示/隐藏，添加目标：二级导航1，选中：隐藏动作。这个设置是实现当二级导航1对应的数据值为空时，隐藏该二级导航菜单选择项。同样，设置二级导航2、二级导航3。得到结果，如下图：

3、设置二级导航的组合整体展开/收缩。即当点击一下一级导航时，或展开，或隐藏其下面全部二级导航。
选中：一级导航，点击：新建交互，选择：单击时，选择动作：显示或隐藏。选择目标：组合_二级导航，选择：切换。设置参数，如下图：

如果想实现初次加载导航时，二级导航是折叠的。即只看到一级导航。则可以将二级导航的组合设置为隐藏。
双击：中继器，选中：组合_二级导航，右键，选择：设为隐藏。

4、设置二级导航的单击事件。二级导航选中时，父级也选中。同时，在内联框架中打开链接页面。
选中：二级导航1，选择事件：单击时，点击：启用情形，点击：添加条件，选择：值，点 fx，点击：插入变量或函数，选择：Item.SecLevel1，设置值：角色列表。添加动作：设置选中，选择目标：二级导航1，值为真。添加目标，选中：一级导航，值为真。添加动作：框架中打开链接，选择元件：内联框架，选择页面：角色列表。

同样，添加情形2，设置二级导航1对应的第二行数据：系统日志。如果有第3行...，也同样设置。得到结果，如下图：

同样，设置：二级导航2、二级导航3 的单击事件。

至此，使用中继器来实现二级导航栏制作完毕。按F5预览下效果。

织梦DEDECMS调用导航栏的顶级栏目二级栏目及三级栏目

织梦调用导航菜单栏目，随着javascript的运用，导航栏的子栏目越来越多，在dedecms如何实现这些栏目的调用呢?

　　1. 一般导航栏目的调用，该类栏目只有主栏目，没有子栏目，这类栏目一般适用于企业网站和个人网站。其样式图如下：

 

　　该类栏目的dedecms调用方法比较简单，如下：

{dede:channel type=‘top‘ currentstyle="
<li class=‘thisclass‘><a href=‘~typelink~‘>~typename~</a> 
</li>"} 
<li><a href=‘[field:typeurl/]‘>[field:typename/]</a></li>
{/dede:channel}

 

注释(参数)： typeid=‘0‘ 栏目ID; reid = ‘0‘ 上级栏目ID; row = ‘100‘ 调用栏目数;col = ‘1‘ 分多少列显示

(默认为单列);type = ‘son | sun‘ son表示下级栏目,self表示同级栏目,top顶级栏目; currentstyle = ‘‘ 应用样式"。

　　这种方法会把后台的顶级栏目都调用出来，如果想有些栏目不被调用出来，可以加上参数typeid=‘所要调用栏目的

id’。对于调用指定的栏目可以用下面的标签：

{dede:type typeid=‘指定栏目的id’}
<a href="[field:typelink /]">[field:typename /]</a>
{/dede:type}

 

2. 带有二级子栏目的栏目的调用，这类网站用于信息分类比较多的网站，其样式图如下：

 

　　这种栏目是比较常见的，其dedecms调用代码如下：

{dede:channelartlist typeid=‘1,2,3,6,7,10,8,11‘ row=‘10‘}    //typeid=‘顶级栏目的id’   
<li class="tab dropdown"><a  id="{dede:field name=‘id‘/}"  
href="{dede:field name=‘typeurl‘/}" class="tablink arwlink">
{dede:field name=‘typename‘/}</a>   
<ul class="subnav">      
{dede:channel type=‘son‘ noself=‘yes‘}     
<a href="[field:typelink/]">[field:typename/]</a>  
{/dede:channel}   
</ul>   
</li>     
{/dede:channelartlist}

 

 

对于没有子栏目的顶级栏目可以使用调用指定栏目的标签：

 

{dede:type typeid=‘指定栏目的id’}
<li>
<a href="[field:typelink /]">[field:typename /]</a>
</li>
{/dede:type}

 

 

 

这样可以实现上述栏目的调用。

　　3.有三级子栏目的调用代码，这类导航适用于商城等，其样式图如下：

　　对于这种栏目的调用代码如下：

 

<li>
<h3>
{dede:type typeid=‘2‘}<a href=‘[field:typelink/]‘ class="depth_1">
[field:typename/]</a>{/dede:type}
</h3>  //顶级栏目的调用                  
<ul class="children" style="display: none; "> {dede:channelartlist typeid=‘top‘  typeid=‘2‘}  
 //二级栏目和三级栏目的调用这里typeid=‘子栏目所属的顶级栏目的id‘                    
<li>
<h3 >
<a href=‘{dede:field name=‘typeurl‘/}‘ class="depth_2">
<span class="icon10"></span>{dede:field name=‘typename‘/}
</a>
</h3>                                
<ul>                                 
{dede:sql sql=‘Select * from dede_arctype where reid=~id~  ORDER BY id limit 0,20‘}
  //limit 起始三级栏目id  显示栏目的条数                                 
<li><a href="[field:typedir function=‘str_replace("{cmspath}","",@me)‘/]"  
class="depth_3">[field:typename/]</a>
</li>                                 
{/dede:sql}                                 
</ul>                   
 </li>                   
{/dede:channelartlist}                   
</ul>           
</li>

 

 

 

 

　这三类基本上包括了导航栏的调用方式，而且都经过测试可以放心使用。