axure9实用操作实现索引列表鼠标点击其中一项高亮显示

时间:2024-05-21 09:32:52

1.需求说明

实现索引列表鼠标点击其中一项高亮显示
axure9实用操作实现索引列表鼠标点击其中一项高亮显示axure9实用操作实现索引列表鼠标点击其中一项高亮显示
如以上两图,当鼠标点击索引列表中某一项时,该行进行高亮显示,点击另外一行时,高亮行进行切换

2.实现步骤

  1. 创建两个不同颜色内容相同的图层,位置相同,如下概要视图,"数字"与"选中数字"内容和位置都一样,其中"选中数字"的颜色为蓝色高亮,"数字"的颜色为默认灰色,两个图层是重叠的, "数字"在"选中数字"的上方
    axure9实用操作实现索引列表鼠标点击其中一项高亮显示
  2. 给"数字"下成员"数字1"添加交互事件,如下图,给"数字1"添加3个交互事件
    a.“鼠标按下-置于顶层” 交互事件,将"数字"置于顶层,该交互事件可以实现鼠标按下时,"数字"图层上移,页面上展示的效果是全部都没有选中
    b.“鼠标松开-置于顶层” 交互事件,将"选中数字"下的"数字1选中"置于顶层,该交互事件可以实现鼠标松开时,"数字1选中"图层上移,页面上展示的效果是"数字1"被选中了,高亮显示
    c.“载入时-置于顶层” 交互事件,将"选中数字"下的"数字1选中"置于顶层,该交互事件实现页面打开使,默认"数字1"被选中axure9实用操作实现索引列表鼠标点击其中一项高亮显示
  3. 给余下的"数字"下成员"2、3、4、5、6"添加交互事件,如下图,给"数字2"添加2个交互事件
    a.“鼠标按下-置于顶层” 交互事件,将"数字"置于顶层,该交互事件可以实现鼠标按下时,“数字"图层上移,页面上展示的效果是全部都没有选中
    b.“鼠标松开-置于顶层” 交互事件,将"选中数字"下的"数字N选中”(N分别代表2、3、4、5、6)置于顶层,该交互事件可以实现鼠标松开时,"数字N选中"图层上移,页面上展示的效果是"数字N"被选中了,高亮显示
    axure9实用操作实现索引列表鼠标点击其中一项高亮显示
    给数字2~6添加完雷同的交互事件后,当鼠标点击索引列表中某一项时,该行进行高亮显示的效果配置就完成了