Axure如何使用html、html5、ccs、javascript、jQuery、AJAX等代码?

如何在Axure中使用html、html5、ccs、javascript、jQuery、AJAX等代码?

首先我简单的说一下为什么要在Axure里面引用代码呢?

举个简单的例子:我们在做文章编辑平台的时候就需要用富文本编辑器,但是Axure里面就没有这个元件,如果甲方爸爸要求我们做高保真原型的话,我们可能做上百个交互也未必能做出来。

这时候如果我们引用代码的话,一分钟就能搞定,反而提高了我们的效率。

讲了这么多大道理,下面开始教学了,本文将会以html5视频代码为案例展开。

原型预览地址:

例如:我们这里需要做一个视频播放器的元件,我们需要找到html5视频的代码,w3scool是一个很棒的网站,你们可以在里面找到你们需要的东西哈。

Axure如何使用html、html5、ccs、javascript、jQuery、AJAX等代码?

如上图所示就是在网上找到的视频播放器的代码,我们可以在代码编辑器里面试运行一下看一下效果,如果效果符合心意的话我们就可以直接复制下来。

再讲下一步之前,我们需要了解一下

Axure如何使用html、html5、ccs、javascript、jQuery、AJAX等代码?

  • autoplay是自动播放,如果不自动播放的话,可以删掉;
  • controls是视频的控件,包括播放、停止按钮、全屏、音量等,如果不需要的话,也可以删掉;
  • width和height是视频播放器的宽度和高度,我们的材料里面只有一个矩形,所以我们只需要设定矩形的位置和尺寸,然后把矩形的宽和高填进去即可;
  • loop是循环播放,如果不需要的话,可以删掉;
  • preload是预加载,如果不需要预加载视频的话,也可以闪电;
  • src是指视频的地址,可以是网络的地址(如:);也可以是本地地址(如:file:///C:/Users/1234/Downloads/)。这里要注意的是,如果是本地地址的话,需要发布生成html后才能预览;
  • post是指视频的封面,同样可以选择图片的网络地址或本地地址,如果不需要封面的话同样可以不填。

那基本的材料就准备完成了。