Rev. 2.73


Starbox는 컨텐츠 평가방법으로 자주 사용되고 있는 별점추천의 UI 라이브러리입니다. PrototypeScriptaculous를 라이브러리를 필요로하며, PNG 이미지가 사용되었고, Ajax로 데이터를 송/수신합니다. CSS기반으로 표현되는 깔끔한 디자인과 다양한 포멧을 지원하는 것이 특징입니다.

How to use

  new Starbox(element, average, { stars: 10, buttons: 20, max: 10 });
  new Starbox(element, average, { overlay: 'big.png', ghosting: true });
  new Starbox(element, average, { onRate: yourAjaxSaveFunction, rerate: true });


new Starbox(
  element,                  // the id of your element
  average,                  // average rating to start with
    buttons: 5,             // the number of buttons (choices)
    className : 'default',  // or your own classname
    color: false,          // color of the colorbar
    duration: 0.6,          // duration of the effect across the bar, if used
    effect: { mouseover: false, mouseout: true } // or your own
    hoverClass: 'hover',    // or your own classname
    hoverColor: false,     // color of the colorbar when hovered
    ghostColor: false,     // color of the ghostbar
    ghosting: false,       // shows a ghost bar with the average when true
    identity: false,       // can be used with onRate
    indicator: false,      // or a string to add an indicator div after the starbox
                            // #{average}, #{max} and #{total} can be used
                            // example: '#{average}/#{max} out of #{total} votes'
    inverse: false,        // true, false
    locked: false,         // or true to load an disabled starbox
    max: 5,                 // maximum rating, that of the last star
    onRate: false,         // or function(element, info){}
                            // info = { identity: identity,
                            //          rated: rated,
                            //          average: average,
                            //          max: max,
                            //          total: total
                            //        }
    overlay: 'default.png', // or other png in same folder as starbox.css
    rated: false,          // or the previous rating cast by this user,
                            // this is used by rerate to see if the starbox
                            // needs to be locked
    ratedClass: 'rated',    // or your own
    rerate: false,         // or true to allows adjusting of previous rating
    stars: 5,               // the amount of stars
    total : 0               // the amount of votes cast


  .starbox .stars { background: #cccccc; }
  .starbox .rated .stars { background: #dcdcdc; }
  .starbox .rated .hover .stars { background: #cccccc; }
  .starbox .colorbar { background: #1e90ff; }
  .starbox .hover .colorbar { background: #ffcc1c; }
  .starbox .rated .colorbar { background: #64b2ff; }
  .starbox .rated .hover .colorbar { background: #1e90ff; }
  .starbox .ghost { background: #a1a1a1; }
  .starbox .indicator { clear: both; }


Got something to add? You can just leave a comment.

Your Reaction Time!