Axure9教程:可模糊搜索的多选效果

1.点击话题列表中的话题选项,上方输入框内显示选择的话题标签,最多可选择5个标签,超出将有文字提示。

2.点击输入框内已选择的话题标签的删除按钮,可以删除已选择的话题标签,并且该标签返回至下方话题列表中。

3.在输入框中输入话题关键字可自动匹配对应的话题选项。

效果预览:

1.拖入一个矩形元件,设置宽度:560px,高度:44px,圆角半径为2,命名为「input_bg」;

在其上方拖入一个文本框,隐藏其边框,命名为「Input」。

2.拖入一个中继器元件,双击进入中继器,删除自带的矩形,拖入两个文本标签,右键设置为组合并命名为「Option」;

设置中继器的布局为垂直,行间距为15,将此中继器命名为「List」。

3.再拖入一个中继器元件,双击进入中继器,设置矩形元件的宽度:70px,高度:24px,颜色:#F2F2F2,将其命名为「Selected_Option」;

拖入一个删除的图标,置于「Selected_Option」的上方,命名为「Delete」;

设置中继器的布局为水平,列间距为10,中继器命名为「Selected_List」。

4.拖入一个文本标签,置于中继器「List」上方,设置文本颜色:#EC1111,输入内容:“最多只能选择5个”,命名为「Notice」,点击右键将其设为隐藏。

所有元件如下:

中继器绑定数据。

1.在中继器「List」的样式面板中,分别填充3列数据【Topic】【Description】【State】,这里设置【State】的值均为1;

2.在右侧交互面板中,添加【每项加载时】的交互,设置文本标签【话题】的文本值为[[Item.Topic]];设置文本标签【描述】的文本值为[[Item.Description]];

3.添加【载入时】【添加筛选】的交互,目标为「List」,规则为:[[Item.State=='1']],选中【移除其它选项】;

这里设置筛选意为:当数据【State】的值为1时,筛选显示对应的话题选项,默认「List」的话题是全部显示的,所以数据【State】的默认值全部为“1”。

4.设置完成后将此中继器右键转化为动态面板,高度为252px,显示垂直滚动条。

5.同理我们也给中继器「Selected_List」填充数据并添加交互,初始状态下输入框内的话题标签是全部不显示的,所以给【SelectedState】一栏的数据值全部设置为0。

添加模糊筛选效果。

1.给文本框「Input」添加【文本改变时】的交互:

添加情形1,当文本框「Input」输入的文字不为空时,

设置动作【添加筛选】,目标「List」,名称「search」,规则:[[Item.Topic.indexOf(LVAR1)>-1]];

添加局部变量,设置【LVAR1】【==】【元件文字】「input」;

2.添加情形2,当文本框输入的文字为空时,设置动作【移除筛选】,目标「List」,过滤「search」。

字符串函数“indexOf()”能够查询字符串对象中是否能够找到参数字符串,函数的运算结果>-1代表能够找到参数字符串。

点击「List」中的话题,在「List」移除此话题选项,同时「Selected_List」中显示对应话题标签。

1.添加一个全局变量「SelectedVariable」,默认值为「0」,用来判断标签的个数。

2.双击进入中继器「List」,给组合「Option」添加【单击时】的交互:

添加情形1,如果全局变量的值「SelectedVariable」<5时,

TargetItem为中继器中的函数,意为目标数据行的对象。

3.继续给上述交互添加情形2,全局变量「SelectedVariable」的值≥5时,添加动作【显示】提示文本「Notice」。

全部交互如下:

点击中继器「Selected_List」中的「Delete」按钮,在「Selected_List」移除此选项,同时「List」中显示对应选项。

双击进入中继器「Selected_List」给删除按钮添加「Delete」添加【单击时】的交互

