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 相关文章推荐
Ruffy javascript 学习笔记
Nov 30 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
Jan 06 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 Javascript
基于JavaScript实现活动倒计时效果
Apr 20 Javascript
xmlplus组件设计系列之图标(ICON)(1)
May 05 Javascript
node中koa中间件机制详解
Aug 22 Javascript
使用 vue.js 构建大型单页应用
Feb 10 Javascript
JS实现点击按钮可实现编辑功能
Jul 03 Javascript
mock.js模拟前后台交互
Jul 25 Javascript
javascript异常处理实现原理详解
Feb 17 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
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
PHP实现把MySQL数据库导出为.sql文件实例(仿PHPMyadmin导出功能)
2014/05/10 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
JavaScript的public、private和privileged模式
2009/12/28 Javascript
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
jQuery实现div横向拖拽排序的简单实例
2016/07/13 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
python使用pil库实现图片合成实例代码
2018/01/20 Python
Django跨域请求CSRF的方法示例
2018/11/11 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
python中的print()输出
2019/04/12 Python
python实现坦克大战
2020/04/24 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
介绍一下Java中标识符的命名规则
2014/02/03 面试题
门诊手术室工作制度
2014/01/30 职场文书
学生评语大全
2014/04/18 职场文书
大学社团计划书
2014/05/01 职场文书
班级口号大全
2014/06/09 职场文书
三严三实对照检查材料
2014/09/22 职场文书
病人慰问信范文
2015/02/15 职场文书
只用Python就可以制作的简单词云
2021/06/07 Python
angular异步验证器防抖实例详解
2022/03/31 Javascript