jQuery：Gmail之星？

我想知道是否有人有任何关于创建一个gbox收件箱明星（最喜欢的）的好教程？

编辑：

我想我想创建像stackoverflow star或gmail inbox star一样的东西。 我有一组列表项，我添加了几个控件。 一个是复选框（用于存档或批量删除）和另一个我有一个占位符复选框用于collections。 我只是好奇最好的方法是用jquery制作它的时髦。

Answer 1

HTML：

 
Favorite Me!
  

CSS（使用星形的图像精灵）：

 .star { text-indent: -5000px; display: block; background: transparent url(../images/star.png) [coords for empty star]; height: [height of star]; width: [width of star]; } .star.favorited { background-position: [coordinates for favorited star]; } 

jQuery的：

 $(function() { $('star').click(function() { var id = $(this).parents('div').attr('id'); $(this).toggleClass('favorited'); $.post('/yourUpdateUrl', {'favorited': $(this).hasClass('favorited'), 'id': id}, function(data) { //some sort of update function here }); }); }); }); 

在你的后端处理你将如何。 可能会返回有多少collections夹来更新页面。 简单。

Answer 2

我假设你想要更少的“评级”系统（如其他答案中所述）和更多的“将此添加到collections夹”系统？

这样的事情会让你开始朝着正确的方向前进。 其他人，如果你有其他最好的做法，请随意加入。

foo.html

jquery.make_favorite.js

 (function($){ $.fn.make_favorite = function(){ var callback = function(response){ console.log(response); }; return this.each(function(){ $(this).click(function(){ var params = { item_type: $(this).attr('href').match(/\w+/)[0], // 'article' item_id: $(this).attr('href').match(/\d+/)[0] // 15 }; $.post('/favorite.php', params, callback, 'json'); // stop event propagation return false; }); }); }; })(jQuery); 

favorite.php

  true, 'message' => 'Huzza!'); } else { $response = array('ok' => false, 'message' => mysql_error()); } // the magic? echo json_encode($response); ?> 

Answer 3

这篇文章解释了如何使用jquery和ASP.Net MVC构建星级评级系统。 它可能会有所帮助。

Answer 4

你想要一个明星的两个不同的图像。 一个图像是纯白色星形，另一个是黄色（或任何颜色）星形，表示它已被collections。 在图像的单击事件上，您只需检查哪个图像是src，然后相应地更改它以匹配必要的collections状态。 然后运行ajax调用以实际将状态保存到数据库。

• 到目前为止我找到的最接近的教程： http ： //www.9lessons.info/2009/09/favourite-rating-with-jquery-and-ajax.html

Answer 5

我使用jquery和font-awesome制作它，将进行角度控制并发布它。

这是jsfiddle

   One