Axure9教程:内联框架-搜索引擎效果

1、准备工作

(1)制作搜索区域

拖入一个矩形作为画板页面,添加填充颜色,并将其置于底层,在画板上拖入一个图片,一个文本框,一个按钮。

(2)搜索结果展示区域

拖入一个内联框架作为结果显示区域。

图片

2、添加交互动作

(1)搜索按钮,添加交互动作

【单击时】-【框架中打开链接】,目标选择内联框架【搜索结果】;

链接到选择【链接到URL或文件路径】;

图片

(2)跳转链接拼接

在浏览器中使用百度搜索引擎,任意输入搜索内容,查看地址栏,会发现输入的内容在链接中。

图片

我们复制地址栏中的链接,粘贴到弹出的链接地址编辑框中。用局部变量获取输入的搜索内容进行替换。

图片

(3)解决搜索引擎拦截的问题

预览时发现百度搜索引擎不允许进行内联,更换其它搜索引擎。

图片

更换为360搜索引擎后可以正常使用。但是页面中存在两个搜索框,非常别扭。

 

图片

(4)去掉自带的搜索框

使用截图工具,在预览的界面上查看自带的搜索框区域的高度,然后拖入一个矩形,调整高度和宽度能遮挡住自带的搜索框。

图片

图片

3、最终效果

图片

THE END