。當一個內的鏈接被觸發時，把href屬性賦給一個”largepath”變量；把title屬性賦給一個”largealt”變量；用變量”largepath”替換![]()
的scr屬性；用變量”largealt”替換alt屬性；最后，用變量的largealt（附加在brackets中）設置h2內em內容。
[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]
對于大多數流行的瀏覽器來說，定義不同類型的鏈接樣式是非常容易的。例如，定義一個.pdf格式文件的鏈接樣式，我們可以使用這樣的css規則實現：a[href $='.pdf'] { ... }.但不幸的是，ie6并不支持這種定義（這也是我們為什么討厭ie瀏覽器的一個原因）。為了實現瀏覽器間的兼容性，我們可以用jquery實現([url=http://bbon.cn/wp-content/uploads/demo/jquery/link-types.html]點擊觀看效果[/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]前三個鏈接樣式要各自定義實現，根據他們的href屬性分別調用css樣式給各自的；其他的部分，使得所有沒有"[url=http://webdesignerwall.com/]http://webdesignerwall.com[/url]"和/或在href屬性中不是以”#”開頭的標簽，然后添加”external”樣式，并設置打開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]其實看到這篇文章好幾天了，只是沒時間翻譯過來分享。今天弄到了半夜終于搞定了，翻譯比較粗糙，如有錯誤瑕疵，請一定指正。翻譯的過程中，學到了很多東西，加深了我對jquery的愛。[/p]
[p][url=http://bbon.cn/]菠菜博[/url]下載：[url=http://bbon.cn/wp-content/uploads/2008/03/jquery-tutorials.zip]網站設計師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]點擊瀏覽[/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]網站設計師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
