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>

jQuery: Gmail Star?

foo.html

jquery.make_favorite.js

favorite.php

精彩评论

关注公众号

热门标签

图文推荐

jQuery: Gmail Star?

foo.html

jquery.make_favorite.js

favorite.php

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：