StarBox 0.3 별점 라이브러리!

별점 라이브러리입니다.
Script.aculo.us 와 Prototype 1.6.0을 이용한 라이브러리 입니다.

유사하게 만들어 놓은 것이 있기는 한데 이게 훨씬 더 깔끔하네요...
투명 이미지를 통한 백그라운드 색상을 변화시켜서 처리를 했습니다.

상당히 효율적인 생각으로 접근했네요.  대부분의 국내 사이트의 롤오버 효과를 보면 이미지를 새로 로딩하는
경우가 많은데요.

이는 효율적인 웹 사이트 개발에 아주 저해되는 요소입니다.
개발자가 알아야할 부분이기도 하지만 디자이너도 알아야 할 부분입니다.

롤오버 자체는 더이상 이미지를 두개로 만들어 _on.gif  와 _off.gif 방식으로 롤오버는 더 이상
만들지 마시길 바랍니다.

이 라이브러리도 한가지 단점이라면 투명이미지를 활용해서 백그라운드 색상에 다른 경우에는
이미지를 새롭게 만들어 주어야 한다는 것이죠!

별의 색깔은 자유자재로 변곃라 수 있지만 백그라운드의 색상에 맞게 변경할 수는 없답니다.
그것까지 가능하려면 플래시를 조금 이용하거나 base64 이미지를 이용해서 동적인 이미지를 그리면 되겠죠.
하지만 그렇게 처리한다는 것 자체는 너무 무거워지는 라이브러리가 된다는 것!!

사용법

view plaincopy to clipboardprint?

1. <script type='text/javascript' src='js/prototype.js'></script>  
2. <script type='text/javascript' src='js/scriptaculous.js?load=effects'></script>  

<script type='text/javascript' src='js/prototype.js'></script> <script type='text/javascript' src='js/scriptaculous.js?load=effects'></script> 간단하게 위와 같이 파일을 import 합니다.
Css 파일도 import하구요.

view plaincopy to clipboardprint?

1. <link rel="stylesheet" type="text/css" href="css/starbox.css" />  

<link rel="stylesheet" type="text/css" href="css/starbox.css" /> 이렇게 사용하면 됩니다.

view plaincopy to clipboardprint?

1. new Starbox(element, average, { stars: 10, buttons: 20, max: 10 });  
2. new Starbox(element, average, { overlay: 'big.png', ghosting: true });  
3. new Starbox(element, average, { onRate: yourAjaxSaveFunction, rerate: true });  
4. <script type='text/javascript' src='js/starbox.js'></script>  

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 }); <script type='text/javascript' src='js/starbox.js'></script> 다양한 옵션들은 이 처럼 설정하시면 됩니다.

view plaincopy to clipboardprint?

1. new Starbox(  
2.   element,                  // the id of your element  
3.   average,                  // average rating to start with  
4.   {  
5.     buttons: 5,             // the number of buttons (choices)  
6.     className : 'default',  // or your own classname  
7.     color: false,           // color of the colorbar  
8.     duration: 0.6,          // duration of the effect across the bar, if used  
9.     effect: { mouseover: false, mouseout: true } // or your own  
10.     hoverClass: 'hover',    // or your own classname  
11.     hoverColor: false,      // color of the colorbar when hovered  
12.     ghostColor: false,      // color of the ghostbar  
13.     ghosting: false,        // shows a ghost bar with the average when true  
14.     identity: false,        // can be used with onRate  
15.     indicator: false,       // or a string to add an indicator div after the starbox  
16.                             // #{average}, #{max} and #{total} can be used  
17.                             // example: '#{average}/#{max} out of #{total} votes'  
18.     inverse: false,         // true, false  
19.     locked: false,          // or true to load an disabled starbox  
20.     max: 5,                 // maximum rating, that of the last star  
21.     onRate: false,          // or function(element, info){}  
22.                             // info = { identity: identity,  
23.                             //          rated: rated,  
24.                             //          average: average,  
25.                             //          max: max,  
26.                             //          total: total  
27.                             //        }  
28.     overlay: 'default.png', // or other png in same folder as starbox.css  
29.     rated: false,           // or the previous rating cast by this user,  
30.                             // this is used by rerate to see if the starbox  
31.                             // needs to be locked  
32.     ratedClass: 'rated',    // or your own  
33.     rerate: false,          // or true to allows adjusting of previous rating  
34.     stars: 5,               // the amount of stars  
35.     total : 0               // the amount of votes cast  
36.   }  
37. );  

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 } ); 사용자 css 도 가능하겠죠.. ^^

view plaincopy to clipboardprint?

1. .starbox .stars { background: #cccccc; }  
2. .starbox .rated .stars { background: #dcdcdc; }  
3. .starbox .rated .hover .stars { background: #cccccc; }  
4. .starbox .colorbar { background: #1e90ff; }  
5. .starbox .hover .colorbar { background: #ffcc1c; }  
6. .starbox .rated .colorbar { background: #64b2ff; }  
7. .starbox .rated .hover .colorbar { background: #1e90ff; }  
8. .starbox .ghost { background: #a1a1a1; }  
9. .starbox .indicator { clear: both; }