我想知道是否有人有关于创建 gmail 收件箱明星（最喜欢的）的任何好的教程？
编辑：
我想我想创建类似 * 明星或 gmail 收件箱明星的东西。我有一组添加了几个控件的列表项。一个是复选框（用于归档或批量删除），另一个是我有一个占位符复选框用于收藏。我只是想知道用 jquery 让它变得时髦的最佳方法是什么。
【问题讨论】：
标签： jquery
HTML：
<div id="[item id, probably a number]">
<p><a href="javascript:" class="star">Favorite Me!</a></p>
</div>
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
});
});
});
});
如何在您的后端处理。可能返回有多少收藏夹来更新页面。很简单。
【讨论】：
我假设您想要更少的“评级”系统（如其他答案中所述）而更多的“将其添加到收藏夹”系统？
这样的事情应该会让你朝着正确的方向开始。其他人，如果您有其他最佳实践，请随时提出建议。
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.make_favorite.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.favorite').make_favorite();
});
</script>
</head>
<body>
<a href="#article-15" class="favorite">
<img src="star.gif" alt="Make it a favorite!" />
</a>
<a href="#image-12" class="favorite">
<img src="star.gif" alt="Make it a favorite!" />
</a>
</body>
</html>
(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);
<?php
// make_favorite function
function make_favorite($item_type, $item_id){
return mysql_query(
sprintf("insert into favorites (user_id, item_type, item_id) values (%d, '%s', %d);", $_SESSION['user_id'], $item_type, $item_id)
);
}
// set header
header('Content-type: application/json');
// ensure to cleanse these inputs
$item_type = $_POST['item_type'];
$item_id = $_POST['item_id'];
if(make_favorite($item_type, $item_id)){
$response = array('ok' => true, 'message' => 'Huzza!');
}
else {
$response = array('ok' => false, 'message' => mysql_error());
}
// the magic?
echo json_encode($response);
?>
【讨论】：
Here 是一篇解释如何使用 jquery 和 ASP.Net MVC 构建星级评分系统的文章。这可能会有所帮助。
【讨论】：
您几乎想要两个不同的星星图像。一张图片是纯白色的星星，另一张是黄色（或任何颜色）的星星，表明它已被收藏。在图像的点击事件中，您只需检查哪个图像是 src，然后相应地更改它以匹配是否收藏的必要状态。然后运行 ajax 调用将状态实际保存到数据库中。
【讨论】：
我使用 jquery 和font-awesome 制作了它，将制作一个角度控件并发布它。
这里是jsfiddle
<label>
<input type="checkbox" checked /><i class="icon-fixed-width icon-star"></i> One
</label>
【讨论】：