jQuery: Gmail Star?
I was wondering if anyone had any good tutorials around creating a gmail inbox star (favorite) ?
EDIT:
I guess I want to create something just like the stackoverflow star or gmail inbox star. I have a set of list items that i've added several controls to. One being a checkbox (for 开发者_开发问答archiving, or batch deleting) and another I have a placeholder checkbox for favoriting. I'm just curious as to what the best approach is for making it snazzy with jquery.
HTML:
<div id="[item id, probably a number]">
<p><a href="javascript:" class="star">Favorite Me!</a></p>
</div>
CSS (use an image sprite for star):
.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
});
});
});
});
Process on your backend how you will. Probably return how many favorites there are to update the page. Easy.
I'm assuming you want less of a "rating" system (as mentioned in the other answers) and more of a "add this to favorites" system?
Something like this should get you started in the right direction. Others, feel free to chime in with other best-practices if you have them.
foo.html
<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>
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
<?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 is an article explaining how to build a star rating system with jquery and ASP.Net MVC. It may be helpful.
Pretty much you want two different images of a star. One image is the plain white star and the other is the yellow (or whatever color) star that indicates it has been favorited. On the click event of the image, you just check which image is the src and then change it accordingly to match the necessary status of favorited or not. Then you run an ajax call to actually save the status to the database.
- The closest tutorial I found so far: http://www.9lessons.info/2009/09/favourite-rating-with-jquery-and-ajax.html
I made it using jquery and font-awesome, Will make an angular control and post it.
Here is the jsfiddle
<label>
<input type="checkbox" checked /><i class="icon-fixed-width icon-star"></i> One
</label>
加载中,请稍侯......
精彩评论