可以更改樣式與文字的選擇文件功能

AxureRP8.0教程 小樓一夜聽春語 2756℃ 0評論

今天在群里看到了一個需求。

有一位群友想將選擇文件元件的文字修改成自己想要的文字。

我們通過將文本框設置為“文件”類型,就能夠進行本地文件的選擇。

不過這個設置在瀏覽器中顯示文字的也不一致,谷歌瀏覽器是“選擇文件”,火狐瀏覽器是“瀏覽...”。

而且,按鈕的樣式也不能隨意改變。

為了解決這個問題,我通過查詢JQuery的相關資料,找到了通過JS解決這個問題的方案。

效果如下:

上圖中我用了一個文件的形狀元件實現了點擊時打開文件選擇窗口的交互效果。

如果你對JS一無所知,也沒有關系。

你可以下載本教程的源文件,將選擇文件的形狀元件更改形狀、樣式以及文本滿足自己的需求,就能夠復制到自己的原型中使用了。

例如:

需要注意的是,不要隨意修改元件的命名,如果修改需要同步修改JS代碼中與之對應的名稱。

接下來,我們一起來看它的實現的過程。

首先,我們來整理思路。

1、我們需要一個文本框元件用于打開選擇文件的窗口,所以在載入時要獲取到這個元件的控制權;

2、當選擇文件之后,也就是文本框發生改變時,我們要將文本框獲取的文件路徑顯示出來;

3、選擇文件的按鈕是一個形狀,我們需要點擊形狀時觸發文本框元件的點擊交互。

然后,我們準備需要使用的元件。

文本框和顯示文件路徑的元件都要命名,因為在JS代碼中,我們需要通過它們的名稱對它們進行控制。

最后,我們通過JS代碼來幫助我們實現功能。

1、將文本框“SelectFile”的類型設置為“文件”,并隱藏這個元件。然后,在元件【載入時】通過【打開鏈接】于“當前窗口”的動作加載JS代碼。這段JS代碼幫助我們獲取了文本框的控制權,并且在文本框發生改變時,將文本框的值(文件路徑)添加到了元件“FilePath”的文本中。

提示:如果選擇文件后不想顯示路徑,只想顯示文件名的話,只要將代碼中的“f.value”替換為“f.value.substr(f.value.lastIndexOf("\\")+1)”即可。

2、為選擇文件的形狀元件添加【鼠標單擊時】的交互,同樣通過【打開鏈接】于“當前窗口”的動作執行JS代碼。這段代碼是調用了文本框元件的“click()”函數,這個函數就是用來打開本地的文件選擇窗口。

通過上面兩步,我們就完成了一個選擇文件功能的制作。

最后,邀請大家關注微信訂閱號“iaxure”(二維碼在本站首頁右上方),及時獲取本站最新動態內容。

我不想通過把下載鏈接放入微信訂閱號,強迫大家去關注,不過,我非常建議大家去關注,因為訂閱之后能夠第一時間看到本站最新的內容發布。

源文件下載:http://downloads.iaxure.com/select_file.rp

 


~~~~~~~~~~~~ 正文結束 下面沒了 ~~~~~~~~~~~~

小樓老師全新打造Axure RP 9精品課程,以獨有的教學方法與技巧,幫助你以最短的時間高效的完成學習目標。

《Axure RP 9 萌新修煉視頻》-----從零入門進階的優質課程------【點此查看詳情】


轉載請注明:Axure原創教程網 » 可以更改樣式與文字的選擇文件功能

喜歡 (22)or分享 (0)
頭像
發表我的評論
取消評論

表情

Hi,您需要填寫昵稱和郵箱!

  • 昵稱 (必填)
  • 郵箱 (必填)
  • 網址
(9)個小伙伴在吐槽
  1. 頭像
    嗯,是挺屌的,你還能再屌點兒嗎?
    哦哦2018-08-28 10:29 回復
  2. 頭像
    不錯
    天天2018-08-29 13:52 回復
  3. 頭像
    ...插入,文本框,類型選擇“文件”,這是axure自帶的功能也能簡單實現吧
    L2019-05-30 16:56 回復
    • 小樓一夜聽春語
      自帶的你改個樣式看看
      小樓一夜聽春語2019-05-31 09:23 回復
  4. 頭像
    win10 Axure 9 用你的實例無效
    姆小佩2019-08-08 23:39 回復
    • 小樓一夜聽春語
      這只有Axure8才支持
      小樓一夜聽春語2019-08-12 15:27 回復
  5. 頭像
    您在,在嗎,我想問一下,怎么獲取文件本身呢,不獲取文件名,比如我想獲取選擇的圖片并加載出來
    csx2019-08-28 16:33 回復
  6. 頭像
    小樓老師,axure9版本要怎么實現這個功能啊?這個方法只在8版本可以
    北方丶竄天猴2019-12-29 10:15 (2天前)回復
    • 小樓一夜聽春語
      9不支持
      小樓一夜聽春語2019-12-31 09:54 (2小時前)回復
辽宁快乐12选5走势图表