jQuery:Gmail星标? [英] jQuery: Gmail Star?

问题描述

我想知道是否有人对创建gmail收件箱星标(收藏夹)有什么好的指导?

I was wondering if anyone had any good tutorials around creating a gmail inbox star (favorite) ?

我想我想创建类似stackoverflow star或gmail inbox star的东西.我有一组列表项，我向其中添加了几个控件.一个是复选框(用于存档或批量删除)，另一个是用于收藏夹的占位符复选框.我只是想知道最好的方法是用jquery使它变得时髦.

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(将图片精灵用作星标):

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.

这篇关于jQuery:Gmail星标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！