[p][color=#ffffff][hilitecolor=#808080]15 days of jquery(day 11) --- 使用不苛刻的javascript代碼實現(xiàn)多文件上傳[/hilitecolor][/color][br]好幾個月以前，當我在追逐互聯(lián)網(wǎng)上ajax熱潮的時候，我在 fiftyfoureleven網(wǎng)站上發(fā)現(xiàn)了一篇使用創(chuàng)新的javascript代碼實現(xiàn)當時正在困擾我的“ 單文件元素實現(xiàn)多文件上傳”的文章。[/p] [p]所以當我想寫作《15天漫游jquery》的時候，我第一個想到的就是用jquery實現(xiàn)這個功能。[/p] [p]接觸易用性狂熱愛好者[/p] [p]幾天前當我檢查網(wǎng)站記錄的時候，發(fā)現(xiàn)了一條遺漏的文章trackback。跟過去看的時候我發(fā)現(xiàn)我的兩篇jquery文章被作者引用來證明他為什么討厭javascript。[/p] [p]根據(jù)這個人的說法，任何工具或技術(shù)如果沒有將易用性放在第一位都將成為垃圾。[/p] [p]盡管我很不同意這位仁兄一桿子打死的態(tài)度，但他還是讓我對這篇詳細教程有所留意。當我在編寫一個簡單網(wǎng)頁效果的時候，我會盡量小心謹慎的處理。這樣如果網(wǎng)站訪客們決定關閉javascript代碼執(zhí)行功能的時候，他們?nèi)匀豢梢哉Ｊ褂镁W(wǎng)站的功能。[/p] [p]關于第一價值的兩個教程[/p] [p]使用一個文件輸入元素實現(xiàn)多文件上傳，并讓整個交互過程流暢舒適。[br]讓多文件上傳更加人性化，但要避免以犧牲可用性為代價。關鍵在于使用不苛刻的javascript代碼制作多文件輸入?yún)^(qū)域。[br]演示[/p] [p]只有一個文件輸入元素，但添加了jquery和其他代碼實現(xiàn)較為親近用戶的多文件上傳功能。[br]演示一地址[/p] [p]在頁面(x)html代碼中使用了多個文件輸入元素，但通過jquery調(diào)整為與第一個演示類似的顯示頁面效果。優(yōu)點是代碼是不苛刻的。。。即使關閉了javascript執(zhí)行，用戶也能上傳多個文件。[br]演示二地址[/p] [p]解釋[/p] [p]單文件輸入框[/p] [p]jquery的$(document).ready() 函數(shù)的工作有兩個：[/p] [p]在文檔下載量最大的時候創(chuàng)建一個div元素。 查找文件上傳框（假設這里只有一個），然后給它附上一個onchange事件。[/p] [p]$("input[@type=file]").change(function(){[br]doit(this, filemax);[br]});doit()函數(shù)（簡單又好記，呵呵~）檢查是否達到了最大文件數(shù)量限制，如果不是，它會隱藏當前文件輸入框，在父div里添加一個新的文件輸入框，將輸入框內(nèi)的文件名使用id “files_list”作為標記，在最后添加一個“刪除”按鈕。[/p] [p]在dom樹中導航，我使用jquery的parent()函數(shù)，然后用remove()函數(shù)移除元素。我還使用了append()和prepend()函數(shù)分別添加文件名和新的輸入框。[/p] [p]兩個關鍵點[/p] [p]- 最大文件上傳數(shù)量設定：[/p] [p]var filemax = 3;- 輸入框必須有適當?shù)亩ㄎ淮胧篬/p] [p]這樣弄以后輸入框可疑由訪問者決定添加還是刪除，沒有任何關于id或名稱的操作。當這個窗體代碼發(fā)送給服務器端腳本的時候，相關信息就已經(jīng)被存放在了一個數(shù)組中了。[/p] [p]多文件輸入框[/p] [p]首先，文件允許上傳的數(shù)量由頁面中的文件輸入框的數(shù)量決定。其次，你仍然需要通過某種方法為每個輸入框接收到的內(nèi)容用一個數(shù)組存放。[/p] [p]第二個演示跟前面的比起來最大的不同在于，我遍歷了每個文件輸入框并在其內(nèi)容有改動時執(zhí)行doit()函數(shù)。通過遍歷每一個輸入框，我可以為我的代碼添加有用的額外信息：輸入框內(nèi)容在“堆?！敝械捻樞?。[/p] [p]換句話說，當這段代碼執(zhí)行時，它會特別指定第一個輸入框，或者第二個，抑或第三個。[/p] [p]代碼見下：[/p] [p]$("input[@type=file]:nthoftype("+[br]n+")")jquery的靈活性允許我們使用css和xpath描述語句定位指定的元素位置。[/p] [p]你會發(fā)現(xiàn)當一個文件被選中時，文件輸入框都會被文件名稱覆蓋。點擊文件名就可以選擇其他不同的文件。[/p] [p][br]--------------------------------------------------------------------------------[/p] [p][hilitecolor=#808080][color=#ffffff]15 days of jquery(day 12) --- jquery lightbox （插件）[/color][/hilitecolor][br]cody lindley 移植的第一版“ thickbox”讓我第一次感受到了jquery的魅力。后來他又做了一些 代碼升級以修復若干跨瀏覽器的兼容性問題。[/p] [p]一些需要注意的地方[/p] [p]$(document).ready 取代了tb_init() 函數(shù)，作用是在每個包含對象名“thickbox”的鏈接上附加一個onclick事件。[/p] [p]function tb_init(){[br]$("a.thickbox").click(function(){[br]var t = this.title || this.innerhtml || this.href;[br]tb_show(t,this.href);[br]this.blur();[br]return false;[br]});當這些鏈接被點擊時，tb_show()函數(shù)就將執(zhí)行。[/p] [p]$("body")[br].append("");[br]$("#tb_overlay").click(tb_remove);[br]$(window).resize(tb_position);[br]$(window).scroll(tb_position);[br]$("#tb_overlay").show();[br]$("body").append("");如你所見，在文檔body元素前添加了兩個div元素。換句話說，這兩個div元素將被添加在頁面html代碼的body關閉元素前。[/p] [p]覆蓋的div將使用一個特定的包含不透明外表的css文件指定表現(xiàn)。tb_window的代碼用來通過ahah在頁面中放置一張圖片或者加入另一個頁面。$(window).resize 和$(window).scroll 告訴jquery在用戶重新調(diào)整窗口大小或者拖動頁面翻頁的時候執(zhí)行tb_position函數(shù)。這是保證thickbox始終保持在窗口中心部位的手段。[/p] [p]接下來，cody查詢url的后綴。[/p] [p]var urlstring = /.jpg|.jpeg|.png|.gif|.html|.htm|.php|.cfm|.asp|.aspx|.jsp|.jst|.rb|.txt/g;[br]var urltype = url.match(urlstring);[br]if(urltype == '.jpg' || urltype == '.jpeg' || urltype == '.png' || urltype == '.gif'){//code to show images如果這是一個圖片文件，則jquery的append函數(shù)會添加html代碼到適當位置。[/p] [p]$("#tb_window").append(""[br]+ "");[br]$("#tb_closewindowbutton").click(tb_remove);另外，遠程文件將使用jquery的load()函數(shù)導入。[/p] [p]$("#tb_ajaxcontent").load(url, function(){[br]--------------------------------------------------------------------------------[/p] [p][color=#ffffff][hilitecolor=#808080]15 days of jquery(day 13) --- jquery 表格[/hilitecolor][/color][br]一位叫klaus的朋友編寫了一個小插件， 用jquery實現(xiàn)可用性極佳的javascript表格。[/p] [p]設置好正確的(x)html 和css后，你可以像下面那樣創(chuàng)建表格：[/p] [p]$.tabs(”container”); first tab on by default 如果你像在默認位置“上方”再添加一個表格： $.tabs(”container”, 2); second tab on[/p] [p]klaus這里 示例，你可以看看最終效果。[/p] [p]我的改版[/p] [p]我稍微修改了klaus的代碼，添加了一個簡單的表單用來生成表格的表頭。[/p] [p]用法：[/p] [p]非常簡單。只需要輸入每個表格的表頭（最多5個），然后點擊表單下方的按鈕。下一個頁面將生成結(jié)果html代碼，你可以復制然后粘貼到文件中。[/p] [p]你還需要 下載klaus網(wǎng)站的css文件，做些你自己的修改，當然還要上傳jquery框架庫到你的服務器上。[/p] [p]這里是表格生成器的地址。[/p] [p][br]--------------------------------------------------------------------------------[/p] [p][color=#ffffff][hilitecolor=#808080]15 days of jquery(day 14) --- javascript 工具提示[/hilitecolor][/color][br]cody lindley ，thickbox的作者，日前發(fā)布了 jtip - jquery 工具提示。[/p] [p]我對其中很多想法和思路拍案叫絕。我知道你已經(jīng)看過很多類似的工具提示代碼了。但是，cody 的方法已經(jīng)在我的工作中顯露出了閃光點。[/p] [p]當我檢查html代碼時，我發(fā)現(xiàn)了一個大問題，可訪問性。鏈接在javascript關閉的時候無法工作。我并不是傾向于一定要實現(xiàn)全面的可訪問性，只是在這里我認為可以有其他更具親和力的方式實現(xiàn)相同的功能。[/p] [p]尤其是，我個人不喜歡那種為了可訪問性而去犧牲可用性來實現(xiàn)在提示框上鏈接另一個頁面鏈接的方法。我喜歡這個提示框 - 不是對cody不尊重，只是在我這里我“需要”它能夠在各種情況下工作。[/p] [p]今天我要提供給大家的是cody的工具提示代碼的小小修改。如果你不是cody工具提示的愛好者的話，我的改版對你來說也許不是很在意。但如果你喜歡他的作品同時希望它可以在javascript關閉的時候照常工作，這個也許是你需要的。[/p] [p]我的改動[/p] [p]讓我產(chǎn)生修改想法的，是他的代碼在yahoo上的應用。我不喜歡他使用的代碼：[/p] [p]go to yahoo所以我重寫了他的部分代碼，成了現(xiàn)在這個樣子：[/p] [p][br]go to yahoo我的示例[/p] [p]改進：html標準校驗[/p] [p]我的代碼可以通過w3.org的測試[/p] [p]改進：命名[/p] [p]在我修改cody的代碼的時候我發(fā)現(xiàn)他使用了一個用來存儲鏈接名稱的叫做“title”的變量名，這會導致一些混淆。[/p] [p]我標出了這個命名問題，即使我認為這不過是個小小的失誤。[/p] [p]改進：可用性[/p] [p]使用我的代碼，你可以讓每個提示框都含有真實鏈接地址到另一個文檔，不管內(nèi)部的還是外部的?；蛘吣阒皇窍胍莻€提示框，不想關心可用性，你同樣可以讓鏈接部分留空。[/p] [p]選擇權(quán)在你。[/p] [p]感謝[/p] [p]cody提供了偉大的代碼，幫助我節(jié)省了大量的時間和精力。我的修改只是對原有代碼的輕微“調(diào)整”，希望朋友們喜歡。[/p] [p] [/p] [p][hilitecolor=#808080][color=#ffffff][b]15 days of jquery(day 15) --- 拖拽效果和選擇器 [/b][/color][/hilitecolor][/p] [p]繼續(xù)整理中。。。[/p]