Category Archives: jQuery

[HTML]File API with jQuery

HTML5的技術越來越成熟,以往很多很難做到的功能,現在都可以很快速的達成。例如檔案的上傳就是一個例子,透過File API就可以在輕易的取得使用者欲上傳檔案的資訊,也方便實作前端與使用者互動的判斷。

File API中包含了許多JavaScript 物件:

File:可以用來存取硬碟中的檔案。 Blob:表示儲存在檔案中的原生資料。 FileList:File物件所成的集合。 FileReader:用來讀取檔案。

前置作業: 在使用File API之前,必須先測試瀏覽器是否支援(目前大部份瀏覽器都有支援)

Input File

1.取得檔案資訊 HTML

jQuery

2.取得檔案內容(範例為選取圖片後立即顯示) HTML

jQuery

3.上傳檔案到伺服器 HTML

jQuery

Drag、Drop File

1.桌面拖曳上傳介面-取得檔案資訊 HTML

jQuery

2.桌面拖曳上傳介面-取得檔案內容

Continue Reading

[jQuery]DataTables

DataTables

這是一個完整顯示表格的jQuery套件(包含排序、搜尋、分頁)

DataTables的option命名也很有規則性,例如b開頭的代表要傳入boolean、i 開頭的則是整數Integer、s代表string字串

範例

切換訊息語系

詳細用法可直接從官網下載source(內部完整demo code)

Continue Reading

[jQuery]Tiny Scrollbar

瀏覽器中的Scrollbar,除了IE和Opera之外,是無法用CSS變更的(不符合W3C標準)

但還是會遇到要客製化捲軸的時候

這時候就可以使用Tiny Scrollbar (Tiny Scrollbar官網)

Tiny Scrollbar是直接仿照捲軸畫面製作而成,所以在HTML結構和CSS部份可以先去官網下載example來看

Continue Reading

[jQuery].blur() & .focus()

如果要針對一些輸入框的元素做動態的判斷(比如當使用者輸入完密碼後,立即判斷強度),就必須使用focus和blur!

focus()會在元素聚焦(可以輸入)時執行,而blur則是相反

範例: HTML

jQuery

Continue Reading