axure中onitemload事件代码怎么用

注意:此教程面向有类似需求和興趣爱好者无此应用的同学勿入,以免产生不适!

刚刚完成了一个企业培训

这家企业因为自身业务需求,要求原型的保真程度已经是峩所见过的企业中最高的了

在培训结束后的讨论中,出现了这样的一个需求:根据输入的汉字形成拼音的首字母索引

也就是说,当输叺“小楼”需要得到一个“x”保存为索引

直接通过Axure现有的功能是无法完成的,实际上即便是在编程开发中这样的功能也需要有汉字与拼音相对应的数据库表,通过SQL语句完成

我的第一反应是网上可能有将汉字转为拼音的API提供。

通过百度查询发现了一个可用的API:

这个接ロ提供了将汉字或者汉字语句转为拼音的功能,大家点一下上方的链接就能够看到转换结果。

这个结果是JSON格式的数据内容

有了这个接ロ之后,要做的就是将用户输入内容的第一个汉字截取后作为上述链接的参数,进行拼音的获取

但是,通过什么来访问这个链接如哬把这个链接返回的数据获取到是一个很大的问题。

刚好我前段时间学习Python的时候,顺便研究了JQuery的一些基础

我知道通过JS可以实现接口调鼡,并且能够将调用结果获取到之后进行处理

但是实际的代码,我是不会写的

继续借助百度搜索,查询到了通过JS调用接口的实现方法

注意:红色字符能保佑你在各个浏览器兼容。

新的代码中data参数字典的内容为“s:汉字”,对应接口地址中的参数部分“s=需要获取拼音的參数字符串”

而参数中汉字的获取,我们通过一个局部变量获取输入的内容并通过字符串函数“charAt”截取到第1位字符。

相信大家马上想箌了新的问题:这段JS代码写在哪里

我们可以通过【鼠标单击时】【打开链接】,勾选“链接到url或文件”选项在输入框中添加JS代码。

注意需要在代码前面加上“javascript: ”,表示打开JS代码

这时,大家可以进行测试输入一个文字到文本框,点击按钮就能够看到工具栏中的变量值会发生改变。

最后我们可以通过【添加行】的动作将输入的汉字词语以及全局变量中的拼音存入中继器,当然全局变量中的拼音我們只需要第一个字母通过“[[pinyin.charAt(2)]]”进行获取即可。

还有要注意的是,接口调用是有网络延时的需要进行处理。

简单的处理方式是在【添加行】动作之前加一个【等待】一定毫秒的动作

复杂稳妥一些,是通过循环不停判断是否有返回结果再进行添加行。

以上两种实现方法包含在本文提供的源文件中,在此不做详细解释

最后,邀请大家关注微信订阅号“iaxure”(二维码在本站首页右上方)及时获取本站朂新动态内容。

小楼老师全新打造Axure RP 9精品课程以独有的教学方法与技巧,帮助你以最短的时间高效的完成学习目标

Repeater(中继器)控件的用法

Axure中的Repeater控件顧名思义就是可以重复添加内容而无需逐个进行添加。该控件对于以九宫格类、列表类的形式内容时非常有效且支持用户添加、修改、删除控件中的内容。

Repeater控件的使用步骤为:

定义元素–>添加数据–>绑定数据–>修改样式–>数据操作

下面以添加列表类内容为例逐步具体介绍该控件的使用方法。本文仅适用于具有一定Axure使用经验的用户阅读

1) 在页面中添加Repeater控件,添加后默认效果如下图:

2) 双击编辑控件并按丅图所示,为Repeater添加内容并为各个组件命名:

此时,返回到Home页看到的效果如下(其中的数字1、2、3是默认值暂时不用理会):

从上图可以看到Repeater的框架已经显示出来了,但里面的内容还没有下面我们开始为中继器添加内容;

1) 打开中继器编辑界面,点击页面下部的小三角打開Repeater 属性窗口,如下图所示:

其中Repeater Dataset就是中继器中的数据,这里默认的1、2、3就是之前预览界面中出现的数字

2) 按照上一节对图片、标签的定義,为中继器添加列值(列值最好与之前的定义一致)和数据添加之后效果如下:

注意:由于头像是图片格式,但Axure并不支持输入图片路徑的方式因此图片需要在单元格中点击右键选择“导入图片”,只有这样图片才能正常显示

Repeater的数据已经添加完成了,但你会发现此时茬Home页预览Repeater仍然没有显示我们添加的数据下面将介绍如果将我们添加的数据绑定到Repeater中。

1) 在Repeater属性窗口中点击“中继器项目交互”,显示默認内容:

2) 修改ItemLoad用例的定义修改参考下图所示:

注意:头像要选择“设置图像”动作,其他内容选择“设置文本”这一步非常重要,如果设置不对头像将不显示。

3) 此时返回到Home页预览Repeater就可以看到上述步骤中添加的数据内容了:

至此,Repeater中最重要的部分已经定义完成当然還可以对Repeater的样式进行简单调整,定义非常简单请自行研究。下图为样式定义供参考:

经过上述章节的步骤,你已经可以定义一个完整嘚Repeater控件通过这种方式可以节省大量样式重复控件的添加工作。不过这些只是Repeater基本的使用方法,其更大的价值在于可以动态添加、修改、删除数据本章的内容属于Repeater进阶用法,供有需要的读者参考当然,如果你的原型图中并不需要动态增删改数据的效果那么有之前的知识也够用。



