制作在线简历（四）——工作经历

一、结构

倒序显示经历，第一行是时间与公司，第二行是行业，第三行是工作内容，这里也是用了flex布局，图表是用个canvas画布画出来的。下图是大屏幕下的显示方式：

移动端的显示如下：

<article class="user_experience">
                    <div class="left">
                        <h5>2014/5--2014/9：大肥羊学校</h5>
                        <h6>所属行业：金融/投资/证券</h6>
                        <div class="introduce">懒羊羊是喜羊羊与灰太狼里的正面人物，关于懒羊羊的介绍： 英文名：Lazy Sheep 小名：</div>
                    </div>
                    <div class="right">
                        <canvas id="piechart1"></canvas>
                    </div>
</article>

 

二、图表

图表我用了一个插件，叫chat.js，这是一个HTML5插件，不依赖任何库。

刚在调这个插件的时候碰到了个错误，如下图显示：

调到后面才发现原来是因为canvas画布的父级菜单有个样式是display:none导致的。

<canvas id="piechart1"></canvas>

后面就只能在显示页面的时候加个回调函数。

if(row != 3) return;这是为了防止点击另外三个选项卡的时候出现上面那个错误

if(pies.length <= index)的作用是在第二次点击项目选项卡的时候不用再初始化了，做了个简单的缓存

var pies = [];
var piedatas = set_pie_datas();
var pieids = ['piechart1', 'piechart2'];
$('#nav').delegate('a', 'click', function() {
        $(this).addClass('cur').siblings().removeClass('cur');
        var row = $(this).index();
        $('#menu').children().hide().eq(row).show().css('opacity', 0).animate({opacity:'1'}, 1000, 'linear', function() {
            if(row != 3) return;
            
            $.each(pieids, function(index, item) {
                if(pies.length <= index) {
                    var pie = draw_pie(piedatas[index], item);
                    pies.push(pie);
                }
            });
});
//画图表
function draw_pie(pieData, id) {
    var piechart = document.getElementById(id).getContext("2d");
    return new Chart(piechart).Pie(pieData);
}
//配置图表信息
function set_pie_datas() {
    var piedatas = [ 
        [
            {
                value: 300,
                color:"#F7464A",
                highlight: "#FF5A5E",
                label: "HTML/CSS"
            },
            {
                value: 50,
                color: "#46BFBD",
                highlight: "#5AD3D1",
                label: "HTML5/CSS3"
            },
            {
                value: 100,
                color: "#FDB45C",
                highlight: "#FFC870",
                label: "JavaScript"
            },
            {
                value: 40,
                color: "#949FB1",
                highlight: "#A8B3C5",
                label: "PHP"
            },
            {
                value: 120,
                color: "#4D5360",
                highlight: "#616774",
                label: "MySQL"
            }
        ],
        [
            {
                value: 100,
                color:"#F7464A",
                highlight: "#FF5A5E",
                label: "HTML/CSS"
            },
            {
                value: 80,
                color: "#46BFBD",
                highlight: "#5AD3D1",
                label: "HTML5/CSS3"
            },
            {
                value: 30,
                color: "#FDB45C",
                highlight: "#FFC870",
                label: "JavaScript"
            }
        ]
    ];
    return piedatas;
}

 

这里再推荐一个测试页面加载信息的网站，挺实用的

http://www.webpagetest.org/

 

 

源码下载：

http://download.csdn.net/detail/loneleaf1/8849069