当前位置主页 > 资料库 > 前端教程 > 使用HTML5“meter”元素

使用HTML5“meter”元素

2015-05-08

前面我们介绍了HTML5的<progress>元素HTML5<progress>元素和<meter>元素经常会被混淆。但他们是不同的元素,在页面中的使用方式也是不同的。

<meter>元素用于表示一个标量测量值或一个百分比值。和<progress>元素不一样,<meter>元素的最小值和最大值在私用前必须要知道,如果为指定,它们会被假设为0和1。

<meter>元素当前不能够在IE浏览器和Mobile Safari浏览器中使用。

使用meter元素

为了介绍这个元素,我们来举一个监控选举投票的例子。假设总共有27个席位,获得14个席位为多数赞成方,获得18个以上席位的为绝大多数赞成方。

假设使用<meter>元素来表示这次选举投票,每一个被选举方都可以使用一个<meter>元素来表示:

红方 <meter id="bogdanovists" value="7" min="0" 
         max="27"> </meter>                              
                            

在大多数浏览器中,<meter>元素的外观和<progress>非常相似,但它不能动画。

红方

要使<meter>元素有效需要设置一个value属性。另外还可以为它添加更多的属性。optimum属性代表”优先“或”最佳“值。在上面的例子中,可以设置获取14个席位时为optimum。

红方 <meter id="bogdanovists" value="7" min="0" 
         optimum="14" max="27"> </meter>                              
                            

high属性用于表示绝对多数,low属性用于表示极少数。

红方 <meter id="bogdanovists" value="7" min="0" optimum="14" 
         low="2" high="18" max="27"> </meter>
                            

optimum属性值不一定需要大于low值或小于high值。浏览器会自动根据optimumhighlow属性的值来渲染指示条的外观。例如:

红方 <meter id="bogdanovists" value="19" min="0" 
         low="2" optimum="14" high="18" max="27"> </meter>
                            

上面的代码得到下面的结果:

红方

<meter>元素也可以像<progress>元素一样使用CSS来自定义外观,但是方法要复杂得多,我们将在以后的文章中介绍这方面的内容。

可读性

因为<meter>元素在当前的浏览器支持上海有所欠缺,而往往它显示的又是一些重要的数据。所以在每一个设备上都可以正常读到这些信息是非常重要的。一个简单的实现方法是在<meter>的开标签和闭标签之间放置文本提示信息。

红方 <meter id="bogdanovists" value="1" min="0" low="2" optimum="14" 
         high="18" max="27">19 seats</meter>
                            

得到的结果如下:

红方 19 seats

这种做法有一点像图片的alt属性,在无法显示<meter>元素的浏览中会显示这些文字。如果使用屏幕阅读设备,也会阅读这些文字。

在不支持<meter>元素的浏览器上,你还可以使用一个js插件来达到<meter>元素的效果,如:HTML5-Progress-polyfillmeter-polyfill等插件。

小结

<meter>元素和<progress>元素在外观上比较相像,但是它们的用法各不相同,要认真区别。

Previous:
上一篇:使用HTML5“progress”元素
Next:
下一篇:【恒创科技】5月主机促销(1年1次),主机优惠25%,免费抽奖
返回顶部