演示地址:http://www.webdesignerwall.com/demo/jquery/wordpress-comments.html
我们知道QQ有一项功能,就是可以开启留言审核功能:就是当有人是在你的空间留言的时候,你能够设置是否在你的空间发布留言。类似这样的一些东西应该怎么处理呢?
3.2. 问题的分析
其实这是博客系统后台评论管理的一部分:删除评论、审核通过、未通过、垃圾邮件等等。
我们现在主要做的是前台部分的设计。前台主要是由几个div构成,在div里又用其他的标签进行控制。
3.3 问题的假设
假设无。
3.4 问题的求解
①页面的制作
页面是由div、h3、a、p几个标签构成,代码如下:
<div class="box1">
<h3>小林说:</h3>
<p>
出门在外真的很不容易,磕磕碰碰是常屁,<br />
事事不尽人意,天天到处挨气,天气也怪异,<br />
不是天上打地,就是地下放气,生容易,<br />
活容易,生活真的真的不太容易。既然事事如此怪异,<br />
我们为何要自己没事找气,<br />
开开心心活出自己的天地,到老也乐意......<br />
</p>
<p>
<a href="#" class="deleteButton">删除</a>
<a href="#" class="unapproveButton">审核未通过</a>
<a href="#" class="spamButton">垃圾邮件</a>
</p>
</div>
<div class="box1 box2">
<h3>小林说:</h3>
<p>
出门在外真的很不容易,磕磕碰碰是常屁,<br />
事事不尽人意,天天到处挨气,天气也怪异,<br />
不是天上打地,就是地下放气,生容易,<br />
活容易,生活真的真的不太容易。既然事事如此怪异,<br />
我们为何要自己没事找气,<br />
开开心心活出自己的天地,到老也乐意......<br />
</p>
<p>
<a href="#" class="deleteButton">删除</a>
<a href="#" class="unapproveButton">审核通过</a>
<a href="#" class="spamButton">垃圾邮件</a>
</p>
</div>
<div class="box1">
<h3>小林说:</h3>
<p>
出门在外真的很不容易,磕磕碰碰是常屁,<br />
事事不尽人意,天天到处挨气,天气也怪异,<br />
不是天上打地,就是地下放气,生容易,<br />
活容易,生活真的真的不太容易。既然事事如此怪异,<br />
我们为何要自己没事找气,<br />
开开心心活出自己的天地,到老也乐意......<br />
</p>
<p>
<a href="#" class="deleteButton">删除</a>
<a href="#" class="unapproveButton">审核未通过</a>
<a href="#" class="spamButton">垃圾邮件</a>
</p>
</div>
<div class="box1 box2">
<h3>小林说:</h3>
<p>
出门在外真的很不容易,磕磕碰碰是常屁,<br />
事事不尽人意,天天到处挨气,天气也怪异,<br />
不是天上打地,就是地下放气,生容易,<br />
活容易,生活真的真的不太容易。既然事事如此怪异,<br />
我们为何要自己没事找气,<br />
开开心心活出自己的天地,到老也乐意......<br />
</p>
<p>
<a href="#" class="deleteButton">删除</a>
<a href="#" class="unapproveButton">审核通过</a>
<a href="#" class="spamButton">垃圾邮件</a>
</p>
</div>
②css代码
在浏览器中进行预览,我们会发现,显示非常的呆板,所以我们需要用css去控制,当然不控制也行,因为这毕竟不是我们今天学习的重点。 代码如下:
<style type="text/css">
body{/* 设置页面居中 */
width:500px;
margin:auto;
}
/*每一个div共有的设置*/
div.box1{
border-top:1px solid #999;
padding:5px;
/*====虽然默认是白色,但是这个不能不设置的,不然会报fx.start is underfind=========*/
background:#FFF;
}
/* div 偶数行的颜色,jquery给设置进去 */
div.alt{
background:#F5F4F4;
}
div.box2{
color:#CCC;
}
</style>
③ js代码
导入jquery.js库,这肯定是必须的,还有由于我们在js代码中用到了 backgrounColor 这个属性值的设置,jquery为了能够处理这些颜色值,有对应的一个插件jquery.color.js 。这个可以在网上进行下载,在此提供一个下载地址:http://oss.netshadow.at/repositories/entry/mastershaper/htdocs/jquery/plugins/jquery.color.js?rev=f607960fda4d17f6afe10072d9e2bb0b3719c475
其中代码如下:
<script type="text/javascript">
$(document).ready(function(){
/*
1. 给偶数行加上颜色
2. 给按钮添加事件:
当点击 "删除" 按钮的时候,
(1)提示删除该评论,(2)颜色快速变成红色,(3)然后慢慢的消失.
当点击 "审核未通过的时候",
(1),(),()
当点击"垃圾邮件的时候",处理情况和点击删除一样的,只是具体的对应处理不一样而已,当然在此不过多去关心这些。
*/
//1. 给偶数行加上颜色
$("div.box1:even").addClass("alt");
//2. 给按钮添加事件
//------删除按钮
$("a.deleteButton").click(function(){
alert("评论将被删除!");
$(this).parents(".box1").animate({backgroundColor:"#f00"},"fast")
.animate({opacity:"hide"},"slow");
return false;
});
//------审核未通过
$("a.unapproveButton").click(function(){
if($(this).html()=="审核未通过"){
$(this).parents(".box1").animate({backgroundColor:"#FF0"},"fast")
.animate({backgroundColor:"#fff"},"slow");
$(this).html("审核通过");
$(this).parents(".box1").removeClass("box2");
}else {
$(this).parents(".box1").animate({backgroundColor:"#0F0;"},"fast")
.animate({backgroundColor:"#fff"},"slow");
$(this).html("审核未通过");
$(this).parents(".box1").addClass("box2");
}
return false;
});
//------垃圾邮件
$("a.spamButton").click(function(){
$(this).parents(".box1").animate({backgroundColor:"#f00"},"fast")
.animate({opacity:"hide"},"slow");
return false;
});
});
</script>
说明:
》在这个例子主要用了 .animate()这个方法,在jquery的API上可以查到它的作用:原文如下:
用于创建自定义动画的函数。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。
注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。
在API中还有对应的简单例子,大家可以自己复制下来运行下,看看效果。
》全部源码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模仿WordPress后台评论管理面板</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.color.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/*
1. 给偶数行加上颜色
2. 给按钮添加事件:
当点击 "删除" 按钮的时候,
(1)提示删除该评论,(2)颜色快速变成红色,(3)然后慢慢的消失.
当点击 "审核未通过的时候",
(1),(),()
当点击"垃圾邮件的时候",处理情况和点击删除一样的,只是具体的对应处理不一样而已,当然在此不过多去关心这些。
*/
//1. 给偶数行加上颜色
$("div.box1:even").addClass("alt");
//2. 给按钮添加事件
//------删除按钮
$("a.deleteButton").click(function(){
alert("评论将被删除!");
$(this).parents(".box1").animate({backgroundColor:"#f00"},"fast")
.animate({opacity:"hide"},"slow");
return false;
});
//------审核未通过
$("a.unapproveButton").click(function(){
if($(this).html()=="审核未通过"){
$(this).parents(".box1").animate({backgroundColor:"#FF0"},"fast")
.animate({backgroundColor:"#fff"},"slow");
$(this).html("审核通过");
$(this).parents(".box1").removeClass("box2");
}else {
$(this).parents(".box1").animate({backgroundColor:"#0F0;"},"fast")
.animate({backgroundColor:"#fff"},"slow");
$(this).html("审核未通过");
$(this).parents(".box1").addClass("box2");
}
return false;
});
//------垃圾邮件
$("a.spamButton").click(function(){
$(this).parents(".box1").animate({backgroundColor:"#f00"},"fast")
.animate({opacity:"hide"},"slow");
return false;
});
});
</script>
<style type="text/css">
body{/* 设置页面居中 */
width:500px;
margin:auto;
}
/*每一个div共有的设置*/
div.box1{
border-top:1px solid #999;
padding:5px;
/*====虽然默认是白色,但是这个不能不设置的,不然会报fx.start is underfind=========*/
background:#FFF;
}
/* div 偶数行的颜色,jquery给设置进去 */
div.alt{
background:#F5F4F4;
}
div.box2{
color:#CCC;
}
</style>
</head>
<body>
<div class="box1">
<h3>小林说:</h3>
<p>
出门在外真的很不容易,磕磕碰碰是常屁,<br />
事事不尽人意,天天到处挨气,天气也怪异,<br />
不是天上打地,就是地下放气,生容易,<br />
活容易,生活真的真的不太容易。既然事事如此怪异,<br />
我们为何要自己没事找气,<br />
开开心心活出自己的天地,到老也乐意......<br />
</p>
<p>
<a href="#" class="deleteButton">删除</a>
<a href="#" class="unapproveButton">审核未通过</a>
<a href="#" class="spamButton">垃圾邮件</a>
</p>
</div>
<div class="box1 box2">
<h3>小林说:</h3>
<p>
出门在外真的很不容易,磕磕碰碰是常屁,<br />
事事不尽人意,天天到处挨气,天气也怪异,<br />
不是天上打地,就是地下放气,生容易,<br />
活容易,生活真的真的不太容易。既然事事如此怪异,<br />
我们为何要自己没事找气,<br />
开开心心活出自己的天地,到老也乐意......<br />
</p>
<p>
<a href="#" class="deleteButton">删除</a>
<a href="#" class="unapproveButton">审核通过</a>
<a href="#" class="spamButton">垃圾邮件</a>
</p>
</div>
<div class="box1">
<h3>小林说:</h3>
<p>
出门在外真的很不容易,磕磕碰碰是常屁,<br />
事事不尽人意,天天到处挨气,天气也怪异,<br />
不是天上打地,就是地下放气,生容易,<br />
活容易,生活真的真的不太容易。既然事事如此怪异,<br />
我们为何要自己没事找气,<br />
开开心心活出自己的天地,到老也乐意......<br />
</p>
<p>
<a href="#" class="deleteButton">删除</a>
<a href="#" class="unapproveButton">审核未通过</a>
<a href="#" class="spamButton">垃圾邮件</a>
</p>
</div>
<div class="box1 box2">
<h3>小林说:</h3>
<p>
出门在外真的很不容易,磕磕碰碰是常屁,<br />
事事不尽人意,天天到处挨气,天气也怪异,<br />
不是天上打地,就是地下放气,生容易,<br />
活容易,生活真的真的不太容易。既然事事如此怪异,<br />
我们为何要自己没事找气,<br />
开开心心活出自己的天地,到老也乐意......<br />
</p>
<p>
<a href="#" class="deleteButton">删除</a>
<a href="#" class="unapproveButton">审核通过</a>
<a href="#" class="spamButton">垃圾邮件</a>
</p>
</div>
</body>
</html>
相关推荐
在这个标题为“jquery1.7 API”的压缩包中,包含的是jQuery 1.7.1版本的两个主要文件:`jquery-1.7.1.min.js` 和 `jquery-1.7.1.js`,以及一个API文档`jquery1.7_20111204.chm`。 1. **`jquery-1.7.1.min.js` 和 `...
《jQuery 1.7.1:JavaScript 动态交互的核心》 在JavaScript的世界里,jQuery是一个不可或缺的库,它极大地简化了DOM操作、事件处理、动画制作和Ajax交互。这里我们关注的是jQuery 1.7.1的两个版本——"jquery-...
1、将jquery-1.7.1-vsdoc.js与jquery-1.7.1.js放在同一目录,然后在vs中添加对jquery-1.7.1.js的引用即可; 2、切记:两个文件的文件名不能修改,并且只要引用jquery-1.7.1.js而不要引用jquery-1.7.1-vsdoc.js。
博客专用: Jqgrid学习笔记__01__初来乍到 很多时候在网上下载一段代码,结果引用的CSS和JS文件不知道从哪里弄,结果上网下载,不是版本不对,就是完全不对。这里的CSS是有对应的代码段的。请参考博客 ====> Jqgrid...
我们将主要关注以下三个方面:jQuery核心库(jquery-1.7.1.js)、压缩版库(jquery-1.7.1.min.js)以及开发者文档支持文件(jquery-1.7.1-vsdoc.js)。 首先,我们来看看`jquery-1.7.1.js`。这是jQuery的核心库,...
本压缩包包含了jQuery 1.7.1的三个关键文件:`jquery-1.7.1.js`(完整版),`jquery-1.7.1-vsdoc.js`(Visual Studio文档版本),以及`jquery-1.7.1.min.js`(压缩和优化版)。这些文件分别服务于开发、文档参考和...
jquery-1.7.1.js
《jQuery UI 1.7.1:构建交互式网页的强大工具》 jQuery UI 是一个基于 jQuery JavaScript 库的开源项目,它提供了一系列丰富的用户界面组件和交互效果,为开发者提供了构建功能丰富的、交互性强的网页应用的强大...
《jQuery 1.7.1:JavaScript 动态交互的核心》 jQuery,作为一款轻量级的JavaScript库,因其简洁的API和强大的功能而深受开发者喜爱。本篇将重点解析`jquery-1.7.1.js`这个版本,它是jQuery历史上的一个重要里程碑...
《jQuery 1.7.1.min.js与jQuery 1.7.1.min-vsdoc.js深入解析》 在JavaScript的世界里,jQuery是一个广泛使用的库,它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。这里我们将聚焦于两个重要的文件:...
在本例中,`jquery-1.7.1-vsdoc.js`就是jQuery 1.7.1的VSdoc文件,它包含了所有jQuery函数、方法、属性的详细注释。这些注释遵循JSDoc规范,包含函数签名、参数描述、返回值类型等信息。当在Visual Studio中引入这个...
**jQuery 1.7.1** 是一个历史悠久但仍然具有影响力的JavaScript库,它极大地简化了网页的DOM操作、事件处理、动画制作以及Ajax交互。在2011年发布时,它是jQuery的最新版本,提供了许多增强的功能和性能优化。 **...
标题中的“mqttfx-1.7.1-windows-x64.rar”表明这是MQTTFX的1.7.1版本,专为64位Windows操作系统设计的压缩包文件。这个版本可能包含了一些新特性、性能优化或者修复了前一版本的已知问题。在下载并解压此文件后,...
docker-io-1.7.1-2.el6.x86_64.rpm及依赖包 redhat6 和centos6下使用