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

這是本人在“人人都是產(chǎn)品經(jīng)理”發(fā)表的第一篇文章，主要目的是教會小白使用Axure7.0新增的組件——中繼器（Repeater）。才疏學淺，如有紕漏，還請指正。

使用之前

在使用之前，我們總得搞清楚我們將要使用的元件是什么東西。

據(jù)Axure官網(wǎng)介紹，中繼器是一種用于展示模式重復的文本或圖標的元件。沒看懂？不急，我們先看一下效果演示，然后再一步步把這個效果做出來，就可以開始使用中繼器了~

一、初識中繼器

從元件庫中找到中繼器，按住并拖入中間的操作區(qū)，我們可以看到它已經(jīng)有一列三行，分別寫著1、2、3。

那么操作區(qū)中的1、2、3從哪里來的呢？聰明的同學已經(jīng)看出來了，在右側的“檢視：中繼器——中繼器”欄有一個編輯區(qū)，里邊便有1、2、3。但是這還不夠，如果我們把“檢視：中繼器——交互——每項加載時”中的“case1”刪除，那么操作區(qū)中1、2、3便消失了。由此可見，還需要“case1”把操作區(qū)和編輯區(qū)聯(lián)系在一起。

按“Ctrl+Z”撤銷“刪除case1”操作，雙擊“case1”打開用例編輯<每項加載時>面板，我們來看看“case1”究竟做了什么。

只見上面寫著 ?設置文字于（矩形）= “[[Item.Column0]]” ?。頓生疑惑：什么？矩形？什么矩形？Item又是什么？Column0又是什么？Item.Column0又是什么？為什么要用“[[ ]]”包起來？

關掉用例編輯<每項加載時>面板，回到主界面，雙擊操作區(qū)的中繼器，打開中繼器模式編輯操作區(qū)。

點擊中繼器模式編輯操作區(qū)中的矩形，可以看到右側“檢視：矩形”中名稱欄顯示“（矩形名稱）”，這就是上文中的“（矩形）”。

點擊“檢視：矩形”中的名稱欄，我們給這個矩形取名為“動物”。

選中中繼器模式編輯操作區(qū)中的矩形，按“Ctrl+C”和“Ctrl+V”復制粘貼出新的矩形，拖動矩形放置在原矩形的右側，并在右側“檢視：矩形”中名稱欄將矩形名稱改為“食物”。

將操作區(qū)切換回index頁面，我們可以看到發(fā)生了一些變化：中繼器變成了兩行三列，“case1”中的“矩形”也變成了“動物”。這是我們剛才在中繼器模式編輯操作區(qū)修改的結果。

接下來，我們要做更多的操作。在右側“檢視：中繼器——中繼器”中，雙擊“Column0”，更名為“FirstColumn”，雙擊“添加列”，取名為“SecondColumn”。讓我們看看“case1”發(fā)生了什么變化。

我們將“Column0”改名“FirstColumn”之后，“case1”中的“Column0”也變?yōu)椤癋irstColumn”，由此我們可以意會他們的關系。

二、每項加載時

接下來，我們在“檢視：中繼器——中繼器”的編輯區(qū)中填入一些動物和食物的對應關系，可以看到，操作區(qū)也發(fā)生了改變，但是只顯示了第一列，第二列卻沒有顯示。

這是因為“case1”只同步了第一列卻沒有同步第二列。接下來我們試著同步第二列。雙擊“case1”打開用例編輯<每項加載時>面板，可以看到，“case1”只將“動物（矩形）”和“FirstColumn”聯(lián)系起來。

有樣學樣，我們把“食物（矩形）”和“SecondColumn”也聯(lián)系起來。先勾選“食物（矩形）”，再將右下角的值由默認的“[[Item.FirstColumn]]”改為“[[Item.SecondColumn]]”。聰明的同學應該可以意識到，這個“[[Item.xxxxxx]]”是一種默認格式，代表編輯區(qū)中xxxxxx列的值。很正確，Item就代表這個中繼器的編輯區(qū)，“[[ ]]”則代表取值，取中繼器編輯區(qū)xxxxxx列的值。

點擊確定按鈕，關閉用例編輯<每項加載時>面板，回到操作區(qū)，我們看到操作區(qū)中的中繼器的第二列成功地與編輯區(qū)中的第二列同步。

