[hilitecolor=#808080]15 days of jquery(day 11) --- 使用不苛刻的javascript代碼實(shí)現(xiàn)多文件上傳[/hilitecolor]
好幾個(gè)月以前，當(dāng)我在追逐互聯(lián)網(wǎng)上ajax熱潮的時(shí)候，我在 fiftyfoureleven網(wǎng)站上發(fā)現(xiàn)了一篇使用創(chuàng)新的javascript代碼實(shí)現(xiàn)當(dāng)時(shí)正在困擾我的“ 單文件元素實(shí)現(xiàn)多文件上傳”的文章。

所以當(dāng)我想寫作《15天漫游jquery》的時(shí)候，我第一個(gè)想到的就是用jquery實(shí)現(xiàn)這個(gè)功能。

接觸易用性狂熱愛好者

幾天前當(dāng)我檢查網(wǎng)站記錄的時(shí)候，發(fā)現(xiàn)了一條遺漏的文章trackback。跟過去看的時(shí)候我發(fā)現(xiàn)我的兩篇jquery文章被作者引用來證明他為什么討厭javascript。

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

盡管我很不同意這位仁兄一桿子打死的態(tài)度，但他還是讓我對這篇詳細(xì)教程有所留意。當(dāng)我在編寫一個(gè)簡單網(wǎng)頁效果的時(shí)候，我會盡量小心謹(jǐn)慎的處理。這樣如果網(wǎng)站訪客們決定關(guān)閉javascript代碼執(zhí)行功能的時(shí)候，他們?nèi)匀豢梢哉Ｊ褂镁W(wǎng)站的功能。

關(guān)于第一價(jià)值的兩個(gè)教程

使用一個(gè)文件輸入元素實(shí)現(xiàn)多文件上傳，并讓整個(gè)交互過程流暢舒適。
讓多文件上傳更加人性化，但要避免以犧牲可用性為代價(jià)。關(guān)鍵在于使用不苛刻的javascript代碼制作多文件輸入?yún)^(qū)域。
演示

只有一個(gè)文件輸入元素，但添加了jquery和其他代碼實(shí)現(xiàn)較為親近用戶的多文件上傳功能。
演示一地址

在頁面(x)html代碼中使用了多個(gè)文件輸入元素，但通過jquery調(diào)整為與第一個(gè)演示類似的顯示頁面效果。優(yōu)點(diǎn)是代碼是不苛刻的。。。即使關(guān)閉了javascript執(zhí)行，用戶也能上傳多個(gè)文件。
演示二地址

解釋

單文件輸入框

jquery的$(document).ready() 函數(shù)的工作有兩個(gè)：

在文檔下載量最大的時(shí)候創(chuàng)建一個(gè)div元素。 查找文件上傳框（假設(shè)這里只有一個(gè)），然后給它附上一個(gè)onchange事件。

$("input[@type=file]").change(function(){
doit(this, filemax);
});doit()函數(shù)（簡單又好記，呵呵~）檢查是否達(dá)到了最大文件數(shù)量限制，如果不是，它會隱藏當(dāng)前文件輸入框，在父div里添加一個(gè)新的文件輸入框，將輸入框內(nèi)的文件名使用id “files_list”作為標(biāo)記，在最后添加一個(gè)“刪除”按鈕。

在dom樹中導(dǎo)航，我使用jquery的parent()函數(shù)，然后用remove()函數(shù)移除元素。我還使用了append()和prepend()函數(shù)分別添加文件名和新的輸入框。

兩個(gè)關(guān)鍵點(diǎn)

- 最大文件上傳數(shù)量設(shè)定：

var filemax = 3;- 輸入框必須有適當(dāng)?shù)亩ㄎ淮胧?/p>

這樣弄以后輸入框可疑由訪問者決定添加還是刪除，沒有任何關(guān)于id或名稱的操作。當(dāng)這個(gè)窗體代碼發(fā)送給服務(wù)器端腳本的時(shí)候，相關(guān)信息就已經(jīng)被存放在了一個(gè)數(shù)組中了。

多文件輸入框

首先，文件允許上傳的數(shù)量由頁面中的文件輸入框的數(shù)量決定。其次，你仍然需要通過某種方法為每個(gè)輸入框接收到的內(nèi)容用一個(gè)數(shù)組存放。

第二個(gè)演示跟前面的比起來最大的不同在于，我遍歷了每個(gè)文件輸入框并在其內(nèi)容有改動時(shí)執(zhí)行doit()函數(shù)。通過遍歷每一個(gè)輸入框，我可以為我的代碼添加有用的額外信息：輸入框內(nèi)容在“堆?！敝械捻樞颉?/p>

換句話說，當(dāng)這段代碼執(zhí)行時(shí)，它會特別指定第一個(gè)輸入框，或者第二個(gè)，抑或第三個(gè)。

代碼見下：

$("input[@type=file]:nthoftype("+
n+")")jquery的靈活性允許我們使用css和xpath描述語句定位指定的元素位置。

你會發(fā)現(xiàn)當(dāng)一個(gè)文件被選中時(shí)，文件輸入框都會被文件名稱覆蓋。點(diǎn)擊文件名就可以選擇其他不同的文件。

--------------------------------------------------------------------------------

