码迷,mamicode.com
首页 > Web开发 > 详细

html5学习(1)

时间:2015-11-16 22:49:08      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:

1.aside标签用于展示文章相关的附加内容,它是放置有关链接,术语表或者引文的最佳场所。

2.使用<meter>元素实现进度条。

<meter id="pledge_goal" value="2000" min="0" max="4000" title="usd"></meter>

并不是所有浏览器都能兼容<meter>标签;

第一步:检测浏览器是否支持<meter>标签,创建一个<meter>标签并检测其max属性,判断是否能检测该属性,如果检测不出,则说明浏览器不支持<meter>标签。

var noMeterSupport = function(){
  return(document.creatElement(‘meter‘).max === undefined);
}

第二步,jquery创建元素;

if(noMeterSupport){
        var fakeMeter,fill,label,labelText,max,meter,value;
        meter = $("#pledge_goal");
        value = meter.attr("value");
        max = meter.attr("max");
        labelText = "$"+meter.val();
        fakeMeter = $("<div></div>");
        fakeMeter.addClass("meter");
        lable = $("<span>"+labelText+"</span>");
        label.addClass("label");

        fill = $("<div></div>");
        fill.addClass("fill");
        fill.css("width",(value/max*100)+"%");
        fill.append("<div style=‘clear:both;‘><br></div>");
        fakeMeter.append(fill);
        fakeMeter.append(label);
        meter.replacewith(fakeMeter);
    }
.meter{border:1px solid #000;display:block;position:relative;width:500px;}
.fill{background-color:#693;}
.label{position:absolute;right:0;top:0;z-index:1111;}

  


 3.<progress>标签类似于<meter>标签,但它用来呈现动态进度。

html5学习(1)

标签:

原文地址:http://www.cnblogs.com/qianrong/p/4970238.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!