15天學會jQuery(11-15天)

 

15 Days of jQuery(Day 11) --- 使用不苛刻的javascript代碼實現多檔案上傳

 

好幾個月以前，當我在追逐互連網上AJAX熱潮的時候，我在 FiftyFourEleven網站上發現了一篇使用創新的javascript代碼實現當時正在困擾我的“ 單檔案元素實現多檔案上傳”的文章。

所以當我想寫作《15天漫遊jQuery》的時候，我第一個想到的就是用jQuery實現這個功能。

接觸易用性狂熱愛好者

幾天前當我檢查網站記錄的時候，發現了一條遺漏的文章trackback。跟過去看的時候我發現我的兩篇jQuery文章被作者引用來證明他為什麼討厭javascript。

根據這個人的說法，任何工具或技術如果沒有將易用性放在第一位都將成為垃圾。

儘管我很不同意這位仁兄一杆子打死的態度，但他還是讓我對這篇詳細教程有所留意。當我在編寫一個簡單網頁效果的時候，我會盡量小心謹慎的處理。這樣如果網站訪客們決定關閉javascript代碼執行功能的時候，他們仍然可以正常使用網站的功能。

關於第一價值的兩個教程

• 使用一個檔案輸入元素實現多檔案上傳，並讓整個互動過程流暢舒適。

• 讓多檔案上傳更加人性化，但要避免以犧牲可用性為代價。關鍵在於使用不苛刻的javascript代碼製作多檔案輸入地區。

示範

• 只有一個檔案輸入元素，但添加了jQuery和其他代碼實現較為親近使用者的多檔案上傳功能。

示範一地址

• 在頁面(x)html代碼中使用了多個檔案輸入元素，但通過jQuery調整為與第一個示範類似的顯示頁面效果。優點是代碼是不苛刻的。。。即使關閉了javascript執行，使用者也能上傳多個檔案。

示範二地址

解釋

單檔案輸入框

jQuery的$(document).ready() 函數的工作有兩個：

在文檔下載量最大的時候建立一個div元素。 尋找檔案上傳框（假設這裡只有一個），然後給它附上一個onChange事件。

$("input[@type=file]").change(function(){doIt(this, fileMax);});

doit()函數（簡單又好記，呵呵~）檢查是否達到了最大檔案數量限制，如果不是，它會隱藏當前檔案輸入框，在父div裡添加一個新的檔案輸入框，將輸入框內的檔案名稱使用id “files_list”作為標記，在最後添加一個“刪除”按鈕。

在DOM樹中導航，我使用jQuery的parent()函數，然後用remove()函數移除元素。我還使用了append()和prepend()函數分別添加檔案名稱和新的輸入框。

兩個關鍵點

- 最大檔案上傳數量設定：

var fileMax = 3;

- 輸入框必須有適當的定位措施：

<input type="file" class="upload" name="fileX[]"/>

這樣弄以後輸入框可疑由訪問者決定添加還是刪除，沒有任何關於id或名稱的操作。當這個表單代碼發送給伺服器端指令碼的時候，相關資訊就已經被存放在了一個數組中了。

多檔案輸入框

首先，檔案允許上傳的數量由頁面中的檔案輸入框的數量決定。其次，你仍然需要通過某種方法為每個輸入框接收到的內容用一個數組存放。

<input type="file" class="upload" name="fileX[]"/>

第二個示範跟前面的比起來最大的不同在於，我遍曆了每個檔案輸入框並在其內容有改動時執行doit()函數。通過遍曆每一個輸入框，我可以為My Code添加有用的額外資訊：輸入框內容在“堆棧”中的順序。

換句話說，當這段代碼執行時，它會特別指定第一個輸入框，或者第二個，抑或第三個。

代碼見下：

$("input[@type=file]:nthoftype("+n+")")

jQuery的靈活性允許我們使用CSS和XPath描述語句定位指定的元素位置。

你會發現當一個檔案被選中時，檔案輸入框都會被檔案名稱覆蓋。點擊檔案名稱就可以選擇其他不同的檔案。

 

15 Days of jQuery(Day 12) --- jQuery Lightbox （外掛程式）

 

Cody Lindley 移植的第一版“ Thickbox”讓我第一次感受到了jQuery的魅力。後來他又做了一些 代碼升級以修複若干跨瀏覽器的相容性問題。

一些需要注意的地方

$(document).ready 取代了TB_init() 函數，作用是在每個包含對象名“thickbox”的連結上附加一個onClick事件。

