jquery raty星级评分插件的具体使用(可以结合ajax和后台交互)以及点赞功能的实现
2017-06-07 11:41
796 查看
建表:
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");//获取点击的收藏图片对应的id
var 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.pat
4000
h = '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:这样就可以进行收藏和评分了!
相关文章推荐
- sql server 关于表中只增标识问题 C# 实现自动化打开和关闭可执行文件(或 关闭停止与系统交互的可执行文件) ajaxfileupload插件上传图片功能,用MVC和aspx做后台各写了一个案例 将小写阿拉伯数字转换成大写的汉字, C# WinForm 中英文实现, 国际化实现的简单方法 ASP.NET Core 2 学习笔记(六)ASP.NET Core 2 学习笔记(三)
- 使用Bootstrap的popover标签中嵌入插件,并且为插件注册事件实现Ajax与后台交互
- extremetable+hibernate实现分页 关于结合hibernate后台数据分页和eXtremeTable分页功能的使用
- 使用xml、php和Ajax实现点赞功能
- php+xml结合Ajax实现点赞功能完整实例
- Ajax 使用 json 进行数据交互,实现 级联菜单功能
- 在JQuery的validate功能中使用remote实现Ajax功能后台验证
- asp.net Mvc4 使用ajax结合分页插件实现无刷新分页
- Laravel 5.3 使用内置的 Auth 组件实现多用户认证功能以及登陆才能访问后台的功能的一种实现方法
- Echarts 使用asp.net +ashx+ajax 实现 饼图、柱形图后台交互
- jQuery Raty星级评分插件使用方法
- struts2中使用json插件实现ajax交互
- EXTJS4 Grid Filter 插件的使用 与后台数据解析------Extjs 查询筛选功能的实现
- 实现可编辑单元格(使用Ajax完成后台交互)。
- 使用mysql、php和Ajax实现点赞功能
- php+mysql结合Ajax实现点赞功能完整实例
- 使用ajaxfileupload插件实现异步上传并保存图片功能
- php+xml结合Ajax实现点赞功能完整实例
- html中使用Ajax与后台接口api交互(以登录功能为例)
- 使用ajax,结合jquery,php实现图片上传预览功能