建站
咨詢
售后
建站咨詢
新聞中心
入行產(chǎn)品已經(jīng)有好些日子了，打算從產(chǎn)品壹佰的小透明轉(zhuǎn)變一下，將工作學習中的知識心得總結(jié)出來，既是一種分享，也是自己在兵荒馬亂的工作中的梳理和記錄。
成都創(chuàng)新互聯(lián)是專業(yè)的廬陽網(wǎng)站建設(shè)公司，廬陽接單;提供做網(wǎng)站、網(wǎng)站設(shè)計,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務;采用PHP框架,可快速的進行廬陽網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!
今天想分享一下用Axure制作可以隱藏密碼文本的輸入框，制作效果如下圖：
思路：
1. 首先需要一個輸入框，但是Axure的文本框并不能實現(xiàn)對密碼的隱藏。所以，我們需要一個動態(tài)面板，面板的狀態(tài)1是一個現(xiàn)實密碼字符的文本框，面板2的狀態(tài)是隱藏密碼字符的密碼框。
2. 需要兩張圖片，表示顯示/隱藏密碼字符。這兩張圖片通過單擊進行切換。
3. 實現(xiàn)動態(tài)面板與兩張圖片的交互。
思路有了，那么下面就開始做吧！
***步：
需要一個矩形來放動態(tài)面板、圖像按鈕。添加相應元件如圖：
第二步：
為動態(tài)面板添加狀態(tài)：
狀態(tài)1：隱藏密碼字符
首先添加一個文本框，添加屬性如下：
狀態(tài)2：顯示密碼字符
再添加一個文本框元件，添加屬性如下：
同時我們需要取消兩個文本框的填充顏色，否則與矩形容器的顏色會不一樣。
第三步：制作圖片點擊切換效果
1.通過單擊切換圖片的選中狀態(tài)；
2.圖片選中狀態(tài)改變時，切換為另一張圖片：
第四步：添加交互
當圖片按鈕的選中狀態(tài)改變時，切換動態(tài)面板狀態(tài)：
另外，還需要將動態(tài)面板兩個狀態(tài)中的輸入字符同步：
先為hide文本框添加：
同理，為show文本框添加：
到這里，我們就完成這個原型的制作啦！
在早期的時候，密碼框的設(shè)計習慣默認為隱藏密碼字符。但是相信你們跟我一樣都有同感：大多數(shù)情況下沒有人站在背后偷看你的密碼，隱藏字符后反而為自己帶來不便。所以，這里我默認是顯示密碼字符，當有需要的時候，點擊圖片按鈕就可以切換到隱藏字符按鈕啦！
分享標題：如何用Axure做一個清清爽爽的「密碼輸入框」？
文章位置：http://www.dlmjj.cn/article/dhjhioh.html
