간단 별점 만들기 > 그누보드5 팁자료실

그누보드5 팁자료실

간단 별점 만들기 정보

간단 별점 만들기

본문

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

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

 

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

<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 <= 다운받아 쓰시면 됩니다.

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

 

 

추천
5
  • 복사

댓글 13개

아래 소스 그대로 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"
<script>

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

이거는 listskin에 넣는거에요?
<script src="http://shop.wwiz.kr/js/jquery-1.12.4.min.js?ver=191202"></script>
js 파일을 따로 분리해 놨습니다. 해당 파일을 다운받으신 후 사용하시면 됩니다.
© SIRSOFT
현재 페이지 제일 처음으로