项目预览演示地址:http://www.imf7.com/code/star/
支持初始值显示;
支持一个页面多次引用;
每个投票模块可以任意安排投票项目,不限个数;
支持form向后台提交数据。
首先在页面中引入JS部分;
然后编写相应的HTML代码[下面代码结构中有讲HTML的要求];
然后引用效果:starGrade(“grade”, “gradeInput”);
上面这个引用中包含两个变量,第一个变量”grade”代表包含星星显示的节点ID,第二个变量”gradeInput”代表包含隐藏表单的节点ID.
HTML方面必须包含两个节点:星星显示节点、隐藏表单节点,这两个项目数量是相互对应的,顺序也不能错。
例如:
<input type="hidden" name="jiage" value="1" />
<input type="hidden" name="fuwu" value="2" />
<input type="hidden" name="zhuanye" value="3" />
<input type="hidden" name="xingjiabi" value="4" />
</div>
<div class="grade" id="grade">
<dl><dt>价格:</dt><dd><span>星</span><span>星</span><span>星</span><span>星</span><span>星</span></dd></dl>
<dl><dt>服务:</dt><dd><span>星</span><span>星</span><span>星</span><span>星</span><span>星</span></dd></dl>
<dl><dt>专业:</dt><dd><span>星</span><span>星</span><span>星</span><span>星</span><span>星</span></dd></dl>
<dl><dt>性价比:</dt><dd><span>星</span><span>星</span><span>星</span><span>星</span><span>星</span></dd></dl>
</div>
以上代码包含2个ID,这两个结构时必须的,CSS样子自己定义,将模块放在那里都可以,但隐藏表单和提交表单必须在同一个FORM中。
其中隐藏input的name值根据程序需求随意命名
/*
Editor:f7
Date:2010.08
*/
// 星星打分效果开始
function starGrade(starElem, inputElem){
var starElem = document.getElementById(starElem);
var inputElem = document.getElementById(inputElem);
var starItem = starElem.getElementsByTagName("dd");
var input = inputElem.getElementsByTagName("input");
//alert(input[0].value)
// 注册星星滑过点击事件
for(var i=0; i<starItem.length; i++){
(function(i){
var star = starItem[i].getElementsByTagName("span");
for(var j=0; j<star.length; j++){
(function(j){
star[j].onmouseover = function(){ show(star, j) };
star[j].onmouseout = function(){ hide(star, i) };
star[j].onclick = function(){ lock(i, j) };
})(j);
}
})(i);
// 设置星星的初始值
hide(starItem[i].getElementsByTagName("span"), i);
}
// 滑过操作
function show(o, k){
// o 单个项目的星星节点数组
// k 是第几个星星
for(var i=0; i<o.length; i++){
o[i].className = "";
if(i<=k)o[i].className = "show";
}
};
// 离开操作
function hide(o, x){
// o 单个项目的星星节点数组
// x 第几组投票
for(var i=0; i<o.length; i++){
o[i].className = "";
if(i<input[x].value)o[i].className = "show";
};
}
// 点击操作
function lock(x, k){
// x 第机组投票
// k 是第几个星星
input[x].value = k+1;
}
}
项目预览演示地址:http://www.imf7.com/code/star/