Bootstrap練習之upload小程式(update)

upload.aznc.cc截圖

upload.aznc.cc截圖

最近framework正夯,也因為工作需要的關係,先選擇Bootstrap作練習。
剛好C瓜之前做了個上傳檔案的小程式,就抓它來套了。XD

先插花介紹一下上傳的小程式:用途當然是上傳檔案囉~
不論是手上剛好沒有隨身碟,但想出門列印的時候(超商可以用eamil列印,但如果要印一定數量會貴貴,且即使有隨身碟,應該也不想讓隨身碟成為毒窟吧!)、或者是要傳檔案給沒有通訊軟體的朋友們都很方便~上傳檔案後,只要抄下代碼即可。
以下是我一些簡短的過程、犯錯與心得,今天突破恥力的寫出來希望大家以此為借鏡,
若有錯誤或是想法歡迎提出討論。但是不要罵我,我會怕怕Q_Q

  • 上傳檔案:
    翻遍教學站找不到套用file的美化選項,
    Google後找到Demo for Bootstrap File Input styler
    套用方式也很簡單,下載js並引入檔案即可~
    按鈕上的名稱修改
    var buttonWord = '按鈕上的文字';
    按鈕呈現方式則修改
    $elem.replaceWith(''+buttonWord+input+'');
    當然要自己美化也是可以的,但上面的方式也是一個捷徑:D
  • 進度列:
    uploading
    這元件bootstrap有,太~棒~溜!還有動態的咧~
    因為我想讓整個過程在不轉換頁面的狀態下完成,於是同時使用對話視窗+進度列,沒想到問題就來了…
    上傳過程中如果不小心點到,視窗就會跳掉orz但檔案依然在上傳,不會因此取消
    要怎麼讓視窗不會跳掉呢?只好交給程式去處理了…
    (設計們請跟程式打好關係,不然就GG惹)

    這部份有更新,請見最下方
  • table排版
    為了直接可以套用效果,版面直接用table給他套下去!(然後就被念了,哭哭)
    table是為了呈現數據等資料用的,版面架構還是請用div~

小試一下後的感想:
雖然實行不難,但可以的話還是瞭解整個文件後再動工會更游刃有餘,
至於想打造出獨一無二的網站,還是得靠自己”客製化”囉。

上傳檔案的小程式,也歡迎大家使用:
上傳檔案的小程式
p.s..請不要用舊版IE開,因為我不打算支援它。XD

程式原始檔:
github

參考網站:
Bootstrap中文教學
Demo for Bootstrap File Input styler


下午眼瞎了之補充:
對話視窗跳掉的問題,其實在教學文件有提到解套方式,不一一贅述因為眼瞎實在太丟臉惹,以下是我自己的memo。
基本上加上兩個屬性即可。
data-backdrop="static" data-keyboard="false"

以下是數值跟說明~
data-backdrop="true" 打開暗背景效果
data-backdrop="false" 關閉暗背景效果
data-backdrop="static" 鎖定暗背景效果,防止對話視窗因為點擊暗背景處而被關閉
data-keyboard="true" 按esc按鈕關閉對話視窗,需搭配tabindex=”-1″(鍵盤事件)才可起作用
data-keyboard="false" 按esc按鈕”不會”關閉對話視窗,就算加了tabindex=”-1″也沒用

這是我自己的測試網頁

參考網站:
Disallow twitter bootstrap modal window from closing
How do you enable the escape key close functionality in a Twitter Bootstrap modal?
Modal Close On Escape keyboard = true Does Not Work

在〈Bootstrap練習之upload小程式(update)〉中有 1 則留言

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *