• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >axure > Axure7.0教程(四)中继器的使用(4)

Axure7.0教程(四)中继器的使用(4)

作者:小楼 字体:[增加 减小] 来源:互联网 时间:2017-06-14

本文主要包含axure7.0中继器教程,axure7.0中继器,axure7.0视频教程,axure7.0教程,axure7.0教程实例等相关知识,小楼希望在学习及工作中可以帮助到您

Axure rp7.0的新元件中继器(repeater)的功能中我们分别讲解了增、删、改三个功能,今天我们来讲一下剩下的功能:

1、 按输入的文字筛选;

2、 按指定条件(某一列)排序;

3、 翻页功能。

本教程示例:axure7.0教程_小楼作品(四)中继器的使用(4)

在学习本教程之前,请先阅读《关于Axure rp7.0汉化包导致中继器无法正常使用的bug说明》。当然,如果在你阅读这篇教程时,上面提到的bug以解决的话,那么就请继续往下看。

首先,我们先做一下准备:

1、 在中继器项目中添加多条数据,以便更方便演示效果;

2、 添加一个文本框,设置好标签,用来输入筛选条件,并添加一个按钮用来触发筛选事件;

3、 添加一个矩形或按钮,转换成两个状态,用来触发升序和降序事件的触发。

一、筛选功能

准备完毕后,我们先添加筛选事件,如下图:

4-1

我们在筛选按钮的onclick事件中添加一个用例,在这用例里面添加事件“新增过滤器”(Add filter),然后勾选过滤器,自定义一个名称,在查询里面让item.XXX==局部变量。

说明:

1、 变量列表里面选择或者直接输入item.xxx;

2、 自定义局部变量=筛选条件输入文本框的元件文字;

3、 这里注意是两个“=”。一个的话是给变量赋值,两个话是判断是否一样。

这样根据输入文字进行筛选的功能就实现了。

二、排序功能

1、在动态面板中的第一个状态的按钮上,添加事件:

(1)添加一个Add Sort–勾选中继器–设置一个排序的自定义名称—设置排序项目—设置按数字排序—设置按降序排列“Decending”(价格由高到低)。

(2)设置动态面板状态转换为第二个状态。

2、在动态面板的第二个状态的按钮上,添加事件:

(1)参照上一步骤,最后一步设置为按升序排列“Ascending”(价格由低到高)。

(2)设置动态面板状态转换为第二个状态。

说明:在最后一步设置中还有一个选项“Toggle”,是升序与降序切换。

4-2

到这里,按价格排序的功能也实现了。

三、翻页功能

这个最简单,我们只需要添加两个按钮,分别是前一页和后一页,并在两个按钮的onclick事件上分别设置:

前一页:添加Set Current Page,勾选中继器,在Select the page中选择“Previous”;

下一页:添加Set Current Page,勾选中继器,在Select the page中选择“Next”;

说明:在Select the page选项中还有两个选项,分别是Value(根据值打开指定页)和Last(最后页)。

4-3

好了,翻页功能也完成了。

下面就是见证奇迹的时刻!你做到了吗?

您可能想查找下面的文章:

  • Axure教程:如何使用Axure中继器元件?
  • Axure教程 | 详解中继器的九宫格
  • Axure教程:用中继器和日期函数实现万年历
  • Axure 原型 | 关于中继器的简单使用及应用的场景
  • Axure教程:中继器实现列表到详情页的数据传递
  • Axure7.0教程(四)中继器的使用(4)
  • Axure7.0教程(三)中继器的使用(3)
  • Axure7.0教程(二)中继器的使用(2)
  • Axure7.0教程(一)中继器的使用(1)

相关文章

  • 2017-06-14Axure教程-锚点滚动效果
  • 2017-06-13矩形框:深度理解和应用元件样式(二)
  • 2017-06-13Axure RP8 动态面板之折叠和展开(例如菜单栏)
  • 2017-06-14Axure7.0实现动态“极验”效果(滑动验证)
  • 2017-06-13Axure教程:可使用的计算器demo制作(上)
  • 2017-06-14Axure7.0教程(七)math函数的使用(2)Math函数简介
  • 2017-06-13Axure教程:原型设计之侧滑菜单
  • 2017-06-14Axure教程 | 图片放大器
  • 2017-06-13中继器实践:双向列表操作
  • 2017-06-13Axure教程:如何使用Axure中继器元件?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Axure RP设计伸缩导航、遮罩弹窗、返回顶部的方法
    • Axure7.0教程(五)鼠标Cursor函数的使用(动态面板跟随)
    • Axure中继器实践:如何制作一个「记忆翻牌」小游戏?
    • 用Axure 实现“打飞机”,骚年,来一发(上)
    • Axure8.0小案例:电动机原型
    • Axure实例:创建浏览器顶部固定菜单及子菜单
    • Axure教程-体验一下 iPhone 6
    • Axure教程:验证码原型制作实例
    • Axure教程:移动端原型如何适配不同分辨率的手机?
    • Axure教程 | 漂亮的不像实力派的锤子时钟

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有