最近特别喜欢Bootstrap,不仅仅因为他的简洁和漂亮,更因为他的可扩展和自定义组合效果让我着迷。
今天正好在研究iframe loading,发现bootstrap process bar的样式非常适合做loading载入的样式。

先看看演示效果:点此查看

现在来讲讲过程,其实很简单。首先先定义HTML结构

loading-Frame为Loading所在整个区域,将用于覆盖在IFrame之上,形成遮罩效果。
layout-left为左侧导航用于点击将内容显示在iframe内中。
layout-right用于存放iframe容器。
并且这几个Div用绝对定位比较合适。
所以我们定义如下样式:

#layout-left, #layout-right,#loading-frame,#loading-wrap {position: absolute;}
#layout-left{left: 0;width: 190px;z-index: 9;background-color: #ECF7FE;}
#layout-left a {font-size: 12px; font-family: "微软雅黑"}
#layout-right, #loading-frame {left: 197px;right: 0;z-index: 10; background: #FFF}
#loading-frame {background: #000; z-index: 11;}
#loading-wrap {width: 300px; left: 50%; top:40%; margin-left: -150px;}

定义样式要注意到 #loading-frame比#loading-wrap的z-index要高。
接下来就是制作loading动画效果:

var layout_left_width=190;
window.onresize = function() {
    var widths = document.body.scrollWidth-layout_left_width;
    var heights = document.documentElement.clientHeight-38;
    $("#content, #loading-frame").height(heights+25).width(widths-10);
    var heights = document.documentElement.clientHeight-38;
    $("#layout-left").height(heights+25);
}
window.onresize();

//上面此段用于保存各个区域的宽高能100%,也保证loading-frame和content的区域一样宽高。

//设置透明度遮罩层,该层大小和IFrame一样,用于遮在IFrame上,并隐藏掉。
$("#loading-frame").css('opacity', .8).hide();

var interval = 0;
//当用户点击左侧导航上的链接的时候开始出现loading效果
function loading_start() {
    if (interval) {
        clearInterval(interval);
    }
    $("#loading-frame .bar").css('width', 0);
    $("#loading-frame").show();
    var percent = 0;
    interval = setInterval(function(){
        percent += 10;
        if (percent == 100) {
            percent = 99;
        }
        if (percent < 100) {
            $("#loading-frame .bar").animate({'width': percent + '%'},'slow');
        }
    }, 300);
}

//当iframe已经完全载入后,隐藏loading-frame
function loading_complete() {
    $("#loading-frame .bar").animate({'width':'100%'},'fast');
    clearInterval(interval);
    setTimeout(function() {
        $("#loading-frame").fadeOut("slow");
    }, 200) 
}

给左侧的链接绑定上事件。
$("#left-nav a").bind('click', function(){
    $("#content").attr('src', $(this).attr("href"));
    loading_start();
    var iframe = document.getElementById("content");  
    if (iframe.attachEvent) {  
        iframe.attachEvent("onload", function() {  
            loading_complete();
        });  
    } else {  
        iframe.onload = function() {  
            loading_complete();
        };  
    }
    return false;
});

效果图如下:

在敏捷回顾会议中引导使用ORID

头一次接触ORID方法在2015年的一次敏捷回顾上,但是还不知道它,当天围坐在小会议室中通过该方法总结迭代开发经验,使我很有收获。ORID工作法很好理解,几乎一听就会,只是日常工作中我们总会选择更偷懒的方法,而忽略了总结过程中思考和逻辑的重要性。根据百度百科,ORID是一种...… Continue reading

生产环境Linux部署

Published on July 12, 2017

SVN 迁移到 GitLab

Published on June 17, 2017