给设计师的jQuery教程（第三部分）

发布时间：2018-08-19 07:08:40 所属栏目：传媒来源：站长网

导读：文章导读：给设计师的jQuery教程（第一部分）给设计师的jQuery教程（第二部分） 7.可折叠面板（Demo）结合前面的技巧我们来实现一个可折叠的面板列（类似于gmail的邮件面板）。是否注意到我在Web Designer Wall的留言列表也运用了这种个效果？ Copy to

副标题[/!--empirenews.page--]

文章导读：

给设计师的jQuery教程（第一部分）
给设计师的jQuery教程（第二部分）

7.可折叠面板（Demo）

结合前面的技巧我们来实现一个可折叠的面板列（类似于gmail的邮件面板）。是否注意到我在Web Designer Wall的留言列表也运用了这种个效果？

给设计师的jQuery教程（第三部分）

Copy to Clipboard Liehuo.Net Codes

引用的内容：[www.veryhuo.com] $(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插件。

给设计师的jQuery教程（第三部分）

Copy to Clipboard Liehuo.Net Codes

引用的内容：[www.veryhuo.com] //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;
});

});

（编辑：承德站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

1/3

尾页