您當前位置：首頁 > web前端 > jquery > 給設計師的jQuery教程（第三部分）

給設計師的jQuery教程（第三部分）

來源：程序員人生發布時間：2013-10-27 12:48:54 閱讀次數：3220次

文章導讀：

給設計師的jQuery教程（第一部分）
給設計師的jQuery教程（第二部分）

7.可折疊面板（Demo）

結合前面的技巧我們來實現一個可折疊的面板列（類似于gmail的郵件面板）。是否注意到我在Web Designer Wall的留言列表也運用了這種個效果？

$(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;
});

});

每部分代碼的細節：

影藏除去第一個的所有<div class=”message_body”>
影藏第四個<li>后面的所有<li>
當<p calss=”message_head”>被點擊后，滑入顯示兄弟元素<div class=”message_body”>
綁定<a class=”collpase_all_message”>按鈕click事件，滑出影藏所有的<div class=”message_body”>
綁定<a class=”show_all_message”>按鈕click事件，影藏了自己，顯示<a class=”show_recent_only”>，滑入顯示所有的剩下的所有的<li>
綁定<a class=”show_recent_only”>按鈕click事件，影藏自己，顯示<a class=”show_all_message”>,并且影藏除去前5個<li>

8.模仿WordPress的留言管理后臺(Demo)

我相信你們大多數人都看到過WordPress留言管理的后臺。讓我們用jQuery來模仿著試試看。為了模仿它的背景顏色，你必須添加Color Anination插件。

//don't forget to include the Color Animations plugin
//<script type="text/javascript" src="jquery.color.js"></script>

$(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;
});

});

各部分代碼細節

為每個<div class=”pane”>添加”alt”CSS類（使得其他的div背景為灰色）
綁定click事件到<a class=”btn_delete”>，彈出警告消息，然后定義顏色變化和淡出效果
綁定click事件到<a class=”btn_unapprove”>，先變換背景顏色到黃色，再到白，然后添加“spam” CSS類
綁定click事件到<a class=”btn_approve”>，變換背景顏色到綠色，然后白色，然后去掉”span”類
類似同上

9.圖片展覽館（Demo）

你想無刷新的展覽一些你的圖片作品集？可以的，往元素中加載圖片就可以了。

$(document).ready(function(){

$("h2").append('<em></em>')

$(".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;
});

});

過程

在<h2>后面添加兄弟元素<em>
當一個鏈接.thumbs a被點擊把被點擊的<a>標簽的href鍵值存儲到”IargePath”變量中，把它的title鍵值存儲到”IargeAlt”變量中。
用”largePath”替換<img id=”IargeImg”>的src鍵值，”LargeAlt”為alt的鍵值。
“LargeAlt”外加括號添加給<em>

10.樣式化不同的類型的鏈接（Demo）

絕大多數的瀏覽器，樣式化鏈接選擇器很簡單，比如說：樣式化一個.pdf鏈接，你只需簡單如此寫CSS選擇器：a[href $=’.pdf’]{……}。不幸的是，IE6不支持這種選擇器（這也是我們討厭IE的又一個原因！）。但是可以運用jQuery修補這個問題。

$(document).ready(function(){

$("a[@href$=pdf]").addClass("pdf");

$("a[@href$=zip]").addClass("zip");

$("a[@href$=psd]").addClass("psd");

$("a:not([@href*=http://www.vxbq.cn])").not("[href^=#]")
.addClass("external")
.attr({ target: "_blank" });

});

前三行很簡單，就是根據a的href的不同為其添加不同的CSS class。

接下來為所有href中有”http://www.vxbq.cn“字符串并且不以”#”開頭的<a>添加class “esternal”并且設置target=”_blank”。

本文由：http://www.cnblogs.com/island205/ 翻譯自：web designer wall

全部實例下載：jquery-tutorials.zip

（完）　歡迎您繼續閱讀網的其它文章。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

給設計師的jQuery教程（第三部分）