간단 별점 만들기
작업 중에 제이쿼리와 폰트어썸을 이용해서 간단 별점 평가 적용을 만들어 보았습니다.
워낙 간단한 소스라 팁으로 필요하신 분들 계실까 해서 공유해 봅니다.
출력할때에는 아래처럼 출력하시면 됩니다.
<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개
<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"
// 아이디, 적용된 평점, true이면 평가가능, false이면 읽기 전용, 폰트크기, 색상
var star = get_star('id1',0,true,24,'#e83e8c');
document.write(star[0]); //css
document.write(star[1]); //별
</script>
이거는 listskin에 넣는거에요?
js 파일을 따로 분리해 놨습니다. 해당 파일을 다운받으신 후 사용하시면 됩니다.