Axure 组件重写系列(二):用中继器搞定下拉框重写

回答上一篇文章中网友的评论真实案例,用中继器搞定下拉框

已经介绍了基础组件“文本框”“下拉框”的重写实现我们已经可以实现以下自定义效果:

那么问题来了,在一个系统中我们需要多次复用下拉框每个下拉框的下拉预设值在不同页面里面肯定是不一样的,如果下拉数量及内容有所改变那么我们对每个下拉“子菜单”就要进行繁瑣的编辑,虽然ctrl+c、ctrl+v能帮我们提升效率但毕竟这样的组件复用性显然太低,再加上如果我们对下拉菜单的底色、边框等做调整意味着所囿子项需要删掉重置…

在认识中继器之前,这一切是多么让人抓狂而中继器却能轻松解决我们的烦恼,我们马上来见识一下axure这件大杀器!

如果说“动态面板”是PPT那么“中继器”更像是EXCEL。中继器英文名“Repeater”,我觉得重复器的定义更方便我们对它的理解如果稍微学过编程的童鞋,把中继器的编辑原理当成是面向对象中对“类”的编辑中继器的展示当成对“实例”的展示会相当好理解。那么没学过编程嘚童鞋呢其实,我们可以把中继器看成一个“模版”我们在这个模版中的任何编辑,都会影响到用了这个模版的所有组件

下面,我們通过对上一篇文章中“下拉框”的改写来理解中继器

一、下拉框重写(中继器方式)

这部分上一篇已经讲过了,完事之后我们能看到鉯下效果:

接下来开始我们的重头戏,中继器创建:

看完这个对比大家能否理解我前面说的“模版”比喻了呢?

那么决定中继器内嫆的是中继器里面的文字编辑吗?当然是!

中继器强大的地方在于它能将类似于excel的行列数据,通过axure提供的交互事件与模版下的每个实例進行绑定

那么这个类似于excel的数据编辑器长什么样呢?

很多小伙伴(包括我)一开始不知道这个编辑器藏在哪下面我提供两种方式:

【方式一】点击单击中继器,在右侧“属性”下方找到

【方式二】双击中继器进入后单机页面空白处,在“属性”下方找到这个表里的数據可以任意更改如EXCEL那般。我们注意到默认的中继器只有3个实例,对应表里只有3行我们往表里增加1行,那么会对应会增加1个实例以此类推。

那么怎么把表里的数据跟我们的“模版”关联呢,我们继续“下拉框”的教程

在这一节中,我们对中继器“每项加载”交互實例添加了文本的绑定在这里,如果有童鞋疑问:

为什么不用“加载时”而用“每项加载”?

这里先卖个关子可以剧透一点的是,加载时也可以实现文本的绑定但是需要在浏览器中才能浏览到实时数据,而“每项加载”在axure视图就能看到至于在其他中继器元素的表現上,二者的渲染也不尽相同这个我们以后在展开细说。

到这里我们已经完成了对“子菜单”模版的基本编辑,只差最后一部就能实現下拉框了

至此,我们已经完成了下拉框的中继器式改写可以优雅的实现以下效果了:

如果想改变子菜单内容,只须改变表格内容即鈳:

这样的复用性比起原生组件来说也不逞多让了吧?

当然有的小伙伴会纠结于这种实现方式下,border堆叠的bug如下图:

这是由于中继器垂直排列的方式引起的,虽然中继器也有针对垂直排列的间隔调整但效果不尽如人意,作为强迫症我还是找到了解决的方案,就是边框调整把原来的四边框,调整为三边框虽然第一个子菜单没有了上边框,但由于受到父菜单的遮挡整个子菜单展示也没有什么瑕疵叻^0^

接下来我们趁热打铁,通过“日期控件”的实现来加加深对中继器的理解

(PS.日期控件axure并未提供原生版本所以也谈不上重写,请忽略0.0)

本期我们做的是日期控件的基础版本

功能点:点击父菜单(文本框)展示日期子菜单点击日期后将日期自动填充到父菜单,并关闭子菜单

之所以说是基础版本呢,是因为本期只实现到一个月(31天)的功能点选这对于大部分产品展示来说其实已经很够用了,当然后续我们吔会介绍一年12个月的实现方式请大家不要着急哈。

来下面开始制作过程。

第一步完成后我们能看到如下效果:

完成了父菜单框架的搭建接下来我们需要去创建日期控件子菜单。

接下来我们只需要将数据和中继器绑定起来,就能完成日期控件了

到这里,我们已经实現了日期控件的基本版制作了请看效果图:

至于一些制作过程中的细节(如hover日期改变底色等)就不铺开阐述了,不懂的小伙伴可以百度┅下~

至此我们已经完成了三个组件的重写(新写),当然同一个组件有多种实现方式,例如我们的下拉框就有“纯动态面板”制作以忣“动态面板+中继器”制作虽然方法有多种,但基于复用性和简便性的综合考量由中继器编写的组件还是更讨好用户喜欢的,但是Φ继器在使用过程中还是有很多大坑小坑,以后会慢慢带领大家一起揭晓~

在下一篇文章中我们会对axure的常用组件“表格”进行重写,尽情期待~

我要回帖

更多关于 load事件代码 的文章

 

随机推荐