中继器系列之下拉选择框 获赏10金币 案例教程 基础教程

Brose 普通用户 8月前 1365

一、前期准备

*   电脑:mac和win都可以(案例以win系统为例,mac类似)

*   软件:Axure 8.0

*   熟练程度:中级(元件使用,函数调用)

*   相关使用元件:矩形、中继器动态面板、文本框。

二、整体效果展示


三、正文(制作过程)

案例一:

直接选择类型(适合下拉菜单内容固定,且个数有限)【基础内容】

思路:中继器充当容器,鼠标点中中继器的某一个数据,赋值到下拉菜单栏的背景框。(系统也自带了同种类型的组件,但是中继器实现可以展示一些系统自带没有的效果)。

①步骤分解

创建合适大小矩形、中继器(保证中继器宽与矩形宽度一致),方向箭头。

配置中继器内容,进行中继器的赋值(下拉菜单内容)

配置中继器的鼠标单击事件

调整隐藏/显示关系

②教程

1、创建矩形200*40(尺寸后期可以根据需要调整,调整和中继器编辑页面的矩形宽度保持一致)。

2、创建中继器,双击中继器进入中继器编辑页面,在中继器编辑页面调整矩形尺寸为200*40。

3、进行中继器赋值操作。

4、进行鼠标点击事件。


5、细节调整:

1、给中继器编辑页面中的矩形设置选中状态变化。添加鼠标移入移除的的选中切换。



2、配置图标的旋转方向和中继器的显示和隐藏。

中继器在初始的状态下是隐藏的,点击下拉菜单的矩形,中继器显示。当用点击中继器内容时,完成第4步赋值操作后,隐藏中继器。

图标开始状态,方向朝上,点击下拉菜单的矩形,设置旋转图标。完成赋值后再次反方向旋转图标。

案例二:

滑动选择类型

①步骤分解

创建合适大小矩形、中继器(保证中继器宽与矩形宽度一致),方向箭头。

配置中继器内容,进行中继器的赋值(下拉菜单内容)

配置中继器的显示区域--动态面板实现

配置中继器的鼠标单击事件

调整隐藏/显示关系

②教程

保持案例一的操作步骤不变,在将中继器内容转换为动态面板,调整动态面板的高度,设置动态面板的垂直滚动条。


案例后记:在显示隐藏的时候可以进行动态面板的显示隐藏替代中继器的显示隐藏(中继器相当于动态面板的子元素)

案例三:

翻页选择类型

①步骤分解

创建合适大小矩形、中继器(保证中继器宽与矩形宽度一致),方向箭头。

配置中继器内容,进行中继器的赋值(下拉菜单内容)

配置中继器的显示区域--动态面板实现

添加中继器多页显示的每页显示行数,和初始的显示页数。

配置中继器的鼠标单击事件

调整隐藏/显示关系、

②教程

保持案例二的操作步骤不变(要保持动态面板显示后,展示内容可以全部展示),设置中继器内容多页显示,添加上下翻页按钮。

配置上下翻页事件:设置当前显示页面,(以上一页举例)


案例后记:也可以不使用动态面板。使用好处:可以将上下翻页按钮和中继器同时进行显示隐藏操作(只用设置动态面板的隐藏和显示)。如果不使用,要对三个组件进行显示隐藏的操作关联。

 案例四:

添加模糊检索的下拉选择类型

①步骤分解

创建合适大小矩形、中继器(保证中继器宽与矩形宽度一致),方向箭头。

配置中继器内容,进行中继器的赋值(下拉菜单内容)

配置中继器的显示区域--动态面板实现

配置中继器的鼠标单击事件

添加文本框输入,在文本框进行文字发生变化的时候匹配中继器中文字,从而达到赛选匹配的效果。

采用[[Item.Column0.indexOf(word)>-1]]的匹配原则【个人理解:indexOf(word)是Axure中正则匹配的函数,在axure中,如果返回参数为-1,表示不存在。】

其他解释:indexOf(‘searchValue’,start) 用途:从左至右获取查询字符串在当前文本对象中首次出现的位置。未查询到时返回值为-1。 参数:searchValue为查询的字符串;

 调整隐藏/显示关系

②教程

在案例二的基础上添加文本框,进行文本框输入的判断匹配。(匹配过程:添加中继器筛选,条件为indexOf函数匹配唯一的中继器字段)。



其他:点击清除按钮给移除筛选,并且文本框赋值为空值。达到重置的效果。


案例后记:indexOf函数可以配合中继器实现多种筛选,并且在表格等多种情况下适用。(“臣服”与中继器+函数的强大,哈哈)

文章后记:之前一直文章中没有做文字的筛选模糊匹配,于是最近在看下拉菜单的多种样式,就尝试进行制作。函数+中继器可以实现--“真香系列”。

源文件下载地址:见附件


axure商城
上传的附件:
快速回复
打赏排行 用户名 打赏金额
第1名 黯黄老师 10金币
最新回复 (28)
  • 猎奇 普通用户 11天前
    0 引用 29
    非常感谢
  • weijianguo 普通用户 1月前
    0 引用 28
    谢谢
  • weijianguo 普通用户 1月前
    0 引用 27
    不错 谢谢
  • 安风 普通用户 1月前
    0 引用 26
    6
  • 15079208394 普通用户 1月前
    0 引用 25
    感谢
  • EDGEJING 普通用户 2月前
    0 引用 24
    感谢分享
  • 卡☆卡 普通用户 2月前
    0 引用 23
    666
  • Demon_1586777772 普通用户 3月前
    0 引用 22
    感谢
  • 千寻_1579416321 普通用户 3月前
    0 引用 21
    多谢
  • christow88 普通用户 3月前
    0 引用 20
    哈哈哈哈哈哈哈哈哈哈或或或或
  • 你被群主移出群聊 普通用户 3月前
    0 引用 19
    666
  • 单单 普通用户 3月前
    0 引用 18
    谢谢
  • yoyo123 普通用户 4月前
    0 引用 17
    感谢分享
  • Karen321 普通用户 5月前
    0 引用 16
    谢谢
  • ZZH 普通用户 5月前
    0 引用 15
    图片不显示    不符合投稿要求。
  • 小程怪难瘦 普通用户 6月前
    0 引用 14
    感谢
  • R_1577172387 普通用户 6月前
    0 引用 13
    我这里面标记行后面带的是where,不是this
  • fang635295364 普通用户 6月前
    0 引用 12
    非常感谢
  • Z。_1577784581 普通用户 6月前
    0 引用 11
    非常感谢
  • fuhue 普通用户 7月前
    0 引用 10
    感谢
  • qhdwhw 普通用户 7月前
    0 引用 9
    666666
  • Wujungang 普通用户 7月前
    0 引用 8
    谢谢
  • 15364961209 普通用户 7月前
    0 引用 7
    非常感谢
  • 蓝雨飘飞 普通用户 7月前
    0 引用 6
    非常感谢
  • qinggg 普通用户 8月前
    0 引用 5
    非常感谢
  • Kingsley 普通用户 8月前
    0 引用 4
    谢谢
  • 黯黄老师 管理员 8月前
    0 引用 3
    已奖励10金币,感谢你的投稿分享!
  • 黯黄老师 管理员 8月前
    0 引用 2
    图片不显示  不符合投稿要求。
返回
axure商城