테스트 사이트 - 개발 중인 베타 버전입니다
SIR

간단 별점 만들기

메이드
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 5년 전 · 5200 · 13

작업 중에 제이쿼리와 폰트어썸을 이용해서 간단 별점 평가 적용을 만들어 보았습니다.

워낙 간단한 소스라 팁으로 필요하신 분들 계실까 해서 공유해 봅니다.

 

출력할때에는 아래처럼 출력하시면 됩니다.

<script>

// 아이디, 적용된 평점, true이면 평가가능, false이면 읽기 전용, 폰트크기, 색상
var star = get_star('id1',0,true,24,'#e83e8c');
document.write(star[0]); //css
document.write(star[1]); //별
</script>

 

적용예 => http://shop.wwiz.kr/mshop/itemuselist.php

소스 => http://shop.wwiz.kr/star.php <= 소스보기 하시면 됩니다.

js => http://shop.wwiz.kr/js/star.js <= 다운받아 쓰시면 됩니다.

우선은 색상과 크기만을 지정할 수 있도록 했습니다.

 

 

목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 13개

수리수리마수미
프로필 보기이 회원 글보기이 회원의 댓글보기
 5년 전
아래 소스 그대로 board 게시판에 넣으면 되는건가요?

<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes">
<meta name="author" content="">
<meta name="description" content="">
<meta name="keywords" content="">
<meta property="og:type" content="website">
<meta property="og:title" content="MSHOP">
<meta property="og:description" content="">
<meta property="og:url" content="http://shop.wwiz.kr">
<meta property="og:image" content="http://shop.wwiz.kr/data/common/og.image.jpg" />
<title>MSHOP</title>
<link rel="home" href="http://shop.wwiz.kr">
<link rel="shortcut icon" href="http://shop.wwiz.kr/data/common/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="http://shop.wwiz.kr/theme/basic/css/default.css?ver=191202">
<link rel="stylesheet" href="http://shop.wwiz.kr/js/font-awesome/css/font-awesome.min.css?ver=191202">
<link rel="stylesheet" href="http://shop.wwiz.kr/theme/basic/css/colorset_basic.css?ver=191202">
<script>
// 자바스크립트에서 사용하는 전역변수 선언
var g5_url = "http://shop.wwiz.kr";
var g5_bbs_url = "http://shop.wwiz.kr/bbs";
var g5_is_member = "1";
var g5_is_admin = "super";
var g5_is_mobile = "";
var g5_bo_table = "";
var g5_sca = "";
var g5_editor = "";
var g5_cookie_domain = "";
var max_width = "1200";
</script>
<script src="http://shop.wwiz.kr/js/jquery-1.12.4.min.js?ver=191202"></script>
</head>


