。當(dāng)一個(gè)內(nèi)的鏈接被觸發(fā)時(shí)，把href屬性賦給一個(gè)”largepath”變量；把title屬性賦給一個(gè)”largealt”變量；用變量”largepath”替換![]()
的scr屬性；用變量”largealt”替換alt屬性；最后，用變量的largealt（附加在brackets中）設(shè)置h2內(nèi)em內(nèi)容。
[b]代碼如下：[/b]$(document).ready(function(){ $("h2").append('')
$(".thumbs a").click(function(){
var largepath = $(this).attr("href");
var largealt = $(this).attr("title");
$("#largeimg").attr({ src: largepath, alt: largealt });
$("h2 em").html(" (" + largealt + ")"); return false;
});
});
[p][b][color=#000000]10，樣式化不同鏈接類型[/color][/b][/p]
對(duì)于大多數(shù)流行的瀏覽器來說，定義不同類型的鏈接樣式是非常容易的。例如，定義一個(gè).pdf格式文件的鏈接樣式，我們可以使用這樣的css規(guī)則實(shí)現(xiàn)：a[href $='.pdf'] { ... }.但不幸的是，ie6并不支持這種定義（這也是我們?yōu)槭裁从憛抜e瀏覽器的一個(gè)原因）。為了實(shí)現(xiàn)瀏覽器間的兼容性，我們可以用jquery實(shí)現(xiàn)([url=http://bbon.cn/wp-content/uploads/demo/jquery/link-types.html]點(diǎn)擊觀看效果[/url])。
[url=http://bbon.cn/wp-content/uploads/demo/jquery/link-types.html][img]http://bbon.cn/wp-content/uploads/2008/03/jqueryfordesign/sample9.gif[/img][/url]
圖12 [color=#000000]圖片展示切換樣式[/color]
[b]工作原理：[/b]前三個(gè)鏈接樣式要各自定義實(shí)現(xiàn)，根據(jù)他們的href屬性分別調(diào)用css樣式給各自的；其他的部分，使得所有沒有"[url=http://webdesignerwall.com/]http://webdesignerwall.com[/url]"和/或在href屬性中不是以”#”開頭的標(biāo)簽，然后添加”external”樣式，并設(shè)置打開target為”_blank”。
[b]代碼如下：[/b]$(document).ready(function(){ $("a[@href$=pdf]").addclass("pdf");
$("a[@href$=zip]").addclass("zip");
$("a[@href$=psd]").addclass("psd");
$("a:not([@href*=http://webdesignerwall.com])").not("[href^=#]")
.addclass("external")
.attr({ target: "_blank" });
});
[p][b]ｐｓ：[/b]其實(shí)看到這篇文章好幾天了，只是沒時(shí)間翻譯過來分享。今天弄到了半夜終于搞定了，翻譯比較粗糙，如有錯(cuò)誤瑕疵，請(qǐng)一定指正。翻譯的過程中，學(xué)到了很多東西，加深了我對(duì)jquery的愛。[/p]
[p][url=http://bbon.cn/]菠菜博[/url]下載：[url=http://bbon.cn/wp-content/uploads/2008/03/jquery-tutorials.zip]網(wǎng)站設(shè)計(jì)師jquery指南打包下載[/url] [url=http://webdesignerwall.com/file/jquery-tutorials.zip]原文下載地址[/url][/p]
[p][url=http://bbon.cn/]菠菜博[/url]demo：[url=http://bbon.cn/wp-content/uploads/demo/jquery]點(diǎn)擊瀏覽[/url] [url=http://webdesignerwall.com/demo/jquery/]原文demo[/url][/p]
[p]原文地址：[url=http://webdesignerwall.com/tutorials/jquery-tutorials-for-designers/]jquery tutorials for designers[/url][/p]
[p]中文翻譯：[url=http://bbon.cn/post/283]網(wǎng)站設(shè)計(jì)師jquery上手指南[/url][/p]
[p]翻譯博客：[url=http://bbon.cn/]菠菜博[/url][/p]
[p][url=http://bbon.cn/2008/03/%e7%bd%91%e7%ab%99%e8%ae%be%e8%ae%a1%e5%b8%88jquery%e4%b8%8a%e6%89%8b%e6%8c%87%e5%8d%97.html]http://bbon.cn/2008/03/%e7%bd%91%e7%ab%99%e8%ae%be%e8%ae%a1%e5%b8%88jquery%e4%b8%8a%e6%89%8b%e6%8c%87%e5%8d%97.html[/url][/p]
該文章在 2010/4/27 2:48:12 編輯過
400 186 1886
