jQuery+ajax实现顶一下,踩一下效果


Posted in Javascript onJuly 17, 2010

demo页面的实现

<div class="digg" id="digg"> 
<div class="good"> <a href="#"> 
<p>这个文档不错</p> 
<div class="bar"> 
<div id="g_img" style="width:70%"></div> 
</div> 
<span class="num" id="num">70%(7000)</span> </a> </div> 
<div class="bad"> <a href="#"> 
<p>文档有待改进</p> 
<div class="bar"> 
<div id="b_img" style="width:30%"></div> 
</div> 
<span class="num">30%(3000)</span> </a> </div> 
</div>

主要一点就是通过百分比来控制g_img的宽度,至于css代码就不贴出来了。
演示代码:
<!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>Digg</title> 
<style type="text/css"> 
* { 
padding:0; 
margin:0; 
} 
.digg { 
height: auto; 
width: 190px; 
font-size:12px; 
font-weight:normal; 
} 
.digg a { 
display: block; 
height: 48px; 
width: 189px; 
background-image: url(images/mark.gif); 
background-repeat: no-repeat; 
position: relative; 
color: #000; 
text-decoration: none; 
} 
.digg .good { 
margin-bottom:10px; 
margin-top:5px; 
} 
.digg .good a { 
background-position: -189px 0px; 
} 
.digg .good a:hover { 
background-position: 0px 0px; 
} 
.digg .bad a { 
background-position: -378px 0px; 
} 
.digg .bad a:hover { 
background-position: -567px 0px; 
} 
.digg a p { 
padding-left:30px; 
line-height:25px; 
} 
.digg .bar { 
background-color: white; 
height: 5px; 
left: 20px; 
overflow: hidden; 
position: absolute; 
text-align: left; 
top: 30px; 
width: 55px; 
} 
.bar #g_img { 
background-image: url(images/sprites.gif); 
background-repeat: repeat-x; 
height: 5px; 
width: auto; 
} 
.bar #b_img { 
background-image: url(images/sprites.gif); 
background-repeat: repeat-x; 
height: 5px; 
width: auto; 
background-position: 0px -5px; 
} 
.num { 
color: #333; 
font: normal normal 100 10px/12px Tahoma; 
left: 80px; 
position: absolute; 
top: 26px; 
} 
.digg .good .bar { 
border: 1px solid #40A300; 
} 
.digg .bad .bar { 
border: 1px solid #555; 
} 
</style> 
</head> 
<body> 
<div class="digg" id="digg"> 
<div class="good"> <a href="#"> 
<p>这个文档不错</p> 
<div class="bar"> 
<div id="g_img" style="width:70%"></div> 
</div> 
<span class="num" id="num">70%(7000)</span> </a> </div> 
<div class="bad"> <a href="#"> 
<p>文档有待改进</p> 
<div class="bar"> 
<div id="b_img" style="width:30%"></div> 
</div> 
<span class="num">30%(3000)</span> </a> </div> 
</div> 
</body> 
</html>

有了demo,其他实现起来就方便多了,首先是页面获取html,页面第一次加载,用ajax获取后台数据,不要直接显示。(这里为了方便测试,就用asp作为后台语言)
下面是asp输出html代码
function getdigshtml()'输出html 
dim rsajax,sql,str,digsnum,undigsnum,digsnumall,digsper,undigsper 
Set rsajax=server.CreateObject("adodb.recordset") 
sql="select * from dig where id=1" 
rsajax.open sql,conn,1,1 
digsnum=rsajax("digs") 
undigsnum=rsajax("undigs") 
if isnull(digsnum) then digsnum=0 
if isnull(undigsnum) then undigsnum=0 
digsnumdigsnumall=digsnum+undigsnum 
if digsnumall=0 then 
digsper=0 
undigsper=0 
else 
digsper=FormatNumber(cint(digsnum)/cint(digsnumall),3)*100 
undigsper=FormatNumber(cint(undigsnum)/cint(digsnumall),3)*100 
end if 
str="<div class='good'>" 
strstr=str&"<a href=JavaScript:isdigs('digs') >" 
strstr=str&"<p>这个文档不错</p><div class='bar'><div id='g_img' style='width:"&digsper&"%'></div></div>" 
strstr=str&"<span class='num'>"&digsper&"%("&digsnum&")</span>" 
strstr=str&"</a></div><div class='bad'>" 
strstr=str&"<a href=JavaScript:isdigs('undigs') >" 
strstr=str&"<p>文档有待改进</p><div class='bar'><div id='b_img' style='width:"&undigsper&"%'></div></div>" 
strstr=str&"<span class='num'>"&undigsper&"%("&undigsnum&")</span>" 
strstr=str&"</a></div>" 
getdigshtml=str 
end function