function TB_init(){$("a.thickbox").click(function(){var t = this.title || this.innerHTML || this.href;TB_show(t,this.href);this.blur();return false;});

當這些連結被點擊時，TB_show()函數就將執行。

$("body").append("<div id='TB_overlay'></div><div id='TB_window'></div>");$("#TB_overlay").click(TB_remove);$(window).resize(TB_position);$(window).scroll(TB_position);$("#TB_overlay").show();$("body").append("<div id='TB_load'><div id='TB_loadContent'><imgsrc='images/circle_animation.gif' /></div></div>");

如你所見，在文檔body元素前添加了兩個div元素。換句話說，這兩個div元素將被添加在頁面html代碼的body關閉元素前。

覆蓋的div將使用一個特定的包含不透明外表的CSS檔案指定表現。TB_window的代碼用來通過AHAH在頁面中放置一張圖片或者加入另一個頁面。$(window).resize 和$(window).scroll 告訴jQuery在使用者重新調整視窗大小或者拖動頁面翻頁的時候執行TB_position函數。這是保證Thickbox始終保持在視窗中心部位的手段。

接下來，Cody查詢url的尾碼。

var urlString = /.jpg|.jpeg|.png|.gif|.html|.htm|.php|.cfm|.asp|.aspx|.jsp|.jst|.rb|.txt/g;var urlType = url.match(urlString);if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif'){//code to show images

如果這是一個圖片檔案，則jQuery的append函數會添加html代碼到適當位置。

$("#TB_window").append("<a href='' id='TB_ImageOff' title='Close'><imgid='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"'alt='"+caption+"'/></a>"+ "<div id='TB_caption'>"+caption+"</div><divid='TB_closeWindow'><a href='#' id='TB_closeWindowButton'>close</a></div>");$("#TB_closeWindowButton").click(TB_remove);

另外，遠程檔案將使用jQuery的load()函數匯入。

$("#TB_ajaxContent").load(url, function(){

 

15 Days of jQuery(Day 13) --- jQuery 表格

 

一位叫Klaus的朋友編寫了一個小外掛程式， 用jQuery實現可用性極佳的javascript表格。

設定好正確的(x)HTML 和CSS後，你可以像下面那樣建立表格：

$.tabs(”container”); first tab on by default 如果你像在預設位置“上方”再添加一個表格： $.tabs(”container”, 2); second tab on

Klaus這裡 樣本，你可以看看最終效果。

我的改版

我稍微修改了Klaus的代碼，添加了一個簡單的表單用來產生表格的表頭。

用法：

非常簡單。只需要輸入每個表格的表頭（最多5個），然後點擊表單下方的按鈕。下一個頁面將產生結果HTML代碼，你可以複製然後粘貼到檔案中。

你還需要 下載Klaus網站的CSS檔案，做些你自己的修改，當然還要上傳jQuery架構庫到你的伺服器上。

這裡是表格產生器的地址。

 

15 Days of jQuery(Day 14) --- Javascript 工具提示

 

Cody Lindley ，Thickbox的作者，日前發布了 jTip - jQuery 工具提示。

我對其中很多想法和思路拍案叫絕。我知道你已經看過很多類似的工具提示代碼了。但是，Cody 的方法已經在我的工作中顯露出了閃光點。

當我檢查HTML代碼時，我發現了一個大問題，可訪問性。連結在javascript關閉的時候無法工作。我並不是傾向於一定要實現全面的可訪問性，只是在這裡我認為可以有其他更具親和力的方式實現相同的功能。

尤其是，我個人不喜歡那種為了可訪問性而去犧牲可用性來實現在提示框上連結另一個頁面連結的方法。我喜歡這個提示框 - 不是對Cody不尊重，只是在我這裡我“需要”它能夠在各種情況下工作。

今天我要提供給大家的是Cody的工具提示代碼的小小修改。如果你不是Cody工具提示的愛好者的話，我的改版對你來說也許不是很在意。但如果你喜歡他的作品同時希望它可以在javascript關閉的時候照常工作，這個也許是你需要的。

我的改動

讓我產生修改想法的，是他的代碼在Yahoo上的應用。我不喜歡他使用的代碼：

<a href="yahoo.htm?width=175&amp;link=http://www.yahoo.com"name="Before You Click..."id="yahooCopy"class="jTip">Go To Yahoo</a>

所以我重寫了他的部分代碼，成了現在這個樣子：

<a href="http://www.yahoo.com"rel="yahoo.htm?width=175&link=yahoo&name=Before%20%20You%20Click..."id="yahooCopy"class="jTip">Go To Yahoo</a>

我的樣本

改進：HTML標準校正

My Code可以通過w3.org的測試

改進：命名

在我修改Cody的代碼的時候我發現他使用了一個用來儲存連結名稱的叫做“title”的變數名，這會導致一些混淆。

我標出了這個命名問題，即使我認為這不過是個小小的失誤。

改進：可用性

使用My Code，你可以讓每個提示框都含有真實連結地址到另一個文檔，不管內部的還是外部的。或者你只是想要那個提示框，不想關心可用性，你同樣可以讓連結部分留空。

選擇權在你。

感謝

Cody提供了偉大的代碼，協助我節省了大量的時間和精力。我的修改只是對原有代碼的輕微“調整”，希望朋友們喜歡。

 

15 Days of jQuery(Day 15) --- 拖拽效果和選取器