繁体   English   中英

jquery星级垂直

[英]jquery star rating vertical

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

当你刷新页面时,它们很好 - 这真的很奇怪。 请看这里的页面。

任何建议将不胜感激!

谢谢

编辑: 解压缩的JS可以在这里找到

编辑:该死的,经过几次重装后,这样做也是如此。 好吧,这意味着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>

5星评级使用PHP和JQuery的系统用于以最佳用户交互方式对任何网页上的不同产品或服务进行评级。 用户可以在不重页的情况下对1-5星级的内容进行评分。 我们只是举一个扫描1-5的例子,否则通过配置JQuery规模可以改变。 在这个例子中,我们使用了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
});

评分为$('。stars')的星数.raty({start:2});

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

默认取消按钮

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

显示半星

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

用户还可以通过使用onclick事件获取所选星星的值并在数据库中保持价值。 Saty Stars用户友好,几乎所有浏览器都支持(Firefox,谷歌Chrome,Safari,Ipad,Iphone,Android手机等)。 www.spjoshis.blogspot.com

在你的测试页面上使用firebug,我摆脱了漂浮在这里,它工作正常。

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

在onload触发后你执行javascript吗?

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

通过使用不同的脚本来解决这个问题:

http://orkans-tmp.22web.net/star_rating/

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM