中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語：在Axure中引用代碼，可以大大的提高我們的工作效率。今天，本文作者為大家講解了一個Axure高級教程：即做一個能在Axure中引用html、ccs、js等代碼的控件。希望看完本文能夠?qū)δ阌兴鶐椭?，歡迎大家在評論區(qū)討論交流。

今天要講高級一點的教程，如何在Axure中使用html、html5、ccs、javascript、jQuery、AJAX等代碼？

首先我簡單的說一下為什么要在Axure里面引用代碼呢？

舉個簡單的例子：我們在做文章編輯平臺的時候就需要用富文本編輯器，但是Axure里面就沒有這個元件，如果甲方爸爸要求我們做高保真原型的話，我們可能做上百個交互也未必能做出來。

這時候如果我們引用代碼的話，一分鐘就能搞定，反而提高了我們的效率。

講了這么多大道理，下面開始教學(xué)了，本文將會以html5視頻代碼為案例展開。

原型預(yù)覽地址：https://3hcsn9.axshare.com

一、材料準(zhǔn)備

這里Axure里面的原材料只需要一個矩形即可，當(dāng)然了還需要代碼，需要我們事先在網(wǎng)上找復(fù)制好代碼。

例如：我們這里需要做一個視頻播放器的元件，我們需要找到html5視頻的代碼，w3scool是一個很棒的網(wǎng)站，你們可以在里面找到你們需要的東西哈。

如上圖所示就是在網(wǎng)上找到的視頻播放器的代碼，我們可以在代碼編輯器里面試運行一下看一下效果，如果效果符合心意的話我們就可以直接復(fù)制下來。

再講下一步之前，我們需要了解一下<video> 標(biāo)簽的屬性：

• autoplay是自動播放，如果不自動播放的話，可以刪掉；
• controls是視頻的控件，包括播放、停止按鈕、全屏、音量等，如果不需要的話，也可以刪掉；
• width和height是視頻播放器的寬度和高度，我們的材料里面只有一個矩形，所以我們只需要設(shè)定矩形的位置和尺寸，然后把矩形的寬和高填進去即可；
• loop是循環(huán)播放，如果不需要的話，可以刪掉；
• preload是預(yù)加載，如果不需要預(yù)加載視頻的話，也可以閃電；
• src是指視頻的地址，可以是網(wǎng)絡(luò)的地址（如：https://www.1234.com/images/T1T78eXapfXXXXXXXX.mp4）；也可以是本地地址（如：file:///C:/Users/1234/Downloads/123.mp4）。這里要注意的是，如果是本地地址的話，需要發(fā)布生成html后才能預(yù)覽；
• post是指視頻的封面，同樣可以選擇圖片的網(wǎng)絡(luò)地址或本地地址，如果不需要封面的話同樣可以不填。

那基本的材料就準(zhǔn)備完成了。

二、復(fù)制代碼

• 將剛剛準(zhǔn)備好的代碼復(fù)制到矩形里面即可；
• 然后按需求填上寬度、高度、視頻url、是否自動播放等等屬性；
• 給矩形命名，名字你們自定義即可，不過后面交互需要用到，本案例中矩形命名為code。

三、設(shè)置交互

• 基本邏輯：在矩形加載的時候，讓他執(zhí)行矩形里的代碼，讓矩形變成一個視頻播放器；
• 所以在矩形載入時：我用javascript執(zhí)行代碼，這里要注意的是data-label=code，code就是我們之前命名好矩形的名字。

四、預(yù)覽效果

制作完成后，我們可以看一下效果：

我們可以看到，矩形馬上變成了視頻播放器。

這里有的同學(xué)可能會說，加載的時候，有半秒中顯示了原來的矩形，然后不想看出來怎么辦。其實作者覺得沒太大所謂，不過要做也非常簡單，我們首先將矩形隱藏，然后在加載時加上一個等待1s的時間，再顯示矩形即可。

如果有需要的小伙伴可以自己加上去，作者就懶得加了。

五、制作元件庫

千萬不要以為到這里就完了，記得把這個矩形放進你的元件庫，下次的時候就可以直接用了。當(dāng)然了，為了提高效率，我們平時也要做好準(zhǔn)備。

這個矩形不僅僅是視頻播放器，你可以在里面填入對應(yīng)的代碼。

例如你填入的是音頻播放器的代碼，那么他就會變成音頻播放器，處理之外還包括、顏色選擇器、上傳按鈕、密碼輸入框、警告提示、輸入輸入框、時間日期選擇器、email輸入框、滑動條控件、富文本編輯器、統(tǒng)計通標(biāo)等等。

所以我們?nèi)粘Ｒ龊梅e累，特別是和前端小姐姐打好關(guān)系，這樣子就能事半功倍了。

那到今天就分享到這里了，最后如果你喜歡我的原型教程的話，記得關(guān)注一下哈，謝謝大家。

本文由 @做產(chǎn)品但不是經(jīng)理 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。