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输⼊框、滑动条控件、富⽂本编辑器、统计通标等等。
所以我们⽇常要做好积累，特别是和前端⼩打好关系，这样⼦就能事半功倍了。
那到今天就分享到这⾥了，最后如果你喜欢我的原型教程的话，记得关注⼀下哈，谢谢⼤家。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。