My Name is Kay....

DIY , 먹방 , 개발 , 육아 , 여행 좋아합니다.
AdBlock 사용시 화면이 정상적으로 노출되지 않습니다.
포스팅 관련 문의 및 개발 문의는 Email : wkzkfmxksi@gmail.com

추가 포스팅이 이뤄지지 않는 블로그입니다. 문의는 wkzkfmxksi@gmail.com 으로 연락주세요.
kay
조회 수 13225 추천 수 0 댓글 2
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

별점 주기 플러그인입니다.


가끔 유용하게 사용하는 기능 쓸라면 코딩하기 귀찮은.....( _ _)..


Plugin Url : http://wbotelhos.com/raty

DownLoad : https://github.com/wbotelhos/raty  , raty-master.zip

(기본 샘플외에도 많은 기능이 있습니다.)



Test Url : http://www.uhoon.co.kr/test/6979.html


1.png



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="Pragma" content="no-cache"/>
		<meta http-equiv="Expires" content="-1"/>
		<title>jQuery Raty - A Star Rating Plugin</title>

		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script type="text/javascript" src="/test/2979/js/jquery.raty.js"></script>

	</head>
	<body>
		<div id="star" ></div>

		<div style="padding-top:20px;">
			<label for="starRating">Value : </label><input type="text" id="starRating" value="3"/>
		</div>

		<div style="padding-top:20px;">
			<label for="displayStarRating">Value : </label><span id="displayStarRating" style="padding-left:20px;">3</span>
		</div>
	</body>

	<script type="text/javascript">
		$(function() {
			$('div#star').raty({
				score: 3
				,path : "/test/2979/img"
				,width : 200
				,click: function(score, evt) {
					$("#starRating").val(score);
					$("#displayStarRating").html(score);
				}
			});
		});
	</script>
</html>


cancel      : false                                          // Creates a cancel button to cancel the rating.
cancelHint  : 'Cancel this rating!'                          // The cancel's button hint.
cancelOff   : 'cancel-off.png'                               // Icon used on active cancel.
cancelOn    : 'cancel-on.png'                                // Icon used inactive cancel.
cancelPlace : 'left'                                         // Cancel's button position.
click       : undefined                                      // Callback executed on rating click.
half        : false                                          // Enables half star selection.
halfShow    : true                                           // Enables half star display.
hints       : ['bad', 'poor', 'regular', 'good', 'gorgeous'] // Hints used on each star.
iconRange   : undefined                                      // Object list with position and icon on and off to do a mixed icons.
mouseout    : undefined                                      // Callback executed on mouseout.
mouseover   : undefined                                      // Callback executed on mouseover.
noRatedMsg  : 'Not rated yet!'                               // Hint for no rated elements when it's readOnly.
number      : 5                                              // Number of stars that will be presented.
numberMax   : 20                                             // Max of star the option number can creates.
path        : ''                                             // A global locate where the icon will be looked.
precision   : false                                          // Enables the selection of a precision score.
readOnly    : false                                          // Turns the rating read-only.
round       : { down: .25, full: .6, up: .76 }               // Included values attributes to do the score round math.
score       : undefined                                      // Initial rating.
scoreName   : 'score'                                        // Name of the hidden field that holds the score value.
single      : false                                          // Enables just a single star selection.
size        : 16                                             // The size of the icons that will be used.
space       : true                                           // Puts space between the icons.
starHalf    : 'star-half.png'                                // The name of the half star image.
starOff     : 'star-off.png'                                 // Name of the star image off.
starOn      : 'star-on.png'                                  // Name of the star image on.
target      : undefined                                      // Element selector where the score will be displayed.
targetFormat: '{score}'                                      // Template to interpolate the score in.
targetKeep  : false                                          // If the last rating value will be keeped after mouseout.
targetText  : ''                                             // Default text setted on target.
targetType  : 'hint'                                         // Option to choose if target will receive hint o 'score' type.
width       : undefined                                      // Manually adjust the width for the project.


TAG •
?
  • ?
    안녕하세요 2015.07.21 23:51

    마지막 별 한개가 꼭 이렇게 출력되는데 

    ****

    *


    이거 왜 이러는지 혹시 아시나요?

  • ?
    kay 2015.07.27 17:46

    width 옵션 값을 조절해보세요~ ^^



  1. 한글/영어 byte 체크해서 자르기

    Date2013.11.30 Categoryetc Bykay Views9704
    Read More
  2. 페이지 로딩 속도 개선 - 이미지 로딩처리

    Date2013.03.02 Categoryetc Bykay Views6533
    Read More
  3. 페이지 또는 객체에서 특정 키워드 강조하기

    Date2014.06.14 Categoryetc Bykay Views2716
    Read More
  4. 특정 객체가 화면에 보이는지 여부 확인

    Date2015.12.14 CategoryUI Bykay Views4897
    Read More
  5. 자동 롤링 배너 Jquery

    Date2013.08.07 CategoryPlugIn Bykay Views13883
    Read More
  6. 자동 Submit 방지 및 Enter Key 체크하기

    Date2013.08.12 Categoryetc Bykay Views7826
    Read More
  7. 우클릭 , 셀 선택 , 드래그 방지 스크립트

    Date2014.02.17 Categoryetc Bykay Views7916
    Read More
  8. 에러 리포팅 , Ajax 디버깅 ( JS , ASP ) - 오류메시지 확인하기

    Date2013.03.08 Categoryetc Bykay Views30638
    Read More
  9. 스크롤 탑 컨트롤 - scrolltop control

    Date2013.05.29 CategoryUI Bykay Views18965
    Read More
  10. 스크롤 따라 다니는 배너

    Date2013.09.14 CategoryPlugIn Bykay Views4517
    Read More
  11. 동적으로 추가된 객체에 datepicker() 적용하기

    Date2013.11.06 CategoryUI Bykay Views10141
    Read More
  12. 기본값 가져오기 get default value

    Date2014.10.19 Categoryetc Bykay Views2323
    Read More
  13. 객체 초기화

    Date2013.04.04 CategoryUI Bykay Views4958
    Read More
  14. XML 파싱

    Date2013.03.02 Categoryetc Bykay Views6337
    Read More
  15. woothemes FlexSlider - 슬라이더

    Date2014.09.16 CategoryUI Bykay Views286915
    Read More
  16. vGrid - 브라우저 너비에 따른 가변 그리드

    Date2013.04.08 CategoryPlugIn Bykay Views6956
    Read More
  17. Tree 메뉴만들기

    Date2013.08.14 CategoryPlugIn Bykay Views5648
    Read More
  18. tiptip - 툴팁

    Date2013.04.14 CategoryPlugIn Bykay Views17886
    Read More
  19. Table에 동적 Tr 추가/삭제 하기

    Date2014.02.09 Categoryetc Bykay Views21280
    Read More
  20. Star Rating Plugin - jQuery 별점 주기

    Date2014.05.01 CategoryPlugIn Bykay Views13225
    Read More
Board Pagination Prev 1 2 3 Next
/ 3