jquery raty星级评分插件的具体使用(可以结合ajax和后台交互)以及点赞功能的实现

14 篇文章 0 订阅
5 篇文章 0 订阅


建表:

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.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:
这样就可以进行收藏和评分了!



jQuery插件raty是一个用于创建星级评分的工具。以下是raty中文文档的使用说明: 1. 引入raty.js文件和jquery.js文件: ```html <script src="jquery.js"></script> <script src="raty.js"></script> ``` 2. 创建一个元素来显示评分: ```html <div id="star"></div> ``` 3. 通过JavaScript代码来初始化评分: ```javascript $('#star').raty({ path: 'images/', // 图片文件的路径 score: 3, // 初始化评分 click: function(score, event) { // 点击评分时的回调函数 alert('您给了 ' + score + ' 分'); } }); ``` 以上代码中,`path`属性指定了图片文件的路径,`score`属性指定了初始化评分,`click`回调函数在评分被点击时被调用。 4. 可以使用其他选项来自定义raty的外观和行为,例如: ```javascript $('#star').raty({ path: 'images/', starOn: 'star-on.png', // 选中时的星星图片 starOff: 'star-off.png', // 未选中时的星星图片 starHalf: 'star-half.png', // 半选中时的星星图片 half: true, // 允许半选中 readOnly: true, // 只读模式 hints: ['差', '一般', '好', '很好', '非常好'], // 显示提示文本 score: function() { // 动态获取评分 return $(this).attr('data-score'); }, click: function(score, event) { alert('您给了 ' + score + ' 分'); } }); ``` 以上代码中,`starOn`、`starOff`和`starHalf`属性指定了不同状态下的星星图片,`half`属性允许半选中,`readOnly`属性设置为`true`表示只读模式,`hints`属性用于显示提示文本,`score`属性可以用函数来动态获取评分
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ougexingfuba

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值