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
• 進度列：
  
  這元件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