標簽。 [p]點擊
標簽并向上滑動其所有的同類標簽。[/p] [b]代碼如下：[/b]$(document).ready(function(){ $(".accordion h3:first").addclass("active"); $(".accordion p:not(:first)").hide(); $(".accordion h3").click(function(){ $(this).next("p").slidetoggle("slow") .siblings("p:visible").slideup("slow"); $(this).toggleclass("active"); $(this).siblings("h3").removeclass("active"); }); }); [p][b]4b，折疊樣式2[/b][/p] [p]這個效果跟4a中的效果基本一致，唯一不同的是指定了初始默認打開的層([url=http://bbon.cn/wp-content/uploads/demo/jquery/accordion2.html]點擊觀看效果[/url])。[/p] [b]工作原理：[/b]在css樣式表中設(shè)置.accordion p的display:none。假如你想設(shè)置第三個層為默認的打開狀態(tài)，那么你就可以這樣寫： $(".accordion2 p").eq(2).show(); //(eq = equal)默認從0開始計數(shù) [b]代碼如下：[/b]$(document).ready(function(){ $(".accordion2 h3").eq(2).addclass("active"); $(".accordion2 p").eq(2).show(); $(".accordion2 h3").click(function(){ $(this).next("p").slidetoggle("slow") .siblings("p:visible").slideup("slow"); $(this).toggleclass("active"); $(this).siblings("h3").removeclass("active"); }); }); [p][b]5a，漂亮的鼠標hover懸停效果1[/b][/p] [p]本例實現(xiàn)的是一個精美的鼠標懸停時的漸隱漸現(xiàn)效果([url=http://bbon.cn/wp-content/uploads/demo/jquery/animated-hover1.html]點擊觀看效果[/url])。[/p] [url=http://bbon.cn/wp-content/uploads/demo/jquery/animated-hover1.html][img]http://bbon.cn/wp-content/uploads/2008/03/jqueryfordesign/sample4.gif[/img][/url] 圖6 漂亮的鼠標hover懸停效果1 [b]工作原理：[/b]鼠標懸停在鏈接菜單上時，找到下面的并激活其opacity不透明屬性和top位置。 [b]代碼如下：[/b]$(document).ready(function(){ $(".menu a").hover(function() { $(this).next("em").animate({opacity: "show", top: "-75"}, "slow"); }, function() { $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast"); }); }); [p][color=#000000][b]5b，漂亮的鼠標hover懸停效果2[/b][/color][/p] [p][color=#000000]這個例子是獲取鏈接菜單的title屬性，保存在一個變量里面，然后附加給標簽([url=http://bbon.cn/wp-content/uploads/demo/jquery/animated-hover2.html]點擊觀看效果[/url])。[/color][/p] [url=http://bbon.cn/wp-content/uploads/demo/jquery/animated-hover2.html][img]http://bbon.cn/wp-content/uploads/2008/03/jqueryfordesign/sample4b.gif[/img][/url] 圖7 漂亮的鼠標hover懸停效果2 [b]工作原理：[/b]在第一行將一個空的賦值給鏈接菜單的元素。鼠標懸停在鏈接菜單上時，就會獲取title的屬性，保存給一個"hovertext"變量，然后把"hovertext"的值賦給的文本內(nèi)容。 [b]代碼如下：[/b]$(document).ready(function(){ $(".menu2 a").append(""); $(".menu2 a").hover(function() { $(this).find("em").animate({opacity: "show", top: "-75"}, "slow"); var hovertext = $(this).attr("title"); $(this).find("em").text(hovertext); }, function() { $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast"); }); }); [p][color=#000000][b]6，塊級鼠標樣式[/b][/color][/p] [p]本例展示的是一個塊級鼠標樣式，就像[url=http://bestwebgallery.com/]best web gallery[/url]這個網(wǎng)站的側(cè)邊欄效果似的([url=http://bbon.cn/wp-content/uploads/demo/jquery/block-clickable.html]點擊觀看效果[/url])。[/p] [url=http://bbon.cn/wp-content/uploads/demo/jquery/block-clickable.html][img]http://bbon.cn/wp-content/uploads/2008/03/jqueryfordesign/sample5.gif[/img][/url] 圖8 [color=#000000]塊級鼠標樣式[/color] [b]工作原理：[/b]假設(shè)你有一個class屬性為”pane-list”的列表，你希望嵌套在其內(nèi)部的可以實現(xiàn)塊狀點擊樣式，你就可以把這個點擊方法賦值給”.pane-list li”。在點擊時，這個方法就會找到元素，并重定向瀏覽器位置到它的href屬性值。 [b]代碼如下：[/b]$(document).ready(function(){ $(".pane-list li").click(function(){ window.location=$(this).find("a").attr("href"); return false; }); }); [p][b]7，折疊面板[/b][/p] [p]現(xiàn)在，讓我們結(jié)合上面例子的技巧方法，創(chuàng)建一個折疊面板效果吧（跟gmail收件箱效果差不多）([url=http://bbon.cn/wp-content/uploads/demo/jquery/collapsible-panels.html]點擊觀看效果[/url])。[/p] [url=http://bbon.cn/wp-content/uploads/demo/jquery/collapsible-panels.html][img]http://bbon.cn/wp-content/uploads/2008/03/jqueryfordesign/sample6.gif[/img][/url] 圖9 [color=#000000]折疊面板樣式[/color] [b]工作原理：[/b] [p]第一行：隱藏除第一個以外的所有[/p] [p]第二行：隱藏第五個后面的所有標簽[/p] [p]第三行：當點擊時，牽引滑動下一個[/p] [p]第四行：當點擊按鈕時，向上滑動所有的[/p] [p]第五行：當點擊時，隱藏本身，顯示，并向下滑動第五個以后的所有[/p] [p]最后一行：當點擊時，隱藏本身，顯示class=”show_all_message”>，并向上滑動第五個以后的所有[/p] [b]代碼如下：[/b]$(document).ready(function(){ //hide message_body after the first one $(".message_list .message_body:gt(0)").hide(); //hide message li after the 5th $(".message_list li:gt(4)").hide(); //toggle message_body $(".message_head").click(function(){ $(this).next(".message_body").slidetoggle(500) return false; }); //collapse all messages $(".collpase_all_message").click(function(){ $(".message_body").slideup(500) return false; }); //show all messages $(".show_all_message").click(function(){ $(this).hide() $(".show_recent_only").show() $(".message_list li:gt(4)").slidedown() return false; }); //show recent messages only $(".show_recent_only").click(function(){ $(this).hide() $(".show_all_message").show() $(".message_list li:gt(4)").slideup() return false; }); }); [p][b]8，模仿wordpress后臺評論管理[/b][/p] [p]可能我們絕大多數(shù)人都看到過wordpress aiax后臺評論管理效果。在這個例子中，我們就用jquery模仿出這個效果，不過首先你要用到一個[url=http://plugins.jquery.com/project/color][b]color animations[/b][/url]插件）([url=http://bbon.cn/wp-content/uploads/demo/jquery/wordpress-comments.html]點擊觀看效果[/url])。[/p] [url=http://bbon.cn/wp-content/uploads/demo/jquery/wordpress-comments.html][img]http://bbon.cn/wp-content/uploads/2008/03/jqueryfordesign/sample7.gif[/img][/url] 圖10 [color=#000000]wordpress后臺評論管理樣式[/color] [b]工作原理：[/b] [p]第一行：添加”alt”類給（給每個賦值灰色背景）[/p] [p]第二行：在點擊時，彈出警告框信息后，激活層的背景色和不透明度[/p] [p]第三行：點擊時，使層的背景色變黃再變白，并增加”spam”類樣式[/p] [p]第四行：點擊時，使層的背景色變綠再變白，并移除”spam”類樣式[/p] [p]最后一行：點擊時，背景色變紅，并設(shè)置不透明度為”hide”[/p] [b]代碼如下：[/b]//don't forget to include the color animations plugin //$(document).ready(function(){ $(".pane:even").addclass("alt"); $(".pane .btn-delete").click(function(){ alert("this comment will be deleted!"); $(this).parents(".pane").animate({ backgroundcolor: "#fbc7c7" }, "fast") .animate({ opacity: "hide" }, "slow") return false; }); $(".pane .btn-unapprove").click(function(){ $(this).parents(".pane").animate({ backgroundcolor: "#fff568" }, "fast") .animate({ backgroundcolor: "#ffffff" }, "slow") .addclass("spam") return false; }); $(".pane .btn-approve").click(function(){ $(this).parents(".pane").animate({ backgroundcolor: "#dafda5" }, "fast") .animate({ backgroundcolor: "#ffffff" }, "slow") .removeclass("spam") return false; }); $(".pane .btn-spam").click(function(){ $(this).parents(".pane").animate({ backgroundcolor: "#fbc7c7" }, "fast") .animate({ opacity: "hide" }, "slow") return false; }); }); [p][b]9，圖片展示切換[/b][/p] [p]如果你不想通過頁面跳轉(zhuǎn)的方式來展示多幅圖片的話，那么這個例子的方法絕對是可行的。你可以把jpg圖片加載到一個target中去([url=http://bbon.cn/wp-content/uploads/demo/jquery/img-replacement.html]點擊觀看效果[/url])。[/p] [url=http://bbon.cn/wp-content/uploads/demo/jquery/img-replacement.html][img]http://bbon.cn/wp-content/themes/wpink//images/grey.gif[/img][/url] 圖11 [color=#000000]圖片展示切換樣式[/color] [b]工作原理：[/b]首先為h2添加一個空的。當一個內(nèi)的鏈接被觸發(fā)時，把href屬性賦給一個”largepath”變量；把title屬性賦給一個”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] 對于大多數(shù)流行的瀏覽器來說，定義不同類型的鏈接樣式是非常容易的。例如，定義一個.pdf格式文件的鏈接樣式，我們可以使用這樣的css規(guī)則實現(xiàn)：a[href $='.pdf'] { ... }.但不幸的是，ie6并不支持這種定義（這也是我們?yōu)槭裁从憛抜e瀏覽器的一個原因）。為了實現(xiàn)瀏覽器間的兼容性，我們可以用jquery實現(xiàn)([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]前三個鏈接樣式要各自定義實現(xiàn)，根據(jù)他們的href屬性分別調(diào)用css樣式給各自的；其他的部分，使得所有沒有"[url=http://webdesignerwall.com/]http://webdesignerwall.com[/url]"和/或在href屬性中不是以”#”開頭的標簽，然后添加”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]其實看到這篇文章好幾天了，只是沒時間翻譯過來分享。今天弄到了半夜終于搞定了，翻譯比較粗糙，如有錯誤瑕疵，請一定指正。翻譯的過程中，學(xué)到了很多東西，加深了我對jquery的愛。[/p] [p][url=http://bbon.cn/]菠菜博[/url]下載：[url=http://bbon.cn/wp-content/uploads/2008/03/jquery-tutorials.zip]網(wǎng)站設(shè)計師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]網(wǎng)站設(shè)計師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 編輯過
時，牽引滑動下一個
內(nèi)的鏈接被觸發(fā)時，把href屬性賦給一個”largepath”變量；把title屬性賦給一個”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] 對于大多數(shù)流行的瀏覽器來說，定義不同類型的鏈接樣式是非常容易的。例如，定義一個.pdf格式文件的鏈接樣式，我們可以使用這樣的css規(guī)則實現(xiàn)：a[href $='.pdf'] { ... }.但不幸的是，ie6并不支持這種定義（這也是我們?yōu)槭裁从憛抜e瀏覽器的一個原因）。為了實現(xiàn)瀏覽器間的兼容性，我們可以用jquery實現(xiàn)([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]前三個鏈接樣式要各自定義實現(xiàn)，根據(jù)他們的href屬性分別調(diào)用css樣式給各自的；其他的部分，使得所有沒有"[url=http://webdesignerwall.com/]http://webdesignerwall.com[/url]"和/或在href屬性中不是以”#”開頭的標簽，然后添加”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]其實看到這篇文章好幾天了，只是沒時間翻譯過來分享。今天弄到了半夜終于搞定了，翻譯比較粗糙，如有錯誤瑕疵，請一定指正。翻譯的過程中，學(xué)到了很多東西，加深了我對jquery的愛。[/p] [p][url=http://bbon.cn/]菠菜博[/url]下載：[url=http://bbon.cn/wp-content/uploads/2008/03/jquery-tutorials.zip]網(wǎng)站設(shè)計師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]網(wǎng)站設(shè)計師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 編輯過
<strike id="acia4"></strike>
400 186 1886
