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

編輯導(dǎo)語(yǔ)：如何使用Axure去獲取頁(yè)面尺寸，并且使內(nèi)聯(lián)框架自適應(yīng)大小呢？本文作者通過(guò)實(shí)際操作，進(jìn)行了記錄總結(jié)，希望看后對(duì)你有所幫助。

今天要演示的東西其實(shí)很簡(jiǎn)單，一兩分鐘就能做完，主要是用來(lái)彌補(bǔ)Axure IDE提供的交互功能中的不足，導(dǎo)致一些想法沒(méi)辦法很好地實(shí)現(xiàn)。

其實(shí)國(guó)外有大神(De Jongh)做了一個(gè)能在Axure發(fā)布框架內(nèi)跑起來(lái)的Javascript拓展，這是地址：http://dejongh.dk/wiki/doku.php?id=interaction:axure_api&do=index。

一部分是Axure基于jQuery的函數(shù)，還有一部分是他補(bǔ)充的擴(kuò)展函數(shù)，擴(kuò)展函數(shù)看起來(lái)很不錯(cuò)，解決了很多問(wèn)題；但是安裝實(shí)在是麻煩，特別是如果面向不熟悉代碼的設(shè)計(jì)師（流程設(shè)計(jì)師、視覺(jué)設(shè)計(jì)師等）簡(jiǎn)直是天書(shū)。

為此，結(jié)合我們常用的一些功能或函數(shù)，我梳理了一些不需要拓展庫(kù)就能實(shí)現(xiàn)的，做成例子分享給大家。

今天，我們做一個(gè)iframe內(nèi)聯(lián)框架根據(jù)加載頁(yè)面的尺寸自適應(yīng)變化大小。Axure自帶的頁(yè)面屬性是很簡(jiǎn)單的，只有一個(gè)pageName，完全不夠用！如圖：

通常我們做頁(yè)面的時(shí)候，還會(huì)用到頁(yè)面的尺寸。比如自定義視覺(jué)的滾動(dòng)條、通過(guò)iframe（內(nèi)聯(lián)框架）做的頁(yè)面切換等等，如果沒(méi)有頁(yè)面尺寸，會(huì)導(dǎo)致無(wú)法實(shí)現(xiàn)自適應(yīng)等操作，所以今天來(lái)解決它。

這是演示地址，可能因?yàn)榫W(wǎng)絡(luò)的原因，導(dǎo)致頁(yè)面載入時(shí)間過(guò)長(zhǎng)，高度值讀取失敗，請(qǐng)刷新一下：https://fa35br.axshare.com/#id=5cgvid&p=home。

01?準(zhǔn)備測(cè)試素材

我們先準(zhǔn)備3個(gè)頁(yè)面1個(gè)全局變量：1個(gè)是帶菜單的主頁(yè)面，2個(gè)演示用內(nèi)容頁(yè)，還有1個(gè)全局的變量。

交互流程與原理：

按鈕點(diǎn)擊觸發(fā)，被加載的子頁(yè)面在載入的時(shí)候，獲取自己的頁(yè)面高度，然后寫(xiě)入到全局變量，按鈕動(dòng)作延時(shí)改變iframe的尺寸。

02?制作頁(yè)面

1. Home：主頁(yè)面

主頁(yè)面內(nèi)我放置了2個(gè)按鈕，1個(gè)iframe：2個(gè)按鈕（矩形），沒(méi)有命名要求；1個(gè)iframe，iframe的元件ID命名為“l(fā)oadPageFrame”，設(shè)置為隱藏邊框、從不滾動(dòng)。

2. page1、page2 ：內(nèi)容頁(yè)面

這兩個(gè)頁(yè)面隨便找些文字，或者畫(huà)一些測(cè)試的圖形，盡可能把頁(yè)面高度拉長(zhǎng)，以便等會(huì)測(cè)試的時(shí)候體現(xiàn)出區(qū)別。

03 交互與代碼

1. home，菜單按鈕

主頁(yè)面當(dāng)中按鈕主要是觸發(fā)iframe載入目標(biāo)頁(yè)面，然后延遲500ms（可根據(jù)需求調(diào)整，150ms基本也ok），根據(jù)全局變量“size”改變iframe的尺寸。

給菜單按鈕添加交互，交互的次序不要錯(cuò)：要先把iframe縮小到10高度，然后打開(kāi)鏈接，延遲后再設(shè)定尺寸。

2. page 1、page 2內(nèi)容頁(yè)

內(nèi)容頁(yè)可任意制作，只需要在頁(yè)面中添加頁(yè)面的交互，作為載入時(shí)獲取本頁(yè)面的高度：

代碼如下：javascript:void($axure.setGlobalVariable”size”, document.documentElement.scrollHeight));

04 擴(kuò)展應(yīng)用

采用延時(shí)觸發(fā)，是因?yàn)榭珥?yè)面的元件是無(wú)法直接交互的（IDE當(dāng)中獲取不到目標(biāo)指針），所以只能通過(guò)跨頁(yè)面的全局變量來(lái)實(shí)現(xiàn)。基本上延遲200ms左右是不被察覺(jué)的，當(dāng)然考慮到終端的運(yùn)行能力，可以適當(dāng)延長(zhǎng)。

示例代碼中的626w是隨意設(shè)置的iframe寬度，也可根據(jù)變量修改。[[size]]就是全局變量size，可以在IDE當(dāng)中直接引用。

為了方便大家以后搜索，我用到的函數(shù)列舉一下：

• $axure.setGlobalVariables[name,value]：賦值axure的全局變量，可以跨頁(yè)面使用，無(wú)法通過(guò)代碼創(chuàng)建，需要在Axure的IDE當(dāng)中先定義變量；
• document.documentElement.scrollHeight：頁(yè)面內(nèi)容高度，一個(gè)很常規(guī)的HTML對(duì)象屬性，只是在Axure IDE當(dāng)中沒(méi)有被暴露，可寫(xiě)在JS代碼里。

當(dāng)能獲取頁(yè)面尺寸，并通過(guò)全局變量修改iframe尺寸以做到自適應(yīng)以后，我們就可以不再依賴“Axure母版”這個(gè)有限的玩法了，菜單框架頁(yè)面做好，其他的內(nèi)容頁(yè)面可以隨意做，并且多人協(xié)作時(shí)不再出現(xiàn)已放置在頁(yè)面中的母版同步時(shí)效的問(wèn)題。

并且使用瀏覽器本身的頁(yè)面滾動(dòng)條，要比iframe的滾動(dòng)條要美觀很多。

今天的文章比較干，或者說(shuō)比較枯燥，本來(lái)還有一個(gè)很長(zhǎng)的文章想要寫(xiě)的，雖然例子已經(jīng)做好，主要是解決了Axure的IDE里面怎么通過(guò)JS代碼準(zhǔn)確定位到元件，以獲得更多的自由度去封裝應(yīng)用。

考慮到內(nèi)容更干所以還在醞釀怎么措辭，會(huì)盡快發(fā)布。

回到做這個(gè)系列的初衷，還是為了讓懂代碼的同事能預(yù)先用JS與原生IDE組合的方式，把一些組件預(yù)先根據(jù)團(tuán)隊(duì)的視覺(jué)交互規(guī)范封裝好，以便不懂代碼的同事可以方便并快速的使用來(lái)搭建交互原型。

關(guān)注我，下周會(huì)放出包括之前文章相關(guān)的源文件。

作者：ELement；公眾號(hào)：ElementChen

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

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