2010-07-01 77 views
7

我正在使用fyneworks的jquery star rating插件。问题是,大约5%的时间(和初始页面加载),星星垂直堆叠,而不是水平!?jquery star rating vertical

刷新页面时,它们很好 - 这很奇怪。 Please see the page here.

任何建议将不胜感激!

感谢

编辑:The unpacked JS can be found here

+0

尝试切换CSS的加载顺序和js – jigfox 2010-07-01 16:27:25

+0

我试过“推迟”的CSS和JS都,但无济于事:( – Tim 2010-07-01 16:34:09

+3

与插件工作开车送我疯了。这似乎已被黑客入侵就像8个不同的人一样,你知道我真正讨厌的是什么?''//}; //保存一个字节!'严重的是,去掉大括号来'保存一个字节'然后留下一个评论? – JAL 2010-07-01 17:40:46

回答

0

您的测试页上使用Firebug,我来到这里摆脱了浮动的,它工作得很好。

div.rating-cancel, div.star-rating { 
background:none repeat scroll 0 0 transparent; 
cursor:pointer; 
display:block; 
/* float:left !important; */ 
} 
+0

刚刚尝试过我自己,星星现在垂直一半:\我使用Chrome - 但解决方案显然需要在所有浏览器中工作... – Tim 2010-07-01 16:29:57

0

你是否在onload火灾后执行javascript?

$(document).ready(function() { 
//execute JS here 
}); 
+0

是的,对于这个插件包含在主文件中(参见上面的编辑),而不是在页面上。 – Tim 2010-07-01 16:50:44

1

编辑:该死,这几个重新加载后也是这样。那么,这意味着JavaScript片段 - 和/或内置的JavaScript引擎 - 失败。尝试另一个明星插件,这看起来过度... 13K的大小:O。通过使用从这里,而不是不同的脚本

<!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=utf-8" /> 
<title>Untitled Document</title> 
<script src='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.js' type="text/javascript"></script> 
<script src='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.js' type="text/javascript" language="javascript"></script> 
<script src='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.MetaData.js' type="text/javascript" language="javascript"></script> 
<link href='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.css' type="text/css" rel="stylesheet"/> 
</head> 

<body> 

<div class="Clear"> 
<input name="star1" type="radio" class="star {split:2}" value="0.5/5"/> 
<input name="star1" type="radio" class="star {split:2}" value="1/5"/> 
<input name="star1" type="radio" class="star {split:2}" value="1.5/5"/> 
<input name="star1" type="radio" class="star {split:2}" value="2/5"/> 
<input name="star1" type="radio" class="star {split:2}" value="2.5/5"/> 
<input name="star1" type="radio" class="star {split:2}" value="3/5" checked="checked"/> 
<input name="star1" type="radio" class="star {split:2}" value="3.5/5"/> 
<input name="star1" type="radio" class="star {split:2}" value="4/5"/> 
<input name="star1" type="radio" class="star {split:2}" value="4.5/5"/> 
<input name="star1" type="radio" class="star {split:2}" value="5/5"/> 
</div> 
<button class="rate" type="submit" title="Submit your rating">Rate!</button> 

</body> 
</html> 
0

5星级

在这里,你走了,重做整个事情,这对我的作品使用PHP和JQuery的系统用于以最佳用户交互方式对任何网页上的不同产品或服务进行评级。用户可以按1-5星的比例对内容进行评分,无需重新加载页面。我们只是以扫描1-5为例,否则通过配置JQuery scale可以改变。 在这个例子中,我们使用了Raty.JS插件来交互式的星星。

STEP-1 创建简单的HTML文件,如下图所示

<!DOCTYPE html> 
<html lang="en" dir="ltr"> 
<head> 
<script type="text/javascript"> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://testweb3.iecworld.com/jsdemo/js/lq_js_point/js/jquery.raty.min.js"></script> 
    // Initialise Plugin 
    $(document).ready(function(){ 
      $('.stars').raty({ 
         score: function() { 
          return $(this).attr('data-score'); 
         } 
      }); 
    }); 
</script> 
</head> 
<body> 
<b>Star Rating Demo</b> 
<div class=”stars”></div> 
</body> 
</html> 

就是这样。我们的明星看起来像 星级输出

首先,我们创建了一个简单的HTML文档,并包含Jquery和Raty JS。

下面的代码用于初始化Raty的星级评分功能。 。

$(document).ready(function(){ 
       $('.stars').raty({ 
            score: function() { 
            return $(this).attr('data-score'); 
            } 
}); 
    }); 

星评级,只读值星的评分 $

$('.stars').raty({ 
       readOnly: true 
}); 

号(”星)RATY({ 开始:2 });

Onclick功能 $('。stars')。raty({} {onClick:function(score){alert('Your Score:'+ score);} });

默认取消按钮

$('.stars').raty({ 
showCancel: true 
}); 

显示半颗

$('.stars').raty({ 
showHalf: true 
}); 

用户还可以得到选择明星的价值,并通过使用onclick事件维护数据库值。 Saty Stars是用户友好的,几乎所有浏览器(Firefox,Google Chrome,Safari,Ipad,Iphone,Android Phone等)都支持。 www.spjoshis.blogspot.com