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星級評分插件 - 一半收視率

回答

相關問題