Fyneworks jQuery星级评分插件 - 一半收视率

我试图实施文章的星级评分系统，发现this漂亮的插件。我已经用我自己的明星交换了默认的star.gif。如果我使用完整的星级评分，一切正常。只要我尝试使用拆分星形函数，星星不会再正确显示。Fyneworks jQuery星级评分插件 - 一半收视率

星星本身的宽度为32px。

stars

半星应该在全明星的右侧的顶部。

如果从句似乎是负责计算位置以下：

// Prepare division control 
if(typeof control.split=='number' && control.split>0){ 
    var stw = ($.fn.width ? star.width() : 0) || control.starWidth; 
    var spi = (control.count % control.split), spw = Math.floor(stw/control.split); 
    star 
    // restrict star's width and hide overflow (already in CSS) 
    .width(spw) 
    // move the star left by using a negative margin 
    // this is work-around to IE's stupid box model (position:relative doesn't work) 
    .find('a').css({ 'margin-left':'-'+ (spi*spw) +'px' }) 
};

它嵌入在一个“换各路明星”循环。我用萤火虫调试过这个，计算似乎是正确的。每个第二颗星应该有-16px的左边距。由于某种原因，这不是显示在网站上。

有谁知道我在做什么错？我不得不提及我对JS的经验不多。

这里是CSS：

div.rating-cancel, div.star-rating { 
    background: none repeat scroll 0 0 transparent; 
    cursor: pointer; 
    display: block; 
    float: left; 
    height: 32px; 
    overflow: hidden; 
    text-indent: -999em; 
    width: 17px; 
} 

div.rating-cancel, div.rating-cancel a { 
    background: url("delete.gif") no-repeat scroll 0 -16px rgba(0, 0, 0, 0); 
} 

div.star-rating, div.star-rating a { 
    background: url("star.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0); 
} 

div.rating-cancel a, div.star-rating a { 
    background-position: 0 0; 
    border: 0 none; 
    display: block; 
    height: 100%; 
    width: 32px; 
} 

div.star-rating-on a { 
    background-position: 0 -32px !important; 
} 

div.star-rating-hover a { 
    background-position: 0 -64px; 
} 

div.star-rating-readonly a { 
    cursor: default !important; 
} 

div.star-rating { 
    background: none repeat scroll 0 0 transparent !important; 
    overflow: hidden !important; 
}

来源

2015-02-11 Moh-Aw

我真的不能告诉了什么错在这里。首先必须调整此设置的宽度。然后，人们可能想要摆脱浮动选项，并在显示屏上使用内联块。这样，以下组件将被绘制在一个新的行中。

div.rating-cancel, div.star-rating { 
    background: none repeat scroll 0 0 transparent; 
    cursor: pointer; 
    display: inline-block; 
    height: 32px; 
    overflow: hidden; 
    text-indent: -999em; 
    width: 32px; 
}

如果我用萤火虫更改了这个值，什么都没发生。我用原始文件替换了css，然后再添加我需要的更改，然后瞧，现在一切看起来不错。

来源

2015-02-17 09:23:57

Fyneworks jQuery星级评分插件 - 一半收视率

回答

相关问题