【Axure】入门教程---增删改查、轮播、动态面板、中继器等

例子：
http://203.195.157.232/project/#g=1&p=首页

一.安装
1.安装Axure
使用axure8.1.0，安装汉化包可以直接将lang包放在axure的安装包下。

二.使用
1.元件库：在元件库里可以拖拽需要的元件。

2.母版
新建母版，在母版中布局。

将完善好的布局分别添加到需要的页面中。

可以发布在浏览器查看详情。

3.动态面板
使用动态面板实现轮播：
新建动态面板，创建多个state，给每一个state添加一张图片。

设置轮播动态面板的载入时动作，向左滑动。

设置相应个数的小圆点，给小圆点设置载入时动作，动画效果为无，时间要与动态面板轮播的时间一致，给state1小圆点的第一个圆点设为灰色，第二个state的第二个小圆点设为灰色，以此类推。

发布预览axure，完成轮播

4.动态面板
使用动态面板实现带遮罩层模态框：
使用一个矩形，将矩形的宽高设置为覆盖页面的大小，设置透明度50%，再遮盖上层放置一个矩形，设置用户名、密码等框。

设置登录模态框隐藏，并且在视图中不可见。
给登录绑定事件，鼠标单击时，出现模态框和遮盖，同理，给关闭按钮添加事件，点击关闭时隐藏模态框和遮盖。

5.中继器
首先将中继器拖在面板中，双击中继器，进行编辑。

给中继器添加点击事件，让每一个框对应一个中继器的名字。

可以在页面中看中继器的内容。

6.添加功能
首先使用一个按钮，根据上面动态面板设置遮罩和模态框的方法设置模态框。给确定按钮添加事件，选择中继器中的添加行，要先设置局部变量，之后插入变量，id列用itemCount+1函数实现自增。

其他列如图：

添加行完成后，要将模态框和遮盖隐藏。

之后将遮盖和模态框组设为隐藏且在视图中隐藏。


tips：如果添加之后第二次点击添加时文本框内有值，就要给添加按钮新增点击事件，设置文本，将文本框勾选。

7.批量删除功能
首先给中继器中的单选按钮绑定事件，case1中将条件设立为： if选中状态this==true，之后选择标记行，选择this。



之后给批量删除按钮绑定事件，在数据集中选择删除已标记的行。

8.分页功能
首先在中继器中的样式中设置分页，以及每一页显示的条数。

设置前一页的值为Previous，下一页的页面设置为Next。

前一页：
下一页：

9.搜索关键字
首先布置一个搜索框和一个搜索图标。
给搜索图标绑定筛选事件，配置条件“[[Item.position.indexOf(keyword)>-1]]”，就可以查出关键字。





10.修改操作
点击修改按钮，改行变为可编辑状态，同时修改按钮变成保存按钮，点击保存之后保存修改后的数据。
在中继器中柜子位置柜子状态中分别增加 一个文本框，去掉边框，设为隐藏，在修改按钮处增加一个保存按钮，将按钮设置为隐藏。

给修改按钮增加事件，首先设置显示刚刚新增的文本框，保存按钮，隐藏修改按钮。

给修改按钮新增文本，设置文本，并且将值传给文本，这样点击修改按钮时，之前的值就会显示在文本框中。

首先给保存按钮设置点击事件，更新行，将更新的行保存在页面上。
其次保存按钮设置显示删除、修改、以及柜子位置、柜子状态并且隐藏保存、柜子位置修改框、柜子状态修改框。

11.设置单选按钮
将男单选按钮和女单选按钮一同设置为sex。