Axure实现汉字拼音首字母查询

Axure实现汉字拼音首字母查询

本文主要使用Axure给大家实现一个效果,那就是输入一个汉字能够查到它的拼音首字母,这个效果只是一个原理,只要你掌握其中方法,要实现通过汉字查拼音、查声母都是很简单的。

Axure所有元件

上面这张图,大家能够看到这个案例使用的所有元件。

最关键的就是命名为“PinYin”的这个元件,它的文字包含了所有的文字以及对应的拼音首字母。

大家可以下载源数据文件,复制里面的内容,粘贴到Axure编辑区中即可。

我们能够看到源数据的格式有一定的规律:[相同拼音首字母的所有文字][拼音首字母][逗号]……

那么,试想一下,当我们输入一个文字点查询时:

1、查询到汉字在源数据中出现的位置;

2、从查询到的位置向后查询逗号所在的位置;

3、获取到逗号所在位置前一位的拼音首字母。

所以,当我们准备好元件(注意将元件“PinYin”缩小尺寸后隐藏),就可以添加交互了。

Axure鼠标单击时

交互如上图所示:

查找按钮“Search”【鼠标单击时】,添加用例与动作:【设置文字】于元件“Result”为一个公式…

具体公式是什么样子的呢?

如下图所示:

Axure添加变量

公式的完整内容是:“汉字的首字母是:[[p.charAt(p.indexOf(',',p.indexOf(w))-1)]]”。

简单说明一下:

“p”和“w”是两个局部变量,分别存入了源数据和输入的汉字内容;

“p.charAt()”能够获取指定位置的字符;

“p.indexOf(w)”能够获取汉字在源数据中出现的位置。

“p.indexOf(',',p.indexOf(w))-1”能够从汉字位置开始向右查找逗号所在的位置,找到的位置减1就是拼音首字母的位置。

这里值得一提的是“indexOf()”这个函数,它能够由左至右的从一个字符串中查询参数字符串出现的位置,它有两个参数,分别是“被查询的字符串”和“查询的起始位置”,如果没有提供第二个参数默认从最左侧向右查询。

好了,到这里这个案例就完成了。

以上内容就是使用Axure实现汉字拼音首字母查询的教程,更多感兴趣的教程,点击文章:Axure如何用框架嵌入在线视频

在线客服
客服邮箱
客服电话
17051276424