位置：首页>> 网络编程>> JavaScript>> 仿淘宝星级评分效果（2）

仿淘宝星级评分效果（2）

作者：yunsudong　来源：51js　发布时间：2010-09-03 18:37:00　

标签：评分,淘宝

基本上注释里已经写的很清楚了！我没什么可说的了！欢迎大家继续改进！！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>仿淘宝星级评分效果 www.aspxhome.com</title><meta name="description" content="" /><meta name="keywords" content="" /><meta name="owner" content="" /><meta name="robots" content="index, follow" /><meta name="googlebot" content="index, follow" /><style type="text/css"></style></head> <body><div class="shop-rating"><span class="title">物流公司的服务：</span><ul class="rating-level" id="stars1"><li><a class="one-star" star:value="100" href="#">100</a></li><li><a class="two-stars" star:value="200" href="#">200</a></li><li><a class="three-stars" star:value="300" href="#">300</a></li><li><a class="four-stars" star:value="400" href="#">400</a></li><li><a class="five-stars" star:value="500" href="#">500</a></li></ul><span class="result" id="stars1-tips"></span><input type="hidden" id="stars1-input" name="a" value="" size="2" /></div><div class="shop-rating"><span class="title">物流公司的服务：</span><ul class="rating-level" id="stars2"><li><a class="one-star" star:value="1" href="#">1</a></li><li><a class="two-stars" star:value="2" href="#">2</a></li><li><a class="three-stars" star:value="3" href="#">3</a></li><li><a class="four-stars" star:value="4" href="#">4</a></li><li><a class="five-stars" star:value="5" href="#">5</a></li></ul><span class="result" id="stars2-tips"></span><input type="hidden" id="stars2-input" name="b" value="" size="2" /></div><input type="button" value="test" onclick="teststars()" /><script type="text/javascript">var Class = {create: function() {return function() { this.initialize.apply(this, arguments); }}}var Extend = function(destination, source) {for (var property in source) {destination[property] = source[property];}}function stopDefault( e ) { if ( e && e.preventDefault ){e.preventDefault();}else{window.event.returnValue = false;}return false;} /** * 星星打分组件 * * @authorYunsd * @date2010-7-5 */var Stars = Class.create();Stars.prototype = {initialize: function(star,options) {this.SetOptions(options); //默认属性var flag = 999; //定义全局指针var isIE = (document.all) ? true : false; //IE?var starlist = document.getElementById(star).getElementsByTagName('a'); //星星列表var input = document.getElementById(this.options.Input) || document.getElementById(star+"-input"); // 输出结果var tips = document.getElementById(this.options.Tips) || document.getElementById(star+"-tips"); // 打印提示var nowClass = " " + this.options.nowClass; // 定义选中星星样式名var tipsTxt = this.options.tipsTxt; // 定义提示文案var len = starlist.length; //星星数量for(i=0;i<len;i++){ // 绑定事件点击鼠标滑过starlist[i].value = i;starlist[i].onclick = function(e){stopDefault(e);this.className = this.className + nowClass;flag = this.value;input.value = this.getAttribute("star:value");tips.innerHTML = tipsTxt[this.value]}starlist[i].onmouseover = function(){if (flag< 999){var reg = RegExp(nowClass,"g");starlist[flag].className = starlist[flag].className.replace(reg,"")}}starlist[i].onmouseout = function(){if (flag< 999){starlist[flag].className = starlist[flag].className + nowClass;}}};if (isIE){ //FIX IE下样式错误var li = document.getElementById(star).getElementsByTagName('li');for (var i = 0, len = li.length; i < len; i++) {var c = li[i];if (c) {c.className = c.getElementsByTagName('a')[0].className;}}}},//设置默认属性SetOptions: function(options) {this.options = {//默认值Input:"",//设置触保存分数的INPUTTips:"",//设置提示文案容器nowClass:"current-rating",//选中的样式名tipsTxt:["1分-严重不合格","2分-不合格","3分-合格","4分-优秀","5分-完美"]//提示文案};Extend(this.options, options || {});}}/* For TEST */function teststars(){alert(document.getElementById("stars1-input").value + "|" + document.getElementById("stars2-input").value)}var Stars1 = new Stars("stars1",{nowClass:"current-rating",tipsTxt:["100分-严重不合格","200分-不合格","300分-合格","400分-优秀","500分-完美"]})var Stars2 = new Stars("stars2")</script> </body></html>

第一页上一页 1

投稿

仿淘宝星级评分效果（2）

猜你喜欢