<script>
/* 별점 is_radio=false 읽기 전용 */
function get_star(id,value,is_radio = true, fontsize, color) {
var wrapclass = readonly = j = '';
if(is_radio == false) {
readonly = 'readonly';
wrapclass = 'starfalse';
}
wrapheight = fontsize + 5;
divwidth = fontsize + 1;
left = Math.floor(fontsize/2);
divmargin = Math.floor(fontsize/3);

if(is_radio == false) {
var style = '<style>';
style += '.star_wrap { position: relative; display: flex; height: '+wrapheight+'px}\n';
style += '.star_wrap:after {clear: both; display: block; content: ""; }\n';
style += '.star_wrap .star_div { position: relative; display: flex; color: #dc3545; width: '+divwidth+'px; }\n';
style += '.star_wrap .star_div:last-child { margin-right: auto; }\n';
style += '.star_wrap .star_div:before { position: absolute; width: 100%; top: 0; bottom: 0; left: calc( 50% - '+left+'px); right: 0; font-family: "fontAwesome"; content: "\\f006"; font-size: '+fontsize+'px; color: '+color+'; line-height: 1; }\n';
style += '.star_wrap .star_div:after {clear: both; display: block; content: ""; }\n';
style += '.star_wrap .star_half:before { content: "\\f123"; }\n';
style += '.star_wrap .star_full:before { content: "\\f005"; }\n';
style += '.star_wrap .star_div .star_radio { position: relative; width: 50%;}\n';
style += '.star_wrap .star_div .star_radio:after {clear: both; display: block; content: ""; }\n';
style += '.star_wrap .star_div .star_radio .radio_star { z-index: -1; opacity: 0; }\n';
style += '.star_wrap .star_div .star_radio label { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; }\n';
style += '</style>';
} else {
var style = '<style>';
style += '#'+id+'.star_wrap { position: relative; display: flex; height: '+wrapheight+'px}\n';
style += '#'+id+'.star_wrap:after {clear: both; display: block; content: ""; }\n';
style += '#'+id+'.star_wrap .star_div { position: relative; display: flex; color: #dc3545; width: '+divwidth+'px; }\n';
style += '#'+id+'.star_wrap .star_div:last-child { margin-right: auto; }\n';
style += '#'+id+'.star_wrap .star_div:before { position: absolute; width: 100%; top: 0; bottom: 0; left: calc( 50% - '+left+'px); right: 0; font-family: "fontAwesome"; content: "\\f006"; font-size: '+fontsize+'px; color: '+color+'; line-height: 1; }\n';
style += '#'+id+'.star_wrap .star_div:after {clear: both; display: block; content: ""; }\n';
style += '#'+id+'.star_wrap .star_half:before { content: "\\f123"; }\n';
style += '#'+id+'.star_wrap .star_full:before { content: "\\f005"; }\n';
style += '#'+id+'.star_wrap .star_div .star_radio { position: relative; width: 50%;}\n';
style += '#'+id+'.star_wrap .star_div .star_radio:after {clear: both; display: block; content: ""; }\n';
style += '#'+id+'.star_wrap .star_div .star_radio .radio_star { z-index: -1; opacity: 0; }\n';
style += '#'+id+'.star_wrap .star_div .star_radio label { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; }\n';
style += '</style>';
}

var html = '<div id="'+id+'" class="star_wrap '+wrapclass+'">';
for(var k=0; k < 5; k++) {
i = (k * 2) + 1;
j = i + 1;
var ichecked = (i == value) ? 'checked' : '';
var jchecked = (j == value) ? 'checked' : '';

var starclass = '';
if( (i < value && j < value) || j == value ) {
starclass = 'star_full';
}
if (i == value) {
starclass = 'star_half';
}

if(is_radio == false) {
html += '<div class="star_div '+starclass+'">';
html += '<div class="star_radio"
수리수리마수미
프로필 보기이 회원 글보기이 회원의 댓글보기
 5년 전
혹시 이거 php 따로 만드는거에요? 아니면 writeskin에 넣는거에요?
수리수리마수미
프로필 보기이 회원 글보기이 회원의 댓글보기
 5년 전
<script>

// 아이디, 적용된 평점, true이면 평가가능, false이면 읽기 전용, 폰트크기, 색상
var star = get_star('id1',0,true,24,'#e83e8c');
document.write(star[0]); //css
document.write(star[1]); //별
</script>

이거는 listskin에 넣는거에요?
수리수리마수미
프로필 보기이 회원 글보기이 회원의 댓글보기
 5년 전
링크 걸어주신 적용예 처럼 게시판 글쓰기에서 별점 점수 주고 리스트에 뜨게 하려는데 이거 안되네요
수리수리마수미
프로필 보기이 회원 글보기이 회원의 댓글보기
 5년 전
별점 주는 것도 안뜨는데 어떻게 해야하는지 알려주시면 감사합니다
메이드
프로필 보기이 회원 글보기이 회원의 댓글보기
 5년 전
<script src="http://shop.wwiz.kr/js/jquery-1.12.4.min.js?ver=191202"></script>
js 파일을 따로 분리해 놨습니다. 해당 파일을 다운받으신 후 사용하시면 됩니다.
수리수리마수미
프로필 보기이 회원 글보기이 회원의 댓글보기
 5년 전
js파일 소스보기 하니 코드 일부가 깨져있는데 상관없나요?
메이드
프로필 보기이 회원 글보기이 회원의 댓글보기
 5년 전
주석 달아놓은 거라 관계없습니다
수리수리마수미
프로필 보기이 회원 글보기이 회원의 댓글보기
 5년 전
감사합니다!!!!!♡♡
홈피공장장
프로필 보기이 회원 글보기이 회원의 댓글보기
 5년 전
감사합니다. ^^
깜찍이킬러
프로필 보기이 회원 글보기이 회원의 댓글보기
 5년 전
대단하십니다. 멋지내요 ~
윤똑똑
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
우와 감사합니다 ㅎㅎ

게시글 목록

번호 제목
23254
게시판별로 다른 og:image 주기 22
23244
회원 가입 시 아이디는 반드시 영문 + 숫자를 포함 하기 12
23241
게시글 작성자 아이피 클릭보드에 복사 후 삭제 버튼 1
23236
게시판 본문에 배경색 넣기 2
23200
사이트에 따라 다른 index 주기 22
23199
메뉴에 클래스 주기(12.24수정) 10
23179
초간단 최신글 랜덤 출력 하기 12
23174
smarteditor2 단축키 알람 텍스트오류수정 10
23138
원하는 사이트에만 css 주기 14
23128
영카트 쇼핑몰에서 webp 이미지 사용 가능하게 8
23125
install_db.php 개선점입니다. 9
23116
다국어 사용방법 9
23109
삭제된 유튜브 뷰페이지에서 날리기 12
23099
내가 원하는 날짜의 요일 가져오기.. 6
23092
[Amina] wr_link1,2 등록된 영상 원본이 삭제된 경우 목록 보기 오류 3
23083
회원 목록 엑셀 다운로드 HOOK 기능 4
23079
[SmartEditor 2] smarteditor2 bmp확장자 업로드 오류 "accept_file_types" 4
23063
css 파일을 php 파일로 작성할 때 12
23050
SIR 처럼 글 추천 시 추천한 사람, 추천 받은 사람에게 포인트 지급 8
23036
ajax 요청을 간편하게 5
23029
답변글 Re: 삭제하기 16
23007
사업자등록번호 입력하면 폐업여부 확인 소스 13
23003
숫자 입력시에 컴마와 소수점 제어하기 4
22983
테스트 서버에는 나만 접속하기? 6
22959
마우스우클릭 방지 한방에 후킹 20
22943
캡챠(자동등록방지) 에러 횟수 표현하기 11
22939
이미지 서버 업로드전 썸네일작성 2
22934
비회원 자동으로 아이디(닉네임), 비밀번호 입력 7
22905
웹폰트 한방에 후킹 21
22897
[아미나] 영카트용 사이트맵 4
이전 다음
전체 목록