영화 리뷰 사이트나 제품을 구매하고 평가를 내리신 적이 있으실 텐데요. 이 기능을 jquery 별점 플러그인을 이용하여 구현할 수 있습니다.
또한, 이 기능은 1점부터 5점까지의 점수로 표시하는 것이 아닌 별이미지를 써서 조금 더 멋지게 구현할 수가 있는데요. 한번 예제를 통해 알아보겠습니다.
1. JS 파일 설치
별점 플러그인 사이트로 이동하여 설치 파일을 받아 압축을 풀어 줍니다.
압축을 해제한 뒤 모든 파일을 프로젝트의 resource에 복사해 줍니다.
2. 소스 코드
<script src='resource/jquery.js' type="text/javascript"></script> <script src='resource/jquery.MetaData.js' type="text/javascript" language="javascript"></script> <script src='resource/jquery.rating.js' type="text/javascript" language="javascript"></script> <link href='resource/jquery.rating.css' type="text/css" rel="stylesheet"/> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js" type="text/javascript"></script> </head> <body> <div id="tab-Testing"> <h2>평점을 매겨주세요</h2> <script type="text/javascript" language="javascript"> $(function(){ $('#form :radio.star').rating(); }); </script> <script> $(function(){ $('#tab-Testing form').submit(function(){ $('.test',this).html(''); $('input',this).each(function(){ if(this.checked) $('.test',this.form).append(this.value+'점이 매겨졌습니다.<br/>'); }); return false; }); }); </script> <script> $(function(){ $('.hover-star').rating({ focus: function(value, link){ var tip = $('#hover-test'); tip[0].data = tip[0].data || tip.html(); tip.html(link.title || 'value: '+value); }, blur: function(value, link){ var tip = $('#hover-test'); $('#hover-test').html(tip[0].data || ''); } }); }); </script> <form id="star"> <table width="100%"> <tr> <td valign="top" height="50px"> <div class="Clear"> 나의 점수는? <div> <%for(int i=1; i<=5; i++){ %> <input class="hover-star" type="radio" name="test-3B-rating-1" value="<%=i %>" title="<%=i %>점"/> <%} %> </div> </div> </td> <td valign="top" width="5"> <input type="submit" value="전송!" /> </td> </tr> <tr> <td valign="top" width="5"> <u>결과</u>:<br/> <div class="test Smaller"> </div> </td> </tr> </table> </form> </div>
위의 예제는 jquery 별점 플러그인에서 제공한 예제를 바탕으로 수정하여 구현하였습니다.
3. 소스 결과
위의 예제소스를 구현한 모습입니다.
5개의 별은 점수를 나타내고 그 중 하나를 클릭하고 전송을 누르면 점수가 표시됩니다.
이 외에도 공식사이트의 메뉴에서 DEMO를 눌러 들어가면 다양한 형태의 예제를 만나보실 수 있으니 참고하시기 바랍니다.
답글 남기기