狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

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