• <acronym id="gvoe3"><meter id="gvoe3"><address id="gvoe3"></address></meter></acronym>
  • <pre id="gvoe3"></pre>
    <p id="gvoe3"><strong id="gvoe3"><small id="gvoe3"></small></strong></p>

  • <pre id="gvoe3"><label id="gvoe3"><xmp id="gvoe3">
      axure商城

      Axure教程——用中繼器做穿梭框

      穿梭框是常用的一個選擇器,它使用直觀方式在左右列表框移動數據,實現數據的多項選擇。

      所以今天和大家分享如何用中繼器做一個高保真的穿梭框原型,本教程主要是講解兩個中繼器的聯動交互,屬于中高級教程。

      原型預覽地址:https://yu1cwx.axshare.com

      1、材料準備

      中繼器(內含矩形)*2;背景框*2;左箭頭*1;右箭頭*2;文本*2,如下圖所示擺放;

      中繼器內的矩形需要取消邊框,然后設置鼠標移入時填充顏色為灰色,選中時填充顏色為藍色,這樣會有更好的交互感。

      背景框置于底層,調整合適的大小和位置即可。

      左邊的為未選項中繼器1,在中繼器表格內填寫對應選項文字;然后復制到右面,為已選項中繼器2,由于已選項默認為0,所以需要刪除中繼器所有行,默認空值即可。

      中繼器1和2均需取消隔離選項組和隔離單選按鈕組效果,兩個中繼器內的矩形需要設置單選組。

      文本元件命名為邏輯1和邏輯2,默認為空且隱藏,后續用于邏輯交互

      2、交互設置

      中繼器1每項載入時:

      設置中繼器1內矩形文字為列表Column0的值,這個交互是中繼器默認設置的。

      中繼器1內矩形鼠標單擊時:

      選中當前元件:因為之前我們設置了選中的顏色變藍,所以這樣做以后,就可以知道選中了那一項,而且因為設置了單選組,所以也不會同時選中多個。

      設置邏輯1的文本為列表Column0的值:這里其實就是把選中的值記錄下來,方便后面左右箭頭穿梭的操作

      中繼器2每項加載時及內部矩形鼠標單擊時:

      交互和中繼器1一致,不過需要注意的是,中繼器2里面設置的文本是邏輯2的文本。

      右箭頭鼠標單擊時:

      這里需要判斷邏輯1的文字是否為空,如果為空就是還沒選中,就不發生交互,如果不為空,就需要做一個增加行和刪除行的交互。

      增加行:在中繼器2里增加行,增加的值為邏輯1文本值

      刪除行:刪除中繼器1里的和邏輯1文本值相同的行

      完成上述兩個交互之后,我們還需要清空邏輯1的文本,因為如果不清空,我們點右箭頭就可以無限增加同一個選項,所以這里需要清空邏輯1的文本值。

      左箭頭鼠標單擊時:

      左箭頭和右箭頭的交互其實是一個道理的,首先需要判斷邏輯2的文本是否為空,如果為空就是還沒選中,就不發生交互,如果不為空,就需要做一個增加行和刪除行的交互,不過這里和中繼器1的交互是反過來的

      增加行:在中繼器1里增加行,增加的值為邏輯2文本值

      刪除行:刪除中繼器2里的和邏輯2文本值相同的行

      設置邏輯2的文本值為空值

      那這樣一個實用的穿梭框原型就制作完成了。

      完成之后,以后我們需要使用的話,只需要填寫在左邊中繼器1的表格里填寫選項文字即可,方便使用,小提示,如果選項多的話可以在excel表格復制粘貼到中繼器表格里哦

      那么以上就是本期的全部內容了,我們下期見,88

      給TA買糖
      共{{data.count}}人
      人已贊賞
      高級教程

      Axure文件上傳效果及添加后續交互設置

      2021-3-22 17:35:07

      高級教程

      Axure中使用JS代碼調用ECharts、AntV圖表

      2021-5-11 11:07:54

      axure商城
      8 條回復 A文章作者 M管理員
      1. LRREO

        求rp文件

      2. 152****6918

        很好

      3. 希夢蝶

        感覺非常有用,最近正在學習中繼器

      4. kobayashiotaku

        可以了

      5. kobayashiotaku

        即使寫了“設置選項組名稱”也無法做到互斥。

        • 楓林

          選擇里面的框設置,不是選中繼器設置

      6. kobayashiotaku

        這么做有個小問題,就是可以一次性選擇好幾條數據,但是穿梭過去的時候,只有一條,最好是能讓選擇有互斥性。

      ?
      個人中心
      購物車
      優惠劵
      今日簽到
      有新私信 私信列表
      搜索
      俄罗斯videoxxxoo
    1. <acronym id="gvoe3"><meter id="gvoe3"><address id="gvoe3"></address></meter></acronym>
    2. <pre id="gvoe3"></pre>
      <p id="gvoe3"><strong id="gvoe3"><small id="gvoe3"></small></strong></p>

    3. <pre id="gvoe3"><label id="gvoe3"><xmp id="gvoe3">