开发者社区> 技术小胖子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

制作在线简历(四)——工作经历

简介:
+关注继续查看

一、结构

倒序显示经历,第一行是时间与公司,第二行是行业,第三行是工作内容,这里也是用了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





    本文转自 咖啡机(K.F.J)   博客园博客,原文链接:http://www.cnblogs.com/strick/p/4593404.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
制作在线简历(三)——技能介绍
结构还是很朴素的,星星是在font-awsome选的一符号,整个结构又是用一张table表格来搭的,选了两种底色作为顶部和左边的底色。
21 0
零编码制作报表真地可能吗?
很多报表工具都把零编码作为宣传口号,这是真的吗,真的能减少到零吗,真有那么神吗?
27 0
进入编译器后,一个函数经历了什么?
进入编译器后,一个函数经历了什么?
17 0
在线直播系统源码,围绕缓存做了哪些工作?
在线直播系统源码,围绕缓存做了哪些工作?
30 0
在线编译
地址:http://ideone.com/
567 0
老虎机的制作
用UIPickerView制作一个老虎机的效果 ViewController.h: #import @interface DXWViewController :UIViewController @property (retain,nonatomi...
751 0
21114
文章
0
问答
文章排行榜
最热
最新