Geek Answers Handbook

JQuery: Gmail Star?

I was wondering if anyone has any good tutorials on creating gmail inbox star (favorite)?

EDIT:

I guess I want to create something exactly like staroverflow star or gmail inbox star. I have a set of list items to which I have added several controls. One of them is a flag (for archiving or deleting a batch), and the other is a flag for bookmarking. I'm just wondering what the best approach is to make it fun with jquery.

+6
jquery
source share
5 answers

HTML:

<div id="[item id, probably a number]"> <p><a href="javascript:" class="star">Favorite Me!</a></p> </div>

CSS (use 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 }); }); }); });

Handle on your backend like you. Probably return the number of favorites to refresh the page. Easy.

+13
source share

I assume that you want a smaller “rating” system (as mentioned in other answers) and much more from the “add this to favorites” system?

Something like this should start you in the right direction. Others, feel free to call other best practices if you have any.

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); ?>
+5
source share

Here's an article explaining how to create a star rating system with jquery and ASP.Net MVC. This may be helpful.

+1
source share

Pretty much you want two different star images. One image is an ordinary white star, and the other is a yellow (or some color) star, which indicates that it was preferred. In the image click event, you simply check which image is src, and then change it accordingly to match the desired status of the favorite or not. Then you run an ajax call to actually save the status in the database.

+1
source share

I did this with jquery and font-awesome , will create an angular control and publish it.

Here is jsfiddle

 <label> <input type="checkbox" checked /><i class="icon-fixed-width icon-star"></i> One </label>
0
source share

More articles:


All Articles