我想知道是否有人有任何关于创建一个gbox收件箱明星(最喜欢的)的好教程？
编辑:
我想我想要像stackoverflow star或gmail inbox star一样创建一些东西.我有一组列表项,我添加了几个控件.一个是复选框(用于存档或批量删除)和另一个我有一个占位符复选框用于收藏.我只是好奇最好的方法是用jquery制作它的时髦.
Jas*_*son 13
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);
?>
| 归档时间： |
|
| 查看次数： |
4344 次 |
| 最近记录： |