SIR

간단 별점 만들기 > 그누보드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

댓글 전체

아래 소스 그대로 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 파일을 따로 분리해 놨습니다. 해당 파일을 다운받으신 후 사용하시면 됩니다.
전체 1,775 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

진행중 포인트경매

  1. 참여7 회 시작21.01.16 18:00 종료21.01.23 18:00
  2. 참여4 회 시작21.01.16 12:00 종료21.01.23 12:00
  3. 참여33 회 시작21.01.15 12:00 종료21.01.22 12:00

(주)에스아이알소프트 (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT