您當(dāng)前位置：首頁 > web前端 > jquery > 給設(shè)計(jì)師的jQuery教程（第三部分）

給設(shè)計(jì)師的jQuery教程（第三部分）

來源：程序員人生發(fā)布時(shí)間：2013-10-27 12:48:54 閱讀次數(shù)：3228次

文章導(dǎo)讀：

給設(shè)計(jì)師的jQuery教程（第一部分）
給設(shè)計(jì)師的jQuery教程（第二部分）

7.可折疊面板（Demo）

結(jié)合前面的技巧我們來實(shí)現(xiàn)一個(gè)可折疊的面板列（類似于gmail的郵件面板）。是否注意到我在Web Designer Wall的留言列表也運(yùn)用了這種個(gè)效果？

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

});

每部分代碼的細(xì)節(jié)：

影藏除去第一個(gè)的所有<div class=”message_body”>
影藏第四個(gè)<li>后面的所有<li>
當(dāng)<p calss=”message_head”>被點(diǎn)擊后，滑入顯示兄弟元素<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個(gè)<li>

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

我相信你們大多數(shù)人都看到過WordPress留言管理的后臺(tái)。讓我們用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;
});

});

各部分代碼細(xì)節(jié)

為每個(gè)<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>
當(dāng)一個(gè)鏈接.thumbs a被點(diǎn)擊把被點(diǎn)擊的<a>標(biāo)簽的href鍵值存儲(chǔ)到”IargePath”變量中，把它的title鍵值存儲(chǔ)到”IargeAlt”變量中。
用”largePath”替換<img id=”IargeImg”>的src鍵值，”LargeAlt”為alt的鍵值。
“LargeAlt”外加括號(hào)添加給<em>

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

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

$(document).ready(function(){

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

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

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

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

});

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

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

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

全部實(shí)例下載：jquery-tutorials.zip

（完）　歡迎您繼續(xù)閱讀網(wǎng)的其它文章。

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
程序員人生

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

給設(shè)計(jì)師的jQuery教程（第三部分）