jquery raty星级评分插件的具体使用(可以结合ajax和后台交互)以及点赞功能的实现
来源:互联网 发布:皆川纯子 知乎 编辑:程序博客网 时间:2024/05/16 08:06
建表:
CREATE TABLE `pigcms_system_voice` ( `id` int(11) NOT NULL AUTO_INCREMENT, `title` varchar(100) NOT NULL, `introduction` varchar(255) DEFAULT NULL, `img4` varchar(255) DEFAULT NULL, `score` decimal(10,2) DEFAULT NULL, `fav` int(11) DEFAULT NULL, PRIMARY KEY (`id`),)思路:1,控制器里index方法查询出数据库里的数据并分配到视图
$news=M('表名')->select();$this->assign('news',$news);
2.视图里循环显示出每条信息(标题,图片,简介)
<volist name="news" id="vo"> <div style="background-color:white;width:96%;margin:0px auto;margin-top:5px;border-radius:5px;"><div class="title2" style="padding-left:10px;"><img style="width:10px;height:15px;padding-right:12px;" src="./tpl/Wap/static/images/new_my/title_left.png"/><font style="font-size:17px">{pigcms{$vo['title']}</font><br /></div><div><img style="width:100%;" src="{pigcms{$vo['img4']}" /></div><div class="title1">{pigcms{$vo['introduction']}</div> <div class="title3"><div style="float:left;"><img class="sc" id="{pigcms{$vo['id']}" onClick="sc(this)" style="width:15px;height:15px;padding-left:0px;margin-left:0px;" src="./tpl/Wap/static/images/new_my/like.png"/> <font id="fav{pigcms{$vo.id}" color="#CCCCCC">{pigcms{$vo['fav']}</font></div><div style="float:left; margin-left:40px;"> <div class="score" name="{pigcms{$vo['id']}" id="{pigcms{$vo['score']}"></div></div> <div style="float:right;margin-right:20px"><a href="{pigcms{:U('Systemvoice/map2',array('id'=>$vo['id']))}"><img style="width:13px;height:13px" src="./tpl/Wap/static/images/new_my/ditudaohahng.png"/></a></div><div style="clear:both;"></div></div></div></volist>
这是每一条的图片,有多条。
3.评分和收藏功能的具体实现
视图里面要引入raty插件
<link rel="stylesheet" type="text/css" href="http://localhost/tpl/Wap/pure/static/raty/jquery.raty.css"/>
<script type="text/javascript" src="http://localhost/tpl/Wap/pure/static/raty/jquery.raty.js" charset="utf-8"></script>
根据自己放置的文件路径来写src里面的内容,raty插件可以去我上传的资源里面找。jquery脚本文件自己去引用。
视图里面的js代码:
<script type="text/javascript"> //收藏js代码function sc(obj){var id = $(obj).attr("id");//获取点击的收藏图片对应的idvar fav = '#fav'+id;var num = parseInt($(fav).text())+1;$.ajax({ type:"POST", url:"{pigcms{:U('Systemvoice/scajax')}", data:"id="+id, cache:false, //不缓存此页面 success:function(data){ $(fav).text(num);} });} //评分的js代码$.fn.raty.defaults.path = 'http://www.97farm.com/tpl/Wap/bluesky/static/raty/images';//$('.score').raty({readOnly: true,score:2.5});$('.score').each(function(i,e){var v = $(this).attr("id");$(this).raty({score:v,click: function(score, evt) {var id = $(this).attr("name");$.ajax({ type:"POST", url:"{pigcms{:U('Systemvoice/pfajax')}", data: {id:id,score:score},cache:false, //不缓存此页面 success:function(data){ //$("#sc").val(score);} });//alert('ID: ' + this.id + "\nscore: " + score + "\nevent: " + evt);$("#sc").val(score);}});});</script>
控制器里面收藏和评分ajax的代码
//收藏 public function scajax(){$rows2 = M('表名')->where(array('id'=>$_POST['id']))->setInc('fav',1); //点击一次对应id的fav值就加一json_encode($rows2); } //评分 public function pfajax(){$score1=$_POST["score"];//获取到视图传过来的分数$score2 = M('表名')->where(array('id'=>$_POST['id']))->getField('score'); //根据id从数据库里查询出原来的分数$score = ($score1+$score2)/2;//得到用户点击的分数和原来数据库里分数的平均值$data['score'] = $score;$result = M('System_voice')->where(array('id'=>$_POST['id']))->save($data); //把数据库里的值更新为算出来的平均值json_encode($score); }
like.png:
title_left.png:这样就可以进行收藏和评分了!
阅读全文
1 0
- jquery raty星级评分插件的具体使用(可以结合ajax和后台交互)以及点赞功能的实现
- jQuery Raty - 不错的星级评分插件
- 评分插件 jQuery raty的使用
- jQuery插件之-jQuery Raty星级评分
- jQuery Raty星级评分插件使用方法
- jQuery Raty星级评分插件使用方法
- jQuery.raty.js星星评分插件的使用
- 基于jQuery的星级评分插件
- 星级评分的jquery
- jquery 评分插件 juqer raty
- jQuery Raty评分插件使用方法
- 星级评分jquery插件
- JQuery插件--星级评分
- 基于SVG的jQuery星级评分插件-jRate
- 星级评分功能实现
- 星级评分的简化实现
- 星级评分的简化实现
- JQUERY 实现星级评分
- Gradle之依赖配置
- java后台跨服务器请求方法
- Android6.0中ART替换DVM的过程分析
- LeetCode 215. Kth Largest Element in an Array
- 结婚大师告诉你:如何去打扮花童!
- jquery raty星级评分插件的具体使用(可以结合ajax和后台交互)以及点赞功能的实现
- Android 命名规范 (提高代码可读性)
- Android动画点击不运行
- Eclipse Java工程导入外部jar包与内部jar包(导入项目有红色感叹号的解决办法)(转)
- TW自动化测试下拉框遇到的问题及解决方法
- Android6.0 一些新的改变
- 软件工程之软件测试
- 使用ftp加IP上传文件
- 第2.1篇 结合第1篇讲解 Rabbitmq channe类l参数详解