输出完了 接下来就是前台获取,这时候我们就要用到jquery ajax,为什么不直接用ajax,原因很简单,我不会。。。。。看一下jquery中ajax代码,很简单
function getdigshtml()//获取顶一下,踩一下html 
{ 
$.ajax({ 
type:'POST', 
url:'digg.asp', 
data:'action=getdigshtml', 
success:function(msg){ 
$("#digg").html(msg); 
} 
}) 
}

输出完了,接下来一步就是digs和undigs的操作了,跟获取html的代码差不多
function isdigs(digtype)//顶一下,踩一下操作 
{ 
$.ajax({ 
type:'POST', 
url:'digg.asp', 
data:'action=digs&digtype='+digtype, 
/* beforeSend:function(){ 
$("#vote").hide(); 
$("#loadings").show(); 
}, ajax请求显示loading效果*/ 
success:function(msg){ 
switch (msg) 
{ 
/* 后台用来判断 
case '1': 
$("#loadings").hide(); 
$("#vote").show(); 
alert("请先登录!"); 
break; 
case '2': 
$("#loadings").hide(); 
$("#vote").show(); 
alert("请先下载,再操作!"); 
break; 
case '4': 
$("#loadings").hide(); 
$("#vote").show(); 
alert("您已经参与过评价!"); 
break;*/ 
case '3': 
getdigshtml();//重新绑定html 
//$("#loadings").hide(); 
//$("#vote").show(); 
alert("谢谢你的参与!"); 
break; 
default: 
} 
} 
}) 
}

注释掉的代码:一部分是后台数据合法验证用的,beforeSend这个方法是ajax请求执行前的相关操作(用于做loading比较多)
最后一步就是,每次数据提交完并且成功返回,getdigshtml()都要重新获取绑定下,这样就保证了数据的实时性。
演示代码需要asp环境,大家可以测试下。
打包下载地址: https://3water.com/jiaoben/28489.html
Javascript 相关文章推荐
使用正则替换变量
May 05 Javascript
很全的显示阴历(农历)日期的js代码
Jan 01 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
九种js弹出对话框的方法总结
Mar 12 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
May 11 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
vue keep-alive请求数据的方法示例
May 16 Javascript
Vue 全局loading组件实例详解
May 29 Javascript
layui中的switch开关实现方法
Sep 03 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
flexigrid 类似ext grid的JS表格代码
Jul 17 #Javascript
基于JQuery的Pager分页器实现代码
Jul 17 #Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 #Javascript
JS延迟加载(setTimeout) JS最后加载
Jul 15 #Javascript
JavaScript.Encode手动解码技巧
Jul 14 #Javascript
JavaScript中的一些定位属性[图解]
Jul 14 #Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 #Javascript
You might like
php 大数据量及海量数据处理算法总结
2011/05/07 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
用js做一个小游戏平台 (一)
2009/12/29 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
python生成器的使用方法
2013/11/21 Python
python网络编程实例简析
2014/09/26 Python
python中Apriori算法实现讲解
2017/12/10 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
详解python中docx库的安装过程
2019/11/08 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
销售自荐信
2013/10/22 职场文书
优秀实习自我鉴定
2013/12/04 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
学校党支部承诺书
2015/04/30 职场文书
大学生安全教育主题班会
2015/08/12 职场文书
宣传委员竞选稿
2015/11/19 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis