zoukankan      html  css  js  c++  java
  • html5学习(1)

    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;500px;}
    .fill{background-color:#693;}
    .label{position:absolute;right:0;top:0;z-index:1111;}
    
    
    

      

    
    

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

  • 相关阅读:
    Android home键和back键区别
    装饰器模式
    对象的序列化
    构建器问题
    finnally的一些用法
    LinkedList ArrayList测试2
    LinkedList ArrayList测试
    meizu调试遇到 的问题
    java和c#通过esb服务互调用组件
    .NET平台常用的框架整理
  • 原文地址:https://www.cnblogs.com/qianrong/p/4970238.html
Copyright © 2011-2022 走看看