看到這里，你已經(jīng)明白了很多。但是依然有疑惑：如果只是靜態(tài)地展示一個表格那么直接使用“表格”元件不久可以了？耍我呢？

稍安勿躁，學習了以上知識，下面我們可以準備起飛了。

三、動態(tài)添加

首先，我們添加兩個文本框分別用于輸入“動物”和“食物”，再添加個用于提交數(shù)據(jù)的提交按鈕。

什么？提交數(shù)據(jù)？

將兩個文本框和提交按鈕分布在右側檢視的名稱欄改名為“輸入動物”、“輸入食物”和“提交按鈕”。

點擊提交按鈕，在右側“檢視：提交按鈕——交互”中雙擊“鼠標單擊時”，打開用例編輯<鼠標單擊時>面板。在左側添加動作欄雙擊“中繼器——數(shù)據(jù)集”中的“添加行”。在右側配置動作欄勾選“（中繼器）”（因為我們還沒給我們的中繼器取名，所以顯示為“（中繼器）”，跟前面提到的“（矩形）”一個道理）。

右側配置動作欄下面點擊添加行打開添加行到中繼器。

點擊“FirstColumn”下方，“添加行”右側的“fx”，打開編輯值面板。點擊“局部變量”中的“添加局部變量”。

將“局部變量”中的“LVAR1”改為“Animal”，右側“輸入食物”改為輸入動物。在上方“插入變量或函數(shù)”下方的輸入框輸入“[[Animal]]”（對應上面的“Animal”,意為“Animal”變量的值）。

點擊確定按鈕關閉當前面板。同樣操作第二列：點擊“SecondColumn”下方，“添加行”右側的“fx”，打開編輯值面板進行編輯。

同樣點擊確定按鈕關閉當前面板。現(xiàn)在添加行到中繼器面板變成這個樣子，意思是單擊提交按鈕時，把“輸入動物”文本框的值放在Animal中，把“輸入食物”文本框的值放在Food中，然后將Animal和Food的值分別作為第一列和第二列組成一行，將這一行添加到中繼器中。

點擊確定按鈕關閉添加行到中繼器面板。點擊確定按鈕關閉用例編輯<鼠標單擊時>面板?；氐?strong>主界面。

點擊右上角預覽按鈕打開瀏覽器，在兩個輸入框中分別輸入動物和食物，點擊提交按鈕，即可看到動態(tài)添加的效果。

四、動態(tài)刪除

那要刪除怎么做呢？也很簡單。我們關掉瀏覽器，回到主界面，添加一個用于刪除的按鈕。

點擊右側“檢視：矩形——交互”中的“鼠標單擊時”打開用例編輯<鼠標單擊時>面板，在左側添加動作欄點擊“中繼器——數(shù)據(jù)集”中的“刪除行”，右側配置動作欄勾選“（中繼器）”，下方的單選框選擇“已標記”。意思是單擊按鈕時，刪除中繼器中已標記的行。什么？已標記？怎么標記？

點擊確認按鈕回到主界面。切換到“（中繼器）index”中繼器模式編輯操作區(qū)，按住“Ctrl”鍵點擊兩個矩形，右鍵，選擇“組合”。在右側“檢視：組合——Shapes——交互樣式設置”中點擊“選中”打開交互樣式設置面板，找到填充顏色一項，勾選并將顏色改為你喜歡的顏色。按確定鍵關閉交互樣式設置面板。

再在右側“檢視：組合——交互”中雙擊“鼠標單擊時”打開用例編輯<鼠標單擊>面板，在左側添加動作欄“元件——設置選中”中點擊“切換選中狀態(tài)”，再勾選右側配置動作欄中的“當前元件”一項。這兩步操作的目的在于讓我們點擊某一行時這一行會變色來反饋我們選了該行。

我們還要讓我們點擊的某一行置為“已標記”狀態(tài)，方便我們上文中說到的用于刪除的按鈕刪除“已標記的行”。在左側添加動作欄“中繼器——數(shù)據(jù)集”中點擊“標記行”，再勾選右側配置動作欄中的“（中繼器）”一項。

五、大功告成

點擊確定按鈕關閉當前面板回到主界面，點擊預覽按鈕查看效果。

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