- 版本:Axure RP 8.0.0.3303
- (上節)內容介紹:簡單模仿TIM登錄界面,做登錄+取消登錄的功能以及相應的效果,本文重點講的功能有:1. 查看隱藏密碼 2.登錄與取消登錄效果
- (本節)內容介紹:在“上節”基礎上增加字母鍵盤和數字鍵盤,用於輔助電腦鍵盤輸入;
- 後續所講均只介紹“Axure RP 模仿TIM登錄界面(一)”之後新增加內容。
一、繪製界面和控件佈局
- 增加1個icon(Keyboard),用戶觸發打開輔助字母鍵盤;
- 增加矩形框並轉換成動態面板,用於容納字母,默認為隱藏狀態;
- 增加矩形框並轉換成動態面板,用於容納數字,默認為隱藏狀態;
- 增加2個全局變量,分別為upperStr、lowerStr,upperStr,用於鍵盤大小寫轉換;
- 增加1個全局變量,命名為Str,用於記錄數字盤和字母盤輸入的值;
二、對icon(Keyboard)做交互
- 分析:設計時,動態面板默認為隱藏,數字盤由字母盤調出,關閉字母盤時同時關閉數字盤,且字母盤關閉在字母盤的“關閉”上做交互,所有主界面上,只需要icon做字母盤顯示即可。
- 對icon(Keyboard)做“鼠標單擊時”交互
三、對字母盤做交互
- 分析:字母盤具備功能是對密碼框輸入字符,這裡介紹3種功能,1是退格(按序刪除密碼框字符),2是大小寫轉換,3是按字母后字母寫入密碼框,其餘功能在過程中有過相同的介紹;
- 對A、B、C等字符做交互,“鼠標單擊時”把文本寫入文本框;
- 對↑矩形框做交互,“鼠標單擊時”把字母由大寫轉成小寫或由小寫轉成大寫,這裡用到全局變量,當大寫轉成小寫時候,把lowerStr用charAt函數按A與a對應的位置方式進行賦值;
- 對撤銷符號做交互,“鼠標單擊時”把密碼框字符按序退格,公式為"[[str.substr(0,str.length-1)]]",即從字符串0位置開始截取,0位置也即第一個字符串,截取到str總長度-1的位置,即刪除最後一個字符;
四、對數字盤做交互
- 分析:數字盤具備功能也是對密碼框輸入字符,所有與字母盤一樣,重複的不介紹,只是為了增加有趣,在字母盤的“@”矩形框和“%”矩形框增加交互,要求不能輸入這2個字符到密碼框中。
- 對@和%矩形框做交互,顯示密碼提示2秒後自動隱藏。
五、視頻演示
閱讀更多 blitheDotChen 的文章