Question

我想知道是否有人有关于创建gmail收件箱明星（最喜欢的）的任何好教程？

编辑：

我想我想创建像stackoverflow star或gmail inbox star一样的东西。我有一组列表项，我添加了几个控件。一个是复选框（用于存档或批量删除）和另一个我有一个占位符复选框用于收藏。我只是好奇最好的方法是用jquery制作它的时髦。

Answer 1

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

在你的后端处理你的意愿。可能会返回有多少收藏夹来更新页面。容易。

Answer 2

我假设你想要一个“评级”系统（如其他答案所述），而不是“将此添加到收藏夹”系统？

这样的事情会让你开始朝着正确的方向前进。其他人，如果你有其他最佳实践，请随意加入。

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

?>

Answer 3

Here是一篇解释如何使用jquery和ASP.Net MVC构建星级评分系统的文章。这可能会有所帮助。

Answer 4

你想要一个明星的两个不同的图像。一个图像是纯白色星形，另一个是黄色（或任何颜色）星形，表示它已被收藏。在图像的单击事件上，您只需检查哪个图像是src，然后相应地更改它以匹配所关注的必要状态。然后运行ajax调用以实际将状态保存到数据库。

到目前为止我找到的最近的教程：http://www.9lessons.info/2009/09/favourite-rating-with-jquery-and-ajax.html

Answer 5

我使用jquery和font-awesome制作它，将进行角度控制并发布。

以下是jsfiddle

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

jQuery：Gmail之星？

5 个答案:

foo.html

jquery.make_favorite.js

favorite.php