• <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 RP 9 教程—模擬撥號鍵盤

      效果描述:

      • 按下數字按鈕,輸入對應的數字。
      • 按下退回按鈕刪除上一步的數字。
      • 當有數字時,顯示添加號碼btn和退回btn。

      實現邏輯

      函數[[LVAR.substring(from,to)]]:截取第from位到to位的字符串,舉例:
      [[1234567.substring(1,4)]]=234,也就是說截取第一位到第四位的數字但不包括第一位。函數[[LVAR.length]]:字符串長度,舉例:
      [[手機號碼1234.length]]=4,也就是說該函數可以獲得元件字符串的長度。
      我們制作撥號鍵盤需要的按鈕,鼠標按下按鈕時,為手機號碼文本框“Text 輸入”設置文本[[X]]Y,這里X是局部變量,是手機號碼文本框的文字,Y是按鈕對應的數字,這樣就實現了按下鍵盤輸入對應的數字。我們制作撥號鍵盤的退回按鈕,點擊退回按鈕,利用上邊提到的函數截取字符串實現退回操作。

      實現步驟—輸入數字

      我們增加所需元件,并命名。本案例中手機號碼文本框命名為“Text 輸入”,數字鍵盤命名為btn 1、btn 2、btn 3以此類推。這里注意手機號碼文本框要選成文本框元件。

      為元件 btn 1(即數字鍵盤1)設置交互:

      鼠標按鍵按下時,當前元件選中為真,Text 輸入 文本為[[Number]]1(其中Number是局部變量,為“Text 輸入”的元件文字)鼠標按鍵釋放時,

      當前元件選中為假。

      (這里注意,之所以做選中是為了交互的效果,我設置了選中時讓按鈕變色,這樣可以更逼真的模擬撥號鍵盤)

       

      為元件 btn 2(即數字鍵盤2)設置交互:

      鼠標按鍵按下時,

      當前元件選中為真,

      Text 輸入 文本為[[Number]]1

      (其中Number為局部變量,是“Text 輸入”的元件文字)

      鼠標按鍵釋放時,

      當前元件選中為假。

       

      為元件 btn 3 …設置交互,以此類推。

      這樣,輸入數字的交互就實現了

      如圖:

      Axure RP 9 教程—模擬撥號鍵盤
      Axure RP 9 教程—模擬撥號鍵盤

      實現步驟—退回數字

      我們為退回按鈕設置交互:

      鼠標按鍵按下時,設置當前元件選中為真,設置文本Text輸入到[[Number.substr(0,Number.length-1)]](其中Number是局部變量,為Text 輸入的元件文字)

      鼠標按鍵釋放時,

      設置當前元件選中為假

      這樣,退回交互就設置完成了。

      Axure RP 9 教程—模擬撥號鍵盤
      Axure RP 9 教程—模擬撥號鍵盤
      附件下載鏈接:https://www.axureshop.com/wp-content/uploads/edd/2019/01/14095639.rp
      Axure RP 9 教程—模擬撥號鍵盤

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

      Axure版跳一跳小游戲教程

      2019-1-10 19:11:07

      Axure教程

      Axure RP 9 教程—環形進度條

      2019-1-18 21:50:21

      axure商城
      0 條回復 A文章作者 M管理員
        暫無討論,說說你的看法吧
      ?
      個人中心
      購物車
      優惠劵
      今日簽到
      有新私信 私信列表
      搜索
      俄罗斯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">