THE END
1.Axure9基础教程2:打开AxureRP9,注册登录账号Axure RP 9安装完成之后,就可以正式使用了。不清楚安装、汉化和激活的朋友可以看一下我们前面的文章:Axure9基础教程1:Axure RP9的安装与激活。 安装完成之后,找到Axure 9的图标,双击即可打开这个软件。如果在桌面生成了快捷方式,直接打开快捷方式的图标即可。 https://m.douban.com/note/740234537/
2.Axure9零基础自学到精通2024网易2024Axure教程,全新升级,手把手教学。课程中遇到问题可直接与老师沟通,一对一解答。参考资料:林老师Axure设计指南 https://axhuhttps://study.163.com/course/introduction/1003228073.htm
3.Axure9入门篇:Axure9工作界面概述–Axure中文学习网Axure9软件安装成功后,我们就针对软件的工作界面进行一个初步的认知。 先来一张Axure9的工作界面截图 通过截图,我们可以将Axure9的工作界面分为以下11个部分 1、菜单栏; 2、基本工具栏; 3、样式工具栏; 4、页面面板; 5、概述面板; 6、元件面板; https://www.axure.com.cn/79326/
4.Axure9.0基础教程:史上最详细的元件说明,建议你认真看完(一摘要:元件作为Axure 9.0的基础功能,线框图的绘制与交互事件的设置都离不开它,熟练掌握并了解每个元件的功能及用途,对原型设计来说尤为重要。这是一篇细到令人发指的关于元件的使用说明,不仅有基础的使用知识讲解,也有一些使用技巧的说明。Axure 9.0与8.0相比并没有增加新的元件,但9.0的元件却更好用,用起来更顺手https://www.jianshu.com/p/f596b02b496e
5.AxureRP9使用指南axurerp9使用教程文章浏览阅读1.5w次,点赞22次,收藏90次。axure 9 常有的交互组件,掌握提到的这几种基本够用_axure rp9使用教程https://blog.csdn.net/m0_72791534/article/details/127937791
6.Axure9下载安装及汉化包教程知识库AxmaxAxure9下载安装及汉化包教程 Axure RP 9是一款交互原型设计软件,功能强大,适合网站开发、产品设计、办公等多种场景使用,帮助用户简化表单的布局以及快速创建流程图、示意图、HTML模版、网站架构图等原型,大大提高用户的办公效率。Axure RP最大的特点就是界面简单,用户能够清晰的看到主菜单、工具栏、模块面https://axmax.cn/news/158
7.axurerp9基础教程51CTO博客已为您找到关于axure rp9基础教程的相关内容,包含IT学习相关文档代码介绍、相关教程视频课程,以及axure rp9基础教程问答内容。更多axure rp9基础教程相关解答可以来51CTO博客参与分享和学习,帮助广大IT技术人实现成长和进步。https://blog.51cto.com/topic/axure-rp9jichujiaocheng.html
8.AXURE9视频教程(适合产品经理交互产品设计UI)本课程为Axure9的精讲课程,通过对Axure9软件的各类功能、操作、元件、函数等讲解,使所有对于Axure9感兴趣的用户充分的了解和掌握软件的功能,让用户对Axure9有一个全新且相对透彻的理解。 初级 AXURE 9 产品经理 产品设计 UI 134831人学习 43课时 06小时25分钟54秒课程总时长 https://www.php.cn/course/1344.html
9.axurerp9有哪些功能?axurerp9基础教程axure rp9基础教程 使用axure rp软件的一定都知道axure rp9版本的存在!axure rp9是Axure公司在2019年度的时候发布上线的一款axure rp软件!axure rp9从上线到目前是用来看,已经是趋于一个稳定的状态了! 当然,当中也不乏有不少的新人在初次接触axure rp9时是不了解的!接下来我们就来说一说axure rp9!具体axure https://www.yutu.cn/news_34258.html
10.Axure9高级教程:Axure函数使用手册.pdfAxure 9高级教程:Axure函数使用手册 Axure 9.0为我们提供了大量的函数,正式因为有了这些函数配合各种动作,才使得Axure作出的原型交互更丰富,也是Axure区别于其他原型工具的一个显著特征。虽然Axure提供的函数不多,我们也不需要都记住,记住一些自己常用的就可以了。我们可以将这些函数列表作为一个“字典”工具,使用时再进https://www.iteye.com/resource/tangn08-12274550
11.Axure9文本如何设置行间距与字间距,axure怎么调整字体行间距《Axure9基础教程:设置行间距与字间距》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强操作实例,页面,字间距等多维度案例或实操来进行更多的学习;此教程是由小马在2021-08-24发布的,目前为止更获得了 2 个赞;如果你觉得这个能帮助https://www.bjxku.com/study/3163.html
12.当当阅读器数 些 单 规 P 讲 设 通 , P 见 司 专 原 9 了 详 进 功 进 互 师 0 通 书 教 章 ” 中 方 以 读 例 - 4 6 业 习 9 法 型 蕾 P A 绘 P 品 “ 9 绘 通 校 ” 互 目 复 灵 的 或 用 读 各 同 型 9 P 9 本 e 交 文 读 互 编 手 完 ” 案 者 图 华 7 握https://e.dangdang.com/ebook/read.do?productId=1901152488
13.AxureRP9基础入门教程其实很多时候我们很容易把教程做得太庞杂而使得同学们迷失了重点,被复杂的理论吓到。推己及人,我在还是入门基础的时候,只需要先把最核心的两点内容搞清楚,学起来就简单多了:简单的了解这个软件和学会这个软件的基础操作。所以如果你问我,什么是好的AxureRP9 基础入门教程,我想就是用简单基础的语言,去讲授基础入门https://js.design/special/article/axurepr9-basics-tutorial.html
14.axure9授权码序列码激活教程步骤macwk.com 授权密钥(Key): Cpvm3Fe/TOnZY2agskB3AxZe8a16QrW+NL2CUY9v9F+jyaOkv2suqshcVC81ZFha Team Edition 被授权人(License): macwk.com 授权密钥(Key): eZZPVm1LL6KcZ6XpOLFfGezpdl9c49EAdOYdoEsNSA2TJGHu7tA5Voyyj+h1nPLo axure9comEditionKeyLicensemacwknbsp密钥序列授权授权人教程步骤激活点击https://axurehub.com/10824.html
15.AxureRP9教程—基本功能介绍Axure RP 9 教程—基本功能介绍 大家好,最近小编了解到了一款为了让负责定义需求和规范、设计功能和接口的专家可以快速创建应用程序或web站点的线框图、流程图、原型和规格说明文档的专业快速原型设计工具。很是好用,接下来跟大家了解下Axure?RP?9?的基础功能进行一定程度的介绍。https://www.mydown.com/tools/331/1361025831.shtml
16.Axure9怎么设置web尺寸?Axure页面尺寸设置方法图形图像软件教程在Axure9中,新增了页面尺寸设置功能,可以设置多种内置的设备尺寸,也可以自定义尺寸大小,通过设置页面尺寸可以设置页面边界,预判出内容多少和信息密度,便于页面排布、对齐,从而更聚焦于内容设计。 Axure9可以设置画板的尺寸,如果你要做web的原型,可以先设置正确的web尺寸,该怎么设置呢?下面我们就来看看详细的教程。 https://www.jb51.net/softjc/778767.html
17.Axure9怎么设置黑色主题?Axure 9 怎么设置黑色主题,主要操作步骤如下: 1、打开Axure 9,点击文件; 2、点击偏好设置; 3、选择黑暗模式; 4、确定后,设置完成; 注意/提示 好啦,本次关于“Axure9 怎么设置黑色主题?”的内容就分享到这里了,跟着教程步骤操作是不是超级简单呢?更多关于软件使用的小技巧,欢迎关注小溜哦!https://zixue.3d66.com/article/details_141718.html
18.AxureRP9软件下载和安装教程腾讯云开发者社区Axure RP 9软件下载和安装教程 Axure RP 9软件简介: Axure RP 9软件服务于各类商品的原型设计服务,从本地项目再到实际的网页站点,所有的图像都得按照规矩来办事,尤其需要注意好多数线框图的自主定义设计能力,掌握文档之间的关键联系,及时去形成重要的数据归类,合理使用基础版式以处理多个场景下的优质图像内容。https://cloud.tencent.com/developer/article/2144609