axure⽇期选择器控件_Axure⾼级教程:做⼀个能在Axure中
引⽤html、css、。。。
今天要讲⾼级⼀点的教程,如何在Axure中使⽤html、html5、css、javascript、jQuery、AJAX等代码?
⾸先我简单的说⼀下为什么要在Axure⾥⾯引⽤代码呢?
举个简单的例⼦:我们在做⽂章编辑平台的时候就需要⽤富⽂本编辑器,但是Axure⾥⾯就没有这个元件,如果甲⽅爸爸要求我们做⾼保真原型的话,我们可能做上百个交互也未必能做出来。
这时候如果我们引⽤代码的话,⼀分钟就能搞定,反⽽提⾼了我们的效率。
讲了这么多⼤道理,下⾯开始教学了,本⽂将会以html5视频代码为案例展开。
⼀、材料准备
这⾥Axure⾥⾯的原材料只需要⼀个矩形即可,当然了还需要代码,需要我们事先在⽹上复制好代码。
例如:我们这⾥需要做⼀个视频播放器的元件,我们需要到html5视频的代码,w3scool是⼀个很棒的⽹站,你们可以在⾥⾯到你们需要的东西哈。
如上图所⽰就是在⽹上到的视频播放器的代码,我们可以在代码编辑器⾥⾯试运⾏⼀下看⼀下效果,如果效果符合⼼意的话我们就可以直接复制下来。
再讲下⼀步之前,我们需要了解⼀下<video> 标签的属性:
autoplay是⾃动播放,如果不⾃动播放的话,可以删掉;
controls是视频的控件,包括播放、停⽌按钮、全屏、⾳量等,如果不需要的话,也可以删掉;
width和height是视频播放器的宽度和⾼度,我们的材料⾥⾯只有⼀个矩形,所以我们只需要设定矩形的位置和尺⼨,然后把矩形的宽和⾼填进去即可;
loop是循环播放,如果不需要的话,可以删掉;
preload是预加载,如果不需要预加载视频的话,也可以闪电;
src是指视频的地址,可以是⽹络的地址(如:www.1234/images/T1T78eXapfXXXXXXXX.mp4);也可以是本地地址(如:file:///C:/Users/1234/Downloads/123.mp4)。这⾥要注意的是,如果是本地地址的话,需要发布⽣成html后才能预览;
post是指视频的封⾯,同样可以选择图⽚的⽹络地址或本地地址,如果不需要封⾯的话同样可以不填。
那基本的材料就准备完成了。
⼆、复制代码
将刚刚准备好的代码复制到矩形⾥⾯即可;
然后按需求填上宽度、⾼度、视频url、是否⾃动播放等等属性;
给矩形命名,名字你们⾃定义即可,不过后⾯交互需要⽤到,本案例中矩形命名为code。
三、设置交互
基本逻辑:在矩形加载的时候,让他执⾏矩形⾥的代码,让矩形变成⼀个视频播放器;
所以在矩形载⼊时:我⽤javascript执⾏代码,这⾥要注意的是data-label=code,code就是我们之前命名好矩形的名字。
四、预览效果
制作完成后,我们可以看⼀下效果:
我们可以看到,矩形马上变成了视频播放器。
这⾥有的同学可能会说,加载的时候,有半秒中显⽰了原来的矩形,然后不想看出来怎么办。其实作者觉得没太⼤所谓,不过要做也⾮常简单,我们⾸先将矩形隐藏,然后在加载时加上⼀个等待1s的时间,再显⽰矩形即可。
css选择器分为哪几类
如果有需要的⼩伙伴可以⾃⼰加上去,作者就懒得加了。
五、制作元件库
千万不要以为到这⾥就完了,记得把这个矩形放进你的元件库,下次的时候就可以直接⽤了。当然了,为了提⾼效率,我们平时也要做好准备。
这个矩形不仅仅是视频播放器,你可以在⾥⾯填⼊对应的代码。
例如你填⼊的是⾳频播放器的代码,那么他就会变成⾳频播放器,处理之外还包括、颜⾊选择器、上传按钮、密码输⼊框、警告提⽰、输⼊输⼊框、时间⽇期选择器、email输⼊框、滑动条控件、富⽂本编辑器、统计通标等等。
所以我们⽇常要做好积累,特别是和前端⼩打好关系,这样⼦就能事半功倍了。
那到今天就分享到这⾥了,最后如果你喜欢我的原型教程的话,记得关注⼀下哈,谢谢⼤家。