基于SVG的星级分级控制

分享于 

11分钟阅读

Web开发

  繁體

介绍

星级分级控制在当今的网站中非常普遍和普遍。 在诸如 amazon.com,。甚至这样的网站上,用户可以在Netflix上找到一个项目,比如,你现在阅读的一篇文章,一篇文章。 你想知道他们怎么工作? 大部分都是基于图片精灵和一些css魔术。 在你喜爱的搜索引擎里搜索一下,看看我的意思。 我认为现在应该移到使用SVG而不是图像子画面的控件上了。 目前最常用的浏览器对SVG有完全支持。 如果浏览器没有- 为什么还在使用它? 基于SVG的控件有哪些优点? 基于SVG的控件可以高度配置,我将在本文中介绍。 你想要 5颗星星还是 10星? 你希望星星是否有颜色的yellow 或者红色? 我将在这里描述的SVG控件允许你轻松地配置这些设置并自定义控件到你的需求。

背景

读者对 JavaScript。HTML和可能的SVG有一些基本的熟悉是很好的。 我已经在IE9和 Chrome 上测试过这些例子。

使用代码

让我们直接进入,下载 star_rating_demo.zip 并解压缩它- 你应该会看到解压文件夹中的四个文件: ,star_rating.js,,,demo3.html。

控件的所有代码都位于一个文件 star_rating.js 中。 我将演示如何通过 3个示例来使用控件。

示例 #1 demo.html

这里示例的全部代码位于文件 demo.html 中,并在下面复制:

<!doctypehtml><html><head></head><body><divid="my_widget"class="rating_widget"number_of_stars="5"initial_value="0"default_color="#ccc"initial_value_color="#ff0"final_value_color="#f00"captions="Poor, Didn't like it, OK, Good, Excellent!"onclick="clickHandler"></div><scriptsrc="star_rating.js"></script><script>function clickHandler(sender, args)
 {
 alert('your rating: ' + args);
 } </script></body></html>

由于技术限制,在本文中不可能显示工作示例。 取而代之的是屏幕截图。 要查看工作示例,只需在页面导航到

在网页浏览器中查看 demo.html的屏幕截图:

要查看完整的工作示例以及它可以做什么,请在浏览器中打开 demo.html。 你会发现 5颗星色的灰色( 在上面的代码中查找 default_color="#ccc" )。 如果鼠标在星星上,他们将会改变颜色到红色( 在上面的代码中查找 final_value_color="#f00" ),也会看到相应的文本显示( 糟糕,不喜欢,好的,好的,好的)。 如果单击,控件将冻结,并且 clickHandler 函数将被调用。 分级被作为 args 参数传递给函数。 查找在div上应用的class="rating_widget" - 这就是使控件显示为 inside的原因。

示例 #2 demo2.html:

在这个例子中,我们希望从一个具有 10个星的控件开始,并且初始值为 7. 另外,我将演示另一种创建控件的方法( 这次在javascript中,而不是示例 #1) 中的标记)

<!doctypehtml><html><head></head><body><scriptsrc="star_rating.js"></script><script>var widget = new rating_widget(
 {
 number_of_stars: 10, // the total number of stars in the control initial_value: 7, // initial rating default_color: 'rgb(200,200,200)', // the grey stars  initial_value_color: 'rgb(255,255,0)', // the yellow stars final_value_color: 'rgb(255,0,0)', // the red stars captions: '1,2,3,4,5,6,7,8,9,10', // text to display to provide feedback to user  parentNode: document.body, // parent node of the control onclick: function(sender, args) // function to execute on mouse click { 
 alert('your rating: ' + args);
 }
 }); </script></body></html>

在网页浏览器中查看 demo2.html的屏幕截图:

通过将输入参数值更改为 rating_widget的构造函数,可以将控件配置为你的需求。

示例 #3 演示 3。html:

在这个 final 示例中,我们将显示一个 static 控件- 一个不允许用户更改评级:

<!doctypehtml><html><head></head><body><divid="my_widget"class="rating_widget"number_of_stars="5"initial_value="3.5"default_color="#ccc"initial_value_color="#ff0"final_value_color="#f00"disabled="true"></div><scriptsrc="star_rating.js"></script></body></html>

