与jQuery的星级控制

钥匙要点

• >本文提供了有关如何使用jQuery构建交互式星级窗口小部件的详细指南。它涉及创建一个被星图替换的广播按钮组，用户可以与之进行交互以提供评级。
>
• 星级评级系统设计为可访问键盘，并允许半明星评分。这是通过使用CSS Sprite图像并操纵背景位置属性来显示恒星的不同状态来实现的。
• >评级系统旨在通过将量表限制在四星星而不是五个恒星中来鼓励用户参与度和周到的评级选择，从而消除了中间选项。它还允许半明星的评分以提高精度。
>
• >系统使用jQuery处理用户交互，包括悬停和单击星星。单击恒星时，更新了相应的单选按钮值，并且突出显示了恒星和所有前面的星星。该系统还实现了错误处理以管理潜在问题。

>我们新发行的书《 jQuery：新手吗？作为品尝者，这是Craig Sharkie向我们展示如何使用JQuery构建一个强大，精致的星级窗口小部件的摘录。它是可访问的，并且可以进行半明星的评分。

如果您以前从未使用过jQuery，请获取免费的pdf样品PDF并加快第2章的介绍。第7章（第7章，从中获取本文，也将在下载中都包含在此文章中，因此，如果您宁愿在线绘制这段文章，请在本文中读取库，以便您可以在线绘制量表，以便您可以欣赏库来欣赏> 星级评级控制

我们的客户希望增加用户参与度，并帮助他的用户感到重要。我们已经考虑了一下，并向他抛弃了一个明星的评级主意 - 所有人都喜欢通过分配金星来表达自己的感受。我们闪亮的新控制将如图1所示，“星级评级控制”。

图1.星级额定控制

>我们的星级评级控制的基础是一个无线电按钮组；这是完美的，因为浏览器会从组中执行单个选择。您可以选择要选择的范围，只需添加正确的按钮数：<div > <label><input name="rating" type="radio" value="1"/>1 Star</label> <label><input name="rating" type="radio" value="2"/>2 Stars</label> <label><input name="rating" type="radio" value="3"/>3 Stars</label> <label><input name="rating" type="radio" value="4"/>4 Stars</label> ⋮</div>
对于星星，我们将依靠CSS Sprites。 This way our control will only be reliant on a single image (shown in Figure 2, “Star CSS sprite image”), which saves on HTTP requests and makes it easier for our graphic designers to edit.

Figure 2. Star CSS sprite image

Our CSS will apply the CSS sprite image to the links we create that represent half-stars.要在不同的图像状态之间移动，我们只需要更新背景位置属性：
示例2.章节_07/11_star_ratings/stars.css（efcerpt）

>

.stars div a {  background: transparent url(sprite_rate.png) 0 0 no-repeat;  display: inline-block;  height: 23px;  width: 12px;  text-indent: -999em;  overflow: hidden;}.stars a.rating-right {  background-position: 0 -23px;  padding-right: 6px;}.stars a.rating-over { background-position: 0 -46px; }.stars a.rating-over.rating-right { background-position: 0 -69px; }.stars a.rating { background-position: 0 -92px; }.stars a.rating.rating-right { background-position: 0 -115px; }

>我们决定使用户选择四个星星的额定值，而不是四星级。为什么？用户心理学！为一个人提供一条中间道路，他们会接受；通过没有中间，我们使用户对他们的选择有更多的思考。我们取得了更好的结果，并且我们将能够更好地向用户提供最佳内容（由他们选择）！

，但是四个是有限的规模，这就是为什么我们希望获得半明星评分的原因。这是通过光学幻觉实现的 - 您可能注意到我们的恒星图像被切成两半。我们的HTML将包含八个无线电按钮，每个按钮都值得半星。 代码有两个部分将我们的八个无线电按钮转换为四星星。首先，creatsestars功能将带有一个带有无线电按钮的容器，并将其替换为星链接。 然后，每个恒星都会为适当的事件处理程序（在附加器方法中）补充，以使用户与控件进行交互。这是我们星级对象的骨架：

示例3。chapter_07/11_star_ratings/script.js（excerpt）

