jQuery: Gmail Star?

后端未结

关注

 5  1580

暖寄归人

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 stackover

相关标签:

5条回答

深忆病人

2021-01-30 19:28
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
0 讨论(0)
发布评论:

提交评论
- 加载中...

有刺的猬

2021-01-30 19:31

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);

?>

0 讨论(0)

粉色の甜心

2021-01-30 19:33
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>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

情话喂你

2021-01-30 19:37

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.

0 讨论(0)

说谎

2021-01-30 19:49

Here is an article explaining how to build a star rating system with jquery and ASP.Net MVC. It may be helpful.

0 讨论(0)
发布评论:

提交评论
- 加载中...