1. Achieve the mall score small stars
/**
* JS Scoring effect
*/
function score (options) {
This.config = {
Selector: '. Star ',//rating container
Rendercallback:null,//callback after rendering page
Callback:null//Click to score Callback
};
This.cache = {
AMSG: [
"Very bad"
"Not satisfied, partly damaged",
"General | Quality generally",
"Good quality",
"Very good"
],
istar:0,
iscore:0
};
var scoreresult = 0;
This.init = function (options) {
This.config = $.extend (this.config, Options | | {});
var = this,
_config = Self.config,
_cache = Self.cache;
Self._renderhtml ();
};
this._renderhtml = function () {
var = this,
_config = Self.config;
var html = ' <span class= ' des ' ></span> ' +
' <p class= ' star-p hidden ' ></p> ';
$ (_config.selector). Each (function (index, item) {
$ (item). append (HTML);
$ (item). Wrap ($ (' <div class= "parentcls" style= "position:relative" ></div> "));
var parentcls = $ (item). closest ('. Parentcls ');
Self._bindenv (PARENTCLS);
_config.rendercallback && $.isfunction (_config.rendercallback) && _config.rendercallback ();
});
};
this._bindenv = function (parentcls) {
var = this,
_config = Self.config,
_cache = Self.cache;
$ (_config.selector + ' Li ', parentcls). Each (function (index, item) {
var score = index + 1;
Move the mouse over
$ (item). mouseover (function (e) {
var offsetleft = $ (' ul ', parentcls) [0].offsetleft;
Ismax (index + 1);
$ (' P ', parentcls). Hasclass (' hidden ') && $ (' P ', parentcls). Removeclass (' hidden ');
$ (' P ', parentcls). css ({' Left ': Index * $ (this). Width () + + ' px '});
var html = ' <em> ' +
' <b> ' + score + ' </b> + ' + _cache.amsg[index].split (' | ') [0] + "+
' </em> ' + _cache.amsg[index].split (' | ') [1];
$ (' P ', parentcls). HTML (HTML);
});
Mouse move out
$ (item). mouseout (function () {
Ismax ();
!$ (' P ', parentcls). Hasclass (' hidden ') && $ (' P ', parentcls). addclass (' hidden ');
});
Mouse click
$ (item). Click (function (e) {
var index = $ (_config.selector + ' Li ', parentcls). Index ($ (this));
_cache.istar = index + 1;
!$ (' P ', parentcls). Hasclass (' hidden ') && $ (' P ', parentcls). addclass (' hidden ');
var html = ' <strong> ' +
Score +
' Points </strong> ' + _cache.amsg[index].split (' | ') [1];
$ ('. Des ', parentcls). HTML (HTML);
_config.callback && $.isfunction (_config.callback) && _config.callback ({staramount: _cache.istar});
Scoreresult=score;
});
});
function Ismax (iarg) {
_cache.iscore = Iarg | | _cache.istar;
var lis = $ (_config.selector + ' Li ', parentcls);
for (var i = 0; i < lis.length; i++) {
Lis[i].classname = i < _cache.iscore? "On": "";
}
}
}
This.getscore = function () {
return scoreresult;
}
}
HTML file
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<link rel= "stylesheet" type= "Text/css" href= "/public/review/assets/review.css" >
<meta name= "Viewport"
Content= "Width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" >
<script type= "Text/javascript" src= "/public/js/jquery-1.8.2.min.js" ></script>
<script type= "Text/javascript" src= "/public/review/assets/score.js" ></script>
<script type= "Text/javascript" src= "/public/js/jquery.enplaceholder.js" ></script>
<script type= "Text/javascript" src= "/public/review/assets/review.js" ></script>
<title> Business Reviews </title>
<body>
<div class= "Body" >
<div class= "title" >
<span class= "TitleText" > I want to review </span>
</div>
<form id= "RegForm" class= "form" name= "RegForm" action= "/review/review/save" method= "POST" >
<!--<div class= "Navi" >
<! –<span> Business Name </span>–>
<input type= "text" id= "seller" name= "seller_name" class= "input" placeholder= "Please enter the merchant name"/>
<input type= "hidden" id= "userId" name = "UID" value= "{$uid}"/>
</div>-->
<div class= "Navi" >
<input type= "hidden" id= "UID" name = "UID" value= "{$uid}"/>
<input type= "text" id= "nickname" Name= "nickname" class= "input" placeholder= "Please enter user nickname"/>
</div>
<div id= "Nicktip" class= "Sellertip" ></div>
<div class= "Content" >
<div class= "textarea" >
<textarea id= "reviewcontent" name= "reviewcontent" class= "input" placeholder= "Please enter evaluation content" ></textarea>
</div>
</div>
<div id= "Contenttip" class= "Sellertip" ></div>
<div class= "Star" >
<div>
<span> Overall Rating </span>
</div>
<div>
<div class = "List" >
<ul>
<li value= "1" ><a href= "javascript:;" >1</a></li>
<li value= "2" ><a href= "javascript:;" >2</a></li>
<li value= "3" ><a href= "javascript:;" >3</a></li>
<li value= "4" ><a href= "javascript:;" >4</a></li>
<li value= "5" ><a href= "javascript:;" >5</a></li>
</ul>
</div>
<input type= "hidden" id= "score" name = "Score" value= "0"/>
</div>
</div>
<div class= "CENTERBTN" >
<a href= "Javascript:savehandler ()" >
</a>
</div>
</form>
</div>
</body>
CSS file
* {
margin:0;
padding:0;
font-size:15px;
}
UL, Li {
List-style:none;
}
. Star {
position:relative;
height:24px;
margin:10px Auto 0;
}
. title {
box-shadow:0 1px 10px rgba (0, 0, 0, 0.1);
Background: #fcfcfc;
font-size:20px;
Font-weight:bold;
Color: #5c5c5c;
Background-image:linear-gradient (to bottom, #FFFFFF, #F2F2F2);
padding:13px;
Text-align:center;
}
. titletext {
Text-align:center;
}
. Star Span {
Float:left;
height:19px;
line-height:19px;
padding-right:20px;
}
. Star UL {
Margin:0 10px;
}
. Star Li {
Float:left;
width:24px;
height:22px;
Text-indent: -9999px;
Background:url ('/public/img/star.png ') no-repeat;
Cursor:pointer;
padding-left:5px;
}
. Star Li.on {
Background-position:0 -28px;
}
. Star P {
Background:url ('/public/img/icon.gif ') no-repeat;
padding:10px 10px 0;
Position:absolute;
top:20px;
width:159px;
height:60px;
z-index:100;
}
. Star P EM {
Color: #FF6600;
Display:block;
Font-style:normal;
}
. Star Strong {
Color: #ff6600;
padding-left:50px;
}
. Hidden {
Display:none;
}
. des {
padding-left:60px;
height:24px;
padding-top:5px;
}
. sellertip {
Text-align:left;
height:12px;
font-size:13px;
Margin-top: -5px;
}
#contentTip {
margin-top:20px;
}
. centerbtn {
padding-top:22px;
Text-align:center;
}
. form{
padding:0px 25px 0px 10px;
margin-top:10px
}
. form Input {
width:100%;
height:30px;
}
. TextArea TextArea {
width:100%;
height:150px;
}
. Navi {
padding-top:10px;
}
. Content {
padding-top:10px;
height:150px;
}
. Input {
Background-color: #FFFFFF;
border:1px solid #CCCCCC;
box-shadow:0 1px 1px rgba (0, 0, 0, 0.075) inset;
Transition:border 0.2s linear 0s, box-shadow 0.2s linear 0s;
border-radius:4px;
Color: #555555;
Display:inline-block;
font-size:14px;
height:20px;
line-height:20px;
margin-bottom:10px;
PADDING:4PX 6px;
Vertical-align:middle;
}
Textarea:focus, Input:focus {
Border-color:rgba (168, 236, 0 sss. 8);
box-shadow:0 1px 1px rgba (0, 0, 0, 0.075) inset, 0 0 8px Rgba (82, 168, 236, 0.6);
outline:0 none;
border-radius:4px;
}