var starRating = {  create: function(selector) {    $(selector).each(function() {      // Hide radio buttons and add star links    });  },  addHandlers: function(item) {    $(item).click(function(e) {      // Handle star click    })    .hover(function() {      // Handle star hover over    },function() {      // Handle star hover out    });  }}

>> >创建方法通过每个容器通过我们通过的链接匹配的每个容器，并创建链接的列表，并创建prots a proce a proce a proce the Protexy的链接。这些链接是我们将看起来像星星的样式。它还将隐藏原始表单元素，因此用户只看到我们可爱的星星：示例4.章节_07/11_star_ratings/script.js（efcerpt）>

<div >  <label><input  name="rating" type="radio" value="1"/>1 Star</label>  <label><input  name="rating" type="radio" value="2"/>2 Stars</label>  <label><input  name="rating" type="radio" value="3"/>3 Stars</label>  <label><input  name="rating" type="radio" value="4"/>4 Stars</label>  ⋮</div>

我们首先创建一个新链接的容器（DIV元素）;我们将为要替换的每个广播按钮创建一个新链接。在使用：无线电选择器过滤器中选择所有无线电按钮之后，我们将每个项目的评分进行使用，并使用它来创建超链接元素。

注意：用于AddClass操作的Modulus

条件分配，我们正在使用基于数学的ternary operator进行条件指定类名称。正如我们在书中之前所做的那样，我们正在使用模量（％）操作员来确定索引是偶数还是奇怪。如果索引很奇怪，我们将添加评级权类；这使得链接看起来像星星的右侧。

>

一旦我们的链接准备就绪，我们将其传递给Addhandlers方法 - 这是我们将附加工作所需的事件的地方。然后，我们将其附加到列表容器中。在容器中后，我们查看是否选择了当前的广播按钮（我们使用：检查表单过滤器）。如果已进行了检查，我们希望将评分课程添加到此半明星和之前的所有半明星中。将分配与所附评级类的任何链接，都将分配金星映像（这将使用户能够看到当前的评分）。

选择我们需要旋转黄金的所有元素，我们将获得一些新的jQuery操作的帮助：provall and selff。 PROVALL操作在当前选择之前选择 （与Prev Action不同，仅选择前一个同级）。就我们的示例而言，我们希望将类添加到上一个兄弟姐妹和当前选择中。为此，我们应用和自行的动作，该操作仅包括当前选择中的原始选择。现在，我们拥有所有将是黄金的链接，因此我们可以添加类。提示：其他遍历方法您可能已经猜到，与Profall一起，JQuery为我们提供了一种NextAll方法，该方法抓住了在同一容器中发生的所有元素。 jQuery 1.4还引入了两种新的伴侣方法：provuntil和nextuntil。这些被选中调用，并将扫描元素的兄弟姐妹（前向或向后，具体取决于您使用的一个），直到它们击中与选择器相匹配的元素。

，例如，例如$（'h2：first'）。nextununtil（'h2'）; 将为您提供坐在页面上的第一个H2和同一容器元素中的以下H2之间的所有元素。>如果将第二个参数传递给Provuntil或NextUntil，则将用作选择器来过滤返回的元素。因此，例如，如果我们写了Nextuntil（'H2'，'div'），则只会返回我们当前选择和下一个H2之间的div元素。。

完成所有这些艰苦的工作后，我们现在可以添加到控件的新链接列表，并摆脱原始按钮。现在，用户将仅与星星进行交互：

示例5。chapter_07/11_star_ratings/script.js（摘录）

<div >  <label><input  name="rating" type="radio" value="1"/>1 Star</label>  <label><input  name="rating" type="radio" value="2"/>2 Stars</label>  <label><input  name="rating" type="radio" value="3"/>3 Stars</label>  <label><input  name="rating" type="radio" value="4"/>4 Stars</label>  ⋮</div>

>该控件看起来像现在正在形状，但是它还没有任何作用。我们需要附加一些活动处理程序并添加一些行为。 我们对三个活动感兴趣。当用户悬停在星星上时，我们想更新CSS Sprite以显示悬停状态；当他们离开时，我们想将CSS精灵恢复到其原始状态。 and when they click, we want to make the selection gold:

.stars div a {  background: transparent url(sprite_rate.png) 0 0 no-repeat;  display: inline-block;  height: 23px;  width: 12px;  text-indent: -999em;  overflow: hidden;}.stars a.rating-right {  background-position: 0 -23px;  padding-right: 6px;}.stars a.rating-over { background-position: 0 -46px; }.stars a.rating-over.rating-right { background-position: 0 -69px; }.stars a.rating { background-position: 0 -92px; }.stars a.rating.rating-right { background-position: 0 -115px; }

Example 6. chapter_07/11_star_ratings/script.js (excerpt)

The hover function is the easiest: when hovering over, we select all of the half-stars before—including the current half-star—and give them the rating-over class using prevAll and andSelf, just like we did in设置。徘徊时，我们覆盖基地，并从所有链接中删除评分级别。 这是悬停的。我们通过使用以下方式选择正确的广播按钮来做到这一点，该按钮可以搜索其值与当前链接的文本相匹配的无线电按钮。

随着模型更新，我们可以返回与CSS Sprites一起返回。首先，我们从当前具有该链接的任何链接中清除评级类，然后将其添加到用户选择的链接上的所有链接中。最后的触摸是取消链接的默认操作，因此单击“星星”不会导致其发射位置的变化。请记住要获取免费的样本PDF，其中包含此示例以及价值150页的更多出色学习材料。如果您已经卖出了

经常询问有关jQuery Star评级的问题（常见问题解答）

var starRating = {  create: function(selector) {    $(selector).each(function() {      // Hide radio buttons and add star links    });  },  addHandlers: function(item) {    $(item).click(function(e) {      // Handle star click    })    .hover(function() {      // Handle star hover over    },function() {      // Handle star hover out    });  }}

>如何自定义恒星等级的外观？

>可以通过修改CSS来自定义恒星等级的外观。您可以更改星星的颜色，大小和间距。例如，要更改颜色，您可以在CSS中使用“颜色”属性。要更改尺寸，您可以调整“字体大小”属性。请记住针对CSS中星级评级的特定类别以应用这些更改。

>我可以在jQuery Star评分中使用半明星评分吗？这可以通过将“一半”选项设置为初始化恒星评级时实现。这允许更精确的评分，使用户能够使用半星级对等级进行评分。

>

>如何保存用户的评分？

>

可以保存用户的评分，您可以使用AJAX将评分值发送到服务器端脚本。然后，该脚本可以将评分存储在数据库中。加载页面时，脚本可以检索存储的额定值并显示它。

>

>如何显示平均额定值？

>显示平均额定值可以通过计算所有存储的额定值的平均值，然后将星级额定值设置为平均值来完成。这可以使用服务器端脚本来完成，该脚本从数据库中检索所有评分，计算平均值，然后将此平均值发送回客户端脚本。

>

>我可以禁用星级评分吗？如果您想显示评级，但不希望用户能够更改它，这可能很有用。为了禁用星级评分，您可以在初始化星级评分时将“ ReadOnly”选项设置为true。

>

>我如何使用不同的星图标？

您可以通过更改“ staroff”和“ staroff”和“ staron”选项来使用“ staroff”和“ staron”选项。这些选项接受您要使用的图标的名称。这些图标应该是您项目中包含的字体图标集的一部分。

我可以使用jQuery Star等级而无需jQuery？

jQuery Star等级是一个jQuery插件，因此它需要jQuery才能运行。如果您想在没有jQuery的情况下使用星级评级，则需要找到其他解决方案，例如纯JavaScript星级评级库。

我如何重置星星等级？

您可以通过将其值设置为0来重置恒星评级。可以使用“等级”的“等级”方法来完成star ratis ratis rating ratis rating rating ratis rating rating rating rating ratis。例如，如果您的星级评分实例存储在名为“评分”的变量中，则可以使用“评分（0）”将其重置。星级评级可以链接到形式中隐藏的输入字段。当用户提交表单时，恒星等级的值将包含在表单数据中。

>

>如何处理jQuery Star等级中的错误？

>

处理jQuery Star等级中的错误可以使用“错误”事件完成。当星级额定值中存在错误时，例如设置无效的值时，会触发此事件。您可以收听此事件，然后以适合您的应用程序的方式处理错误。

>

以上是与jQuery的星级控制的详细内容。更多信息请关注PHP中文网其他相关文章！