<script>show_start({'submit':1,'call_func':'alert'});</script>
pingfen.js
//使用方法请看 function show_start(vars_obj)后面说明
var obj_copy = null;
var move_timer = null;
function show_start(vars_obj)
{//动态载入评分条面板
/*
调用方式
在调用前先载入本js文件:
<script src="pingfen.js"></script>
在需要显示的地方插入下面代码即可(注:可以不给某属性赋值,让程序使用默认值):
多句形式:
<script>
//第一步,声明对象并给属性赋值
var vars_obj = {'属性名1':属性值,'属性名2':属性值,'img_folder':'http://www.xx.com/ddd/'};
或
var vars_obj = {};
vars_obj.img_folder = 'http://www.xx.com/ddd/';
//第二步
show_start(vars_obj);
</script>
或写成一句的形式:
<script>show_start({'属性名1':属性值,'属性名2':属性值,'img_folder':'http://www.xx.com/ddd/'});</script>
调用方式说明结束
vars_obj:js对象,此对象声明方法 var vars_obj = {};
vars_obj对象拥有属性和值说明:
img_folder:图片文件夹路径字符串,注意结束时字符串最后必须是/,默认是本js文件夹;
用到三个图片:transparent.gif(img对象的透明图片);star_dark.gif(暗星);star_light.gif(亮星)
star_dark_gif_name:暗星gif文件名(注意:不用写.gif,只需要写文件名即可)字符串,默认是star_dark
star_light_gif_name:亮星gif文件名(注意:不用写.gif,只需要写文件名即可)字符串,默认是star_light
transparent_gif_name:img对象src(亮img)gif文件名(注意:不用写.gif,只需要写文件名即可)字符串,默认是transparent
border_color:暗星左右边border颜色;表示色彩的字符串值;默认白色
border_width:暗星左右边border宽度;大于0数字;单位px;默认5
submit:是否用于提交,是时可以更改值;1|0整数值;默认0
rating_max:100%时分数是多少,1或以上数字(支持小数),默认是5;
rating:评分初始值,数字,0到rating_max间,超过只保留终值(0或rating_max);默认是0;
star_width:单个星图片宽度;1或以上整数;单位是px;默认是15
star_num:100%值时星个数,1或以上数字(支持带小数),默认是5
star_height:单个星图片的高度;1或以上整数;单位是px,默认是14
rating_input_name:用于提交评论值的input的name,默认是 pingfen,只允许使用英文和数字
call_func:点击改变值时调用函数hander,并传入改变后的值,所以函数中可以接受一个参数,默认是空;
满分的宽度 = 星个数*星宽度;
下面html代码必须值:
父宽(方式不限);
父左边框宽度(内联css);
input宽度(100%,或者父宽不指定,input撑开);
父对象:position:relative(让左边的值相对body);
*/
if (!vars_obj) vars_obj = {};
if (typeof(vars_obj.img_folder) != 'string') vars_obj.img_folder = '';
if (typeof(vars_obj.star_dark_gif_name) != 'string') vars_obj.star_dark_gif_name = 'star_dark';
if (typeof(vars_obj.star_light_gif_name) != 'string') vars_obj.star_light_gif_name = 'star_light';
if (typeof(vars_obj.transparent_gif_name) != 'string') vars_obj.transparent_gif_name = 'transparent';
if (typeof(vars_obj.border_color) != 'string') vars_obj.border_color = 'red';
vars_obj.border_width = parseInt(vars_obj.border_width);
if (isNaN(vars_obj.border_width) || (vars_obj.border_width <=0) ) vars_obj.border_width = 5;
if (isNaN(vars_obj.rating_max) || (vars_obj.rating_max < 1) ) vars_obj.rating_max = 5;
if (isNaN(vars_obj.rating) || (vars_obj.rating<0) ) vars_obj.rating = 0;
else if (vars_obj.rating>vars_obj.rating_max) vars_obj.rating = vars_obj.rating_max;
vars_obj.star_width = parseInt(vars_obj.star_width);
if (isNaN(vars_obj.star_width) || (vars_obj.star_width<1) ) vars_obj.star_width = 15;
vars_obj.star_num = parseFloat(vars_obj.star_num);
if (isNaN(vars_obj.star_num) || (vars_obj.star_num < 1) ) vars_obj.star_num = 5;
vars_obj.star_height = parseInt(vars_obj.star_height);
if (isNaN(vars_obj.star_height) || (vars_obj.star_height <1 ) ) vars_obj.star_height = 14;
if ( (typeof(vars_obj.rating_input_name)!='string') || (!/^[a-z][a-z0-9]*$/gi.test(vars_obj.rating_input_name)) ) vars_obj.rating_input_name = 'pingfen';
if ( (typeof(vars_obj.call_func)!='string') || (!/^[a-z][a-z0-9]*$/gi.test(vars_obj.call_func)) ) vars_obj.call_func = '';
var width_100 = vars_obj.star_width*vars_obj.star_num;//100%宽度
var title = ' title="[' + get_c(vars_obj.rating/vars_obj.rating_max) + ']' + vars_obj.rating/vars_obj.rating_max + '%" /n';
var bar_htm = '<span /n' +
' call_func="' + vars_obj.call_func +'" /n' +
title +
' width_100= "' + width_100 + '" /n';
if (vars_obj.submit) bar_htm +=' οnmοusemοve="l_star_e_chang(this,event);" /n' +
' onClick="l_star_e_chang(this,event,true);" /n' +
' οnmοuseοut="d_star_e_out();" /n' +
' οnmοuseοver="d_star_e_in();" /n'
;//开关,是否加改变事件
bar_htm += ' style="' +
' display:block; /n' +
' position:relative; /n' +
' background:url(' + vars_obj.img_folder+vars_obj.star_dark_gif_name + '.gif) repeat-x ; /n' +
' border:solid ' + vars_obj.border_color + ' ; /n' +
' border-width:0 ' + vars_obj.border_width + 'px; /n' +
' text-align:left; /n' +
' height:' + vars_obj.star_height + 'px; /n' +
' overflow-y:hidden; /n' +
' padding:0px; /n' +
' margin:0px; /n' +
' width:' + width_100 + 'px; /n' +
' " > /n';
bar_htm +='<img src="' + vars_obj.img_folder+vars_obj.transparent_gif_name + '.gif" /n' + title ;
if (vars_obj.submit) bar_htm +=' οnmοuseοut="l_star_e_out();" /n' +
' οnmοuseοver="l_star_e_in();" /n'
;//开关,是否加改变事件
bar_htm += ' style="' +
' width:' + vars_obj.rating/vars_obj.rating_max*100 + '%; /n' +
' height:' + vars_obj.star_height + 'px; /n' +
' background:url(' + vars_obj.img_folder+vars_obj.star_light_gif_name + '.gif) repeat-x; /n' +
' margin:0px; /n' +
' " /> /n';
bar_htm +='<input type="hidden" /n' +
' id="'+vars_obj.rating_input_name+'" /n' +
' name="' +vars_obj.rating_input_name+'" /n' +
' value="'+vars_obj.rating+'" /n'+
' star_w_n = "' + vars_obj.rating/vars_obj.rating_max*width_100 + '" /n' +
' rating_max = "' + vars_obj.rating_max + '" /n' +
' /> /n';
bar_htm += '</span> /n';
document.writeln(bar_htm);
}
function l_star_e_chang(obj,event,rec)
{//移动此标时显示实时值:亮星实时宽度,评分实时(X%)
obj_copy = obj;
obj_copy.mouse_x = event.clientX;//此标在x面的位置
obj_copy.mouse_y = event.clientY;//此标在y面的位置
obj_copy.star = obj_copy.children[0];//亮星对象
obj_copy.input = obj_copy.children[1];//input对象
obj_copy.star_w = obj_copy.getAttribute('width_100');//亮星100%最大宽度
obj_copy.left = obj_copy.offsetLeft + parseInt(obj_copy.style.borderLeftWidth);//窗口内边到对象左边的值
obj_copy.star_w_n = obj_copy.mouse_x - obj_copy.left;//亮星新宽度=此标-星左边
if (obj_copy.star_w_n < 0) obj_copy.star_w_n = 0;
else if (obj_copy.star_w_n > obj_copy.star_w) obj_copy.star_w_n = obj_copy.star_w;
if (rec)
{
obj_copy.input.setAttribute('star_w_n',obj_copy.star_w_n);点击了要记录 亮星恢复时使用
var new_value = obj_copy.input.getAttribute('rating_max') * get_w_100() / 100;//亮星占比转化成具体分值
obj_copy.input.setAttribute('value',new_value);
eval（obj_copy.getAttribute('call_func') + '(' + new_value + ')');//亮星占比转化成具体分值
}
obj_copy.star.title = obj_copy.title = '[' + get_c() + ']' + get_w_100() + '%';//在input中显示新宽度%分比和级别,和在父对象中提示
obj_copy.star.style.width = obj_copy.star_w_n + 'px';//设置亮星新宽度
//document.title = '此标,星左边,新宽,父宽=' + obj_copy.mouse_x + ',' + obj_copy.left + ',' + obj_copy.star_w_n + ',' + obj_copy.star_w;//显示调试信息
}
function get_w_100(star_w_n,star_w)
{//新%分比,4去5入 = 亮星新宽度/ 亮星100%最大宽度
if ( ( (!star_w_n) || (!star_w) ) && (!obj_copy) ) return 0;//防错处理
return Math.round( (isNaN(star_w_n)?obj_copy.star_w_n:star_w_n) / (isNaN(star_w)?obj_copy.star_w:star_w) * 100);
}
function get_c(w_100)
{//评分分级,传入x%中的x,值范围0-100;空值默认使用动态移动的当前值,
if (isNaN(w_100)) w_100 = get_w_100();
if (w_100< 40) return '很差';
else if (w_100< 60) return '一般';
else if (w_100< 80) return '满意';
else if (w_100<= 100) return '很好';
else return '无法判断';
}
function reset_star()
{//只要处于区域内就不能重置
if (!obj_copy) return 0;
if ( obj_copy.star.getAttribute('in') != 'yes' )
{//发现移出区域了就还原上次点击状态
obj_copy.star.style.width = obj_copy.input.getAttribute('star_w_n') + 'px';//亮星恢复宽度
obj_copy.star.title = obj_copy.title = '[' +
get_c(get_w_100(obj_copy.input.getAttribute('star_w_n'))) + ']' +
get_w_100(obj_copy.input.getAttribute('star_w_n')) + '%';//input恢复说明
obj_copy = null;
}
}
function l_star_e_out()
{//移出亮星,通知重置事件不在亮星内了.
if (!obj_copy) return 0;
obj_copy.star.setAttribute('in','');
}
function l_star_e_in()
{//进入亮星,通知重置事件还处于区域内
clearTimeout(move_timer);
if (!obj_copy) return 0;
obj_copy.star.setAttribute('in','yes');
}
function d_star_e_out()
{//d_out移出区域或进入亮星时触发,检查是否要重置
clearTimeout(move_timer);
move_timer = setTimeout('reset_star();',16);
}
function d_star_e_in()
{//d_in清除重置事件
if (!obj_copy) return 0;
obj_copy.star.setAttribute('in','');
clearTimeout(move_timer);
}
pingfen.js 单纯实现评分效果,并提供评分输出接口
使用方法:
<script>
function setd(my)
{
alert(my);//my就是点击更改后的最新评分
}
show_start({'submit':1,'call_func':'setd'});
</script>//使用方法请看 function show_start(vars_obj)后面说明
var obj_copy = null;
var move_timer = null;
function show_start(vars_obj)
{//动态载入评分条面板
/*
调用方式
在调用前先载入本js文件:
<mce:script src="pingfen.js" mce_src="pingfen.js"></mce:script>
在需要显示的地方插入下面代码即可(注:可以不给某属性赋值,让程序使用默认值):
多句形式:
<mce:script type="text/javascript"><!--
//第一步,声明对象并给属性赋值
var vars_obj = {'属性名1':属性值,'属性名2':属性值,'img_folder':'http://www.xx.com/ddd/'};
或
var vars_obj = {};
vars_obj.img_folder = 'http://www.xx.com/ddd/';
//第二步
show_start(vars_obj);
// --></mce:script>
或写成一句的形式:
<mce:script type="text/javascript"><!--
show_start({'属性名1':属性值,'属性名2':属性值,'img_folder':'http://www.xx.com/ddd/'});
// --></mce:script>
调用方式说明结束
vars_obj:js对象,此对象声明方法 var vars_obj = {};
vars_obj对象拥有属性和值说明:
img_folder:图片文件夹路径字符串,注意结束时字符串最后必须是/,默认是本js文件夹;
用到三个图片:transparent.gif(img对象的透明图片);star_dark.gif(暗星);star_light.gif(亮星)
star_dark_gif_name:暗星gif文件名(注意:不用写.gif,只需要写文件名即可)字符串,默认是star_dark
star_light_gif_name:亮星gif文件名(注意:不用写.gif,只需要写文件名即可)字符串,默认是star_light
transparent_gif_name:img对象src(亮img)gif文件名(注意:不用写.gif,只需要写文件名即可)字符串,默认是transparent
border_color:暗星左右边border颜色;表示色彩的字符串值;默认白色
border_width:暗星左右边border宽度;大于0数字;单位px;默认5
submit:是否用于提交,是时可以更改值;1|0整数值;默认0
rating_max:100%时分数是多少,1或以上数字(支持小数),默认是5;
rating:评分初始值,数字,0到rating_max间,超过只保留终值(0或rating_max);默认是0;
star_width:单个星图片宽度;1或以上整数;单位是px;默认是15
star_num:100%值时星个数,1或以上数字(支持带小数),默认是5
star_height:单个星图片的高度;1或以上整数;单位是px,默认是14
call_func:点击改变值时调用函数hander,并传入改变后的值,所以函数中可以接受一个参数,默认是空;
满分的宽度 = 星个数*星宽度;
下面html代码必须值:
父宽(方式不限);
父左边框宽度(内联css);
父对象:position:relative(让左边的值相对body);
*/
if (!vars_obj) vars_obj = {};
if (typeof(vars_obj.img_folder) != 'string') vars_obj.img_folder = '';
if (typeof(vars_obj.star_dark_gif_name) != 'string') vars_obj.star_dark_gif_name = 'star_dark';
if (typeof(vars_obj.star_light_gif_name) != 'string') vars_obj.star_light_gif_name = 'star_light';
if (typeof(vars_obj.transparent_gif_name) != 'string') vars_obj.transparent_gif_name = 'transparent';
if (typeof(vars_obj.border_color) != 'string') vars_obj.border_color = 'red';
vars_obj.border_width = parseInt(vars_obj.border_width);
if (isNaN(vars_obj.border_width) || (vars_obj.border_width <=0) ) vars_obj.border_width = 5;
if (isNaN(vars_obj.rating_max) || (vars_obj.rating_max < 1) ) vars_obj.rating_max = 5;
if (isNaN(vars_obj.rating) || (vars_obj.rating<0) ) vars_obj.rating = 0;
else if (vars_obj.rating>vars_obj.rating_max) vars_obj.rating = vars_obj.rating_max;
vars_obj.star_width = parseInt(vars_obj.star_width);
if (isNaN(vars_obj.star_width) || (vars_obj.star_width<1) ) vars_obj.star_width = 15;
vars_obj.star_num = parseFloat(vars_obj.star_num);
if (isNaN(vars_obj.star_num) || (vars_obj.star_num < 1) ) vars_obj.star_num = 5;
vars_obj.star_height = parseInt(vars_obj.star_height);
if (isNaN(vars_obj.star_height) || (vars_obj.star_height <1 ) ) vars_obj.star_height = 14;
if ( (typeof(vars_obj.call_func)!='string') || (!/^[a-z][a-z_0-9]*$/gi.test(vars_obj.call_func)) ) vars_obj.call_func = '';
var width_100 = vars_obj.star_width*vars_obj.star_num;//100%宽度
var title = ' title="[' + get_c(vars_obj.rating/vars_obj.rating_max) + ']' + vars_obj.rating/vars_obj.rating_max + '%" /n';
var bar_htm = '<span /n' +
title +
' call_func="' + vars_obj.call_func +'" /n' +
' star_width_click = "' + vars_obj.rating/vars_obj.rating_max*width_100 + '" /n' +
' rating_max = "' + vars_obj.rating_max + '" /n' +
' width_100= "' + width_100 + '" /n';
if (vars_obj.submit) bar_htm +=' οnmοusemοve="l_star_e_chang(this,event);" /n' +
' onClick="l_star_e_chang(this,event,true);" /n' +
' οnmοuseοut="d_star_e_out();" /n' +
' οnmοuseοver="d_star_e_in();" /n'
;//开关,是否加改变事件
bar_htm += ' style="' +
' display:block; /n' +
' position:relative; /n' +
' background:url(/'' + vars_obj.img_folder+vars_obj.star_dark_gif_name + '.gif/') repeat-x ; /n' +
' border:solid ' + vars_obj.border_color + ' ; /n' +
' border-width:0 ' + vars_obj.border_width + 'px; /n' +
' text-align:left; /n' +
' height:' + vars_obj.star_height + 'px; /n' +
' overflow-y:hidden; /n' +
' padding:0px; /n' +
' margin:0px; /n' +
' width:' + width_100 + 'px; /n' +
' " mce_style="' +
' display:block; /n' +
' position:relative; /n' +
' background:url(/'' + vars_obj.img_folder+vars_obj.star_dark_gif_name + '.gif/') repeat-x ; /n' +
' border:solid ' + vars_obj.border_color + ' ; /n' +
' border-width:0 ' + vars_obj.border_width + 'px; /n' +
' text-align:left; /n' +
' height:' + vars_obj.star_height + 'px; /n' +
' overflow-y:hidden; /n' +
' padding:0px; /n' +
' margin:0px; /n' +
' width:' + width_100 + 'px; /n' +
' " > /n';
bar_htm +='<img src="' + vars_obj.img_folder+vars_obj.transparent_gif_name + '.gif" mce_src="' + vars_obj.img_folder+vars_obj.transparent_gif_name + '.gif" /n' + title;
if (vars_obj.submit) bar_htm +=' οnmοuseοut="l_star_e_out();" /n' +
' οnmοuseοver="l_star_e_in();" /n'
;//开关,是否加改变事件
bar_htm += ' style="' +
' width:' + vars_obj.rating/vars_obj.rating_max*100 + '%; /n' +
' height:' + vars_obj.star_height + 'px; /n' +
' background:url(/'' + vars_obj.img_folder+vars_obj.star_light_gif_name + '.gif/') repeat-x; /n' +
' margin:0px; /n' +
' " mce_style="' +
' width:' + vars_obj.rating/vars_obj.rating_max*100 + '%; /n' +
' height:' + vars_obj.star_height + 'px; /n' +
' background:url(/'' + vars_obj.img_folder+vars_obj.star_light_gif_name + '.gif/') repeat-x; /n' +
' margin:0px; /n' +
' " /> /n';
bar_htm += '</span> /n';
document.writeln(bar_htm);
eval（vars_obj.call_func + '(' + vars_obj.rating + ')');//初始化默认值
}
function l_star_e_chang(obj,event,rec)
{//移动此标时显示实时值:亮星实时宽度,评分实时(X%)
obj_copy = obj;
obj_copy.mouse_x = event.clientX;//此标在x面的位置
obj_copy.mouse_y = event.clientY;//此标在y面的位置
obj_copy.star = obj_copy.children[0];//亮星对象
obj_copy.star_width_max = obj_copy.getAttribute('width_100');//亮星100%最大宽度
obj_copy.left = obj_copy.offsetLeft + parseInt(obj_copy.style.borderLeftWidth);//窗口内边到对象左边的值
obj_copy.star_width_move = obj_copy.mouse_x - obj_copy.left;//亮星新宽度=此标-星左边
if (obj_copy.star_width_move < 0) obj_copy.star_width_move = 0;
else if (obj_copy.star_width_move > obj_copy.star_width_max) obj_copy.star_width_move = obj_copy.star_width_max;
if (rec)
{
obj_copy.setAttribute('star_width_click',obj_copy.star_width_move);点击了要记录 亮星恢复时使用
var new_value = obj_copy.getAttribute('rating_max') * get_w_100() / 100;//亮星占比转化成具体分值
eval（obj_copy.getAttribute('call_func') + '(' + new_value + ')');//亮星占比转化成具体分值
}
obj_copy.star.title = obj_copy.title = '[' + get_c() + ']' + get_w_100() + '%';//显示新宽度%分比和级别,在父对象中提示
obj_copy.star.style.width = obj_copy.star_width_move + 'px';//设置亮星新宽度
//document.title = '此标,星左边,新宽,父宽=' + obj_copy.mouse_x + ',' + obj_copy.left + ',' + obj_copy.star_width_move + ',' + obj_copy.star_width_max;//显示调试信息
}
function get_w_100(star_width_move,star_width_max)
{//新%分比,4去5入 = 亮星新宽度/ 亮星100%最大宽度
if ( ( (!star_width_move) || (!star_width_max) ) && (!obj_copy) ) return 0;//防错处理
return Math.round( (isNaN(star_width_move)?obj_copy.star_width_move:star_width_move) / (isNaN(star_width_max)?obj_copy.star_width_max:star_width_max) * 100);
}
function get_c(w_100)
{//评分分级,传入x%中的x,值范围0-100;空值默认使用动态移动的当前值,
if (isNaN(w_100)) w_100 = get_w_100();
if (w_100< 40) return '很差';
else if (w_100< 60) return '一般';
else if (w_100< 80) return '满意';
else if (w_100<= 100) return '很好';
else return '无法判断';
}
function reset_star()
{//只要处于区域内就不能重置
if (!obj_copy) return 0;
if ( obj_copy.star.getAttribute('in') != 'yes' )
{//发现移出区域了就还原上次点击状态
obj_copy.star.style.width = obj_copy.getAttribute('star_width_click') + 'px';//亮星恢复宽度
obj_copy.star.title = obj_copy.title = '[' +
get_c(get_w_100(obj_copy.getAttribute('star_width_click'))) + ']' +
get_w_100(obj_copy.getAttribute('star_width_click')) + '%';//恢复说明
obj_copy = null;
}
}
function l_star_e_out()
{//移出亮星,通知重置事件不在亮星内了.
if (!obj_copy) return 0;
obj_copy.star.setAttribute('in','');
}
function l_star_e_in()
{//进入亮星,通知重置事件还处于区域内
clearTimeout(move_timer);
if (!obj_copy) return 0;
obj_copy.star.setAttribute('in','yes');
}
function d_star_e_out()
{//d_out移出区域或进入亮星时触发,检查是否要重置
clearTimeout(move_timer);
move_timer = setTimeout('reset_star();',16);
}
function d_star_e_in()
{//d_in清除重置事件
if (!obj_copy) return 0;
obj_copy.star.setAttribute('in','');
clearTimeout(move_timer);
}
效果
功能:
些标在二个块之间时移动时实时显示亮星宽度和评级;不点移出后就恢复最后那次点击数据;点击就重新记录当前数据;
