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

2021-07-2908:54:43办公软件与工具应用1 2,791 views字数 1426阅读模式

如何在Axure中使用html、html5、ccs、javascript、jQuery、AJAX等代码?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/21611.html

首先我简单的说一下为什么要在Axure里面引用代码呢?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/21611.html

举个简单的例子:我们在做文章编辑平台的时候就需要用富文本编辑器,但是Axure里面就没有这个元件,如果甲方爸爸要求我们做高保真原型的话,我们可能做上百个交互也未必能做出来。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/21611.html

这时候如果我们引用代码的话,一分钟就能搞定,反而提高了我们的效率。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/21611.html

讲了这么多大道理,下面开始教学了,本文将会以html5视频代码为案例展开。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/21611.html

原型预览地址:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/21611.html

一、材料准备

这里Axure里面的原材料只需要一个矩形即可,当然了还需要代码,需要我们事先在网上找复制好代码。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/21611.html

例如:我们这里需要做一个视频播放器的元件,我们需要找到html5视频的代码,w3scool是一个很棒的网站,你们可以在里面找到你们需要的东西哈。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/21611.html

Axure如何使用html、html5、ccs、javascript、jQuery、AJAX等代码?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/21611.html

如上图所示就是在网上找到的视频播放器的代码,我们可以在代码编辑器里面试运行一下看一下效果,如果效果符合心意的话我们就可以直接复制下来。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/21611.html

再讲下一步之前,我们需要了解一下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/21611.html

Axure如何使用html、html5、ccs、javascript、jQuery、AJAX等代码?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/21611.html

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

那基本的材料就准备完成了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/21611.html

二、复制代码

  • 将刚刚准备好的代码复制到矩形里面即可;
  • 然后按需求填上宽度、高度、视频url、是否自动播放等等属性;
  • 给矩形命名,名字你们自定义即可,不过后面交互需要用到,本案例中矩形命名为code。

Axure如何使用html、html5、ccs、javascript、jQuery、AJAX等代码?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/21611.html

三、设置交互

  • 基本逻辑:在矩形加载的时候,让他执行矩形里的代码,让矩形变成一个视频播放器;
  • 所以在矩形载入时:我用javascript执行代码,这里要注意的是data-label=code,code就是我们之前命名好矩形的名字。

Axure如何使用html、html5、ccs、javascript、jQuery、AJAX等代码?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/21611.html

四、预览效果

制作完成后,我们可以看一下效果:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/21611.html

Axure如何使用html、html5、ccs、javascript、jQuery、AJAX等代码?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/21611.html

我们可以看到,矩形马上变成了视频播放器。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/21611.html

这里有的同学可能会说,加载的时候,有半秒中显示了原来的矩形,然后不想看出来怎么办。其实作者觉得没太大所谓,不过要做也非常简单,我们首先将矩形隐藏,然后在加载时加上一个等待1s的时间,再显示矩形即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/21611.html

如果有需要的小伙伴可以自己加上去,作者就懒得加了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/21611.html

五、制作元件库

千万不要以为到这里就完了,记得把这个矩形放进你的元件库,下次的时候就可以直接用了。当然了,为了提高效率,我们平时也要做好准备。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/21611.html

这个矩形不仅仅是视频播放器,你可以在里面填入对应的代码。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/21611.html

例如你填入的是音频播放器的代码,那么他就会变成音频播放器,处理之外还包括、颜色选择器、上传按钮、密码输入框、警告提示、输入输入框、时间日期选择器、email输入框、滑动条控件、富文本编辑器、统计通标等等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/21611.html

所以我们日常要做好积累,特别是和前端小姐姐打好关系,这样子就能事半功倍了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/office/21611.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/office/21611.html
Comments  1  访客  1
    • kaka 0

      请问怎么导入js代码啊

    Comment

    匿名网友 填写信息

    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

    确定