[hilitecolor=#808080]15 days of jquery(day 12) --- jquery lightbox （插件）[/hilitecolor]
cody lindley 移植的第一版“ thickbox”讓我第一次感受到了jquery的魅力。后來他又做了一些 代碼升級以修復(fù)若干跨瀏覽器的兼容性問題。

一些需要注意的地方

$(document).ready 取代了tb_init() 函數(shù)，作用是在每個(gè)包含對象名“thickbox”的鏈接上附加一個(gè)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;
});當(dāng)這些鏈接被點(diǎn)擊時(shí)，tb_show()函數(shù)就將執(zhí)行。

$("body")
.append("

");
$("#tb_overlay").click(tb_remove);
$(window).resize(tb_position);
$(window).scroll(tb_position);
$("#tb_overlay").show();
$("body").append("");如你所見，在文檔body元素前添加了兩個(gè)div元素。換句話說，這兩個(gè)div元素將被添加在頁面html代碼的body關(guān)閉元素前。

覆蓋的div將使用一個(gè)特定的包含不透明外表的css文件指定表現(xiàn)。tb_window的代碼用來通過ahah在頁面中放置一張圖片或者加入另一個(gè)頁面。$(window).resize 和$(window).scroll 告訴jquery在用戶重新調(diào)整窗口大小或者拖動頁面翻頁的時(shí)候執(zhí)行tb_position函數(shù)。這是保證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如果這是一個(gè)圖片文件，則jquery的append函數(shù)會添加html代碼到適當(dāng)位置。

$("#tb_window").append("id='tb_image' src='"+url+"' width='"+imagewidth+"' height='"+imageheight+"'
alt='"+caption+"'/>"
+ "

");
$("#tb_closewindowbutton").click(tb_remove);另外，遠(yuǎn)程文件將使用jquery的load()函數(shù)導(dǎo)入。

$("#tb_ajaxcontent").load(url, function(){
--------------------------------------------------------------------------------

[hilitecolor=#808080]15 days of jquery(day 13) --- jquery 表格[/hilitecolor]
一位叫klaus的朋友編寫了一個(gè)小插件， 用jquery實(shí)現(xiàn)可用性極佳的javascript表格。

設(shè)置好正確的(x)html 和css后，你可以像下面那樣創(chuàng)建表格：

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

klaus這里 示例，你可以看看最終效果。

我的改版

我稍微修改了klaus的代碼，添加了一個(gè)簡單的表單用來生成表格的表頭。

用法：

非常簡單。只需要輸入每個(gè)表格的表頭（最多5個(gè)），然后點(diǎn)擊表單下方的按鈕。下一個(gè)頁面將生成結(jié)果html代碼，你可以復(fù)制然后粘貼到文件中。

你還需要 下載klaus網(wǎng)站的css文件，做些你自己的修改，當(dāng)然還要上傳jquery框架庫到你的服務(wù)器上。

這里是表格生成器的地址。

--------------------------------------------------------------------------------

[hilitecolor=#808080]15 days of jquery(day 14) --- javascript 工具提示[/hilitecolor]
cody lindley ，thickbox的作者，日前發(fā)布了 jtip - jquery 工具提示。

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

當(dāng)我檢查html代碼時(shí)，我發(fā)現(xiàn)了一個(gè)大問題，可訪問性。鏈接在javascript關(guān)閉的時(shí)候無法工作。我并不是傾向于一定要實(shí)現(xiàn)全面的可訪問性，只是在這里我認(rèn)為可以有其他更具親和力的方式實(shí)現(xiàn)相同的功能。

尤其是，我個(gè)人不喜歡那種為了可訪問性而去犧牲可用性來實(shí)現(xiàn)在提示框上鏈接另一個(gè)頁面鏈接的方法。我喜歡這個(gè)提示框 - 不是對cody不尊重，只是在我這里我“需要”它能夠在各種情況下工作。

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

我的改動

讓我產(chǎn)生修改想法的，是他的代碼在yahoo上的應(yīng)用。我不喜歡他使用的代碼：

name="before you click..."
id="yahoocopy"
class="jtip">go to yahoo所以我重寫了他的部分代碼，成了現(xiàn)在這個(gè)樣子：

http://yahoo.com"
rel="yahoo.htm?width=175&link=yahoo&name=before%20
%20you%20click..."
id="yahoocopy"
class="jtip">
go to yahoo我的示例

改進(jìn)：html標(biāo)準(zhǔn)校驗(yàn)

我的代碼可以通過w3.org的測試

改進(jìn)：命名

在我修改cody的代碼的時(shí)候我發(fā)現(xiàn)他使用了一個(gè)用來存儲鏈接名稱的叫做“title”的變量名，這會導(dǎo)致一些混淆。

我標(biāo)出了這個(gè)命名問題，即使我認(rèn)為這不過是個(gè)小小的失誤。

改進(jìn)：可用性

使用我的代碼，你可以讓每個(gè)提示框都含有真實(shí)鏈接地址到另一個(gè)文檔，不管內(nèi)部的還是外部的?；蛘吣阒皇窍胍莻€(gè)提示框，不想關(guān)心可用性，你同樣可以讓鏈接部分留空。

選擇權(quán)在你。

感謝

cody提供了偉大的代碼，幫助我節(jié)省了大量的時(shí)間和精力。我的修改只是對原有代碼的輕微“調(diào)整”，希望朋友們喜歡。

[hilitecolor=#808080]15 days of jquery(day 15) --- 拖拽效果和選擇器 [/hilitecolor]

繼續(xù)整理中。。。