在网页浏览器中查看 demo3.html的屏幕截图:

设置 disabled="true" 将禁止用户更改控件的分级。

使用指导

现在让我们了解控件的内部工作原理。 让我们从这个代码 inside star_rating.js 开始

document.body.onload = function()
{
 var array = document.getElementsByClassName('rating_widget');
 for(var i = 0; i <array.length; i++)
 {
 var e = array[i];
 var widget = new rating_widget(
 {
 number_of_stars: e.getAttribute('number_of_stars')? e.getAttribute('number_of_stars') : 5,
 initial_value: e.getAttribute('initial_value')? e.getAttribute('initial_value') : 0,
 default_color: parseColor(e.getAttribute('default_color'), 'rgb(200,200,200)'),
 initial_value_color: parseColor(e.getAttribute('initial_value_color'), 'rgb(255,255,0)'),
 final_value_color: parseColor(e.getAttribute('final_value_color'), 'rgb(255,0,0)'),
 captions: e.getAttribute('captions'),
 captions_class_name: e.getAttribute('captions_class_name'),
 onclick: e.getAttribute('onclick'),
 disabled: e.getAttribute('disabled'),
 parentNode: e
 });
 }
};

当加载html文档的body 时,将执行 上面 函数。 我们获得了应用类 rating_widget的html文档中的所有元素,并将它们存储到变量 array 中。 然后我们迭代这些元素,并为每个元素创建一个星级分级控制。 除非在定义控件中的星数的元素上有属性 number_of_stars,否则恒星数默认为 5. initial_value 是你要应用到控件的初始分级。 对于从未评级过但非零的项目,这将为 0,以反映项目过去的分级。 控件交互以了解 default_colorinitial_value_colorfinal_value_color的含义。 captions 是对应于不同分级的字符串的array。 你可以通过使用CSS样式化标题,并在变量 captions_class_name 中传递CSS类名称来控制标题的外观。 onclick 定义当用户单击控件时要调用的函数。 如果将 disabled 设置为 true,则在它失去交互性和冻结的意义下禁用控件。 如果用户想让用户在未登录的情况下更改分级,但不希望允许用户更改分级,则这里选项非常有用。 控件的父节点通过 parentNode: e 指定。

让我们深入研究 rating_widget 函数。 有趣的部分是以下代码 inside rating_widget:

for(var i = 0; i <n; i++)
{
 var star = document.createElementNS(svgns, "path");
 star.setAttributeNS(null, "d", coordinates);
 star.setAttributeNS(null, "transform", transform(0.3947432, 0, 0, 0.414816, 20*i, 1.159472));
 star.setAttributeNS(null, "style", style);
 svg_root.appendChild(star);
 var box = bbox(star);
 if (!disabled)
 {
 if (box) { attachEventHandlers(box, boxes); }
 else { attachEventHandlers(star, stars); }
 }
 stars.push(star);
 boxes.push(box);
}
initial_state();

n 是我们要显示的星星数。 绘制星形的SVG路径存储在变量 coordinates 中。 为了绘制多个星,我们再次使用相同的coordinates,但是应用一个翻译。 20*i 是翻译的x 组成部分,是关键的部分。 线条粗细,它的样式- 无论是否实心,虚线 等等 都在变量 style 中定义。 函数 bbox 计算星形的边界框。 如果计算成功,我们将鼠标事件处理程序附加到星形的边界框,否则我们将处理程序附加到星星本身。 有关更详细的信息,请参见 鼠标事件处理程序为控件提供了交互功能。 函数 initial_state 将控件初始化为在构造函数中传递的initial_value

单步执行调试器中的代码,了解并了解它的工作原理。

结束语

在本文中,我描述了一个使用SVG代替图像精灵和CSS的星级分级控件。 控件是高度可以配置的,星星的数量。颜色和标题文本可以很容易地改变。 控件可以嵌入HTML标记( 例如 #1, 和 #3),,也可以在JavaScript中动态实例化),例如 #2). 我希望它对一些。

历史记录

  • 4/20/2012 - 初始帖子。

BASE  STA  控制  SVG  评价  
相关文章