给设计师的jQuery教程（第三部分）
发布时间：2018-08-18 05:11:11 所属栏目：传媒 来源：站长网
导读：文章导读： 给设计师的jQuery教程（第一部分） 给设计师的jQuery教程（第二部分） 7.可折叠面板（Demo） 结合前面的技巧我们来实现一个可折叠的面板列（类似于gmail的邮件面板）。是否注意到我在Web Designer Wall的留言列表也运用了这种个效果？ Copy to
|
副标题[/!--empirenews.page--]
文章导读： 7.可折叠面板（Demo） 结合前面的技巧我们来实现一个可折叠的面板列（类似于gmail的邮件面板）。是否注意到我在Web Designer Wall的留言列表也运用了这种个效果？
 引用的内容：[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; }); }); 每部分代码的细节： 8.模仿WordPress的留言管理后台(Demo) 我相信你们大多数人都看到过WordPress留言管理的后台。让我们用jQuery来模仿着试试看。为了模仿它的背景颜色，你必须添加Color Anination插件。
引用的内容：[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; }); }); （编辑：好传媒网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
