运用HTML5、CSS3、JS流行技术，采用组件式开发模式，开发Web App全站！技术大牛带你统统拿下不同类型的HTML5动态数据报告！
项目JS类开发
静态页思路验证
jQuery全屏滚动插件fullPage.js
??使用参考：Fullpage入门指南
组件切换，入场，出场动画
????
DOM事件循环传播-无限循环
??使用return false;或者triggerHander()方法阻止事件向上传播。
相关代码
- HTML
<body>
<div id="h5">
<div class="page section" id="page-1">
<div class="component log">log</div>
<div class="component slogan">slogan</div>
</div>
<div class="page section" id="page-2">
<div class="component desc">desc</div>
</div>
<div class="page section" id="page-3">
<div class="component bar">bar</div>
</div>
</div>
</body>- JavaScript
<!-- 用于验证fullPage。js切换页面，以及内容组织结构可用，组件能够进行动画 -->
<script type="text/javascript" src="../js/lib/jquery.js"></script>
<script type="text/javascript" src="../js/lib/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/lib/jquery.fullPage.js"></script>
<script type="text/javascript">
$(function(){
$(‘#h5‘).fullpage({
‘sectionsColor‘ : [‘#254875‘,‘#00FF00‘,‘#254587‘,‘#695684‘],
onLeave:function(index,nextIndex,direction){
// debugger; 测试
$(‘#h5‘).find(‘.page‘).eq(index-1).trigger(‘onLeave‘);
},
afterLoad:function(anchorLink,index){
// debugger; 测试
$(‘#h5‘).find(‘.page‘).eq(index-1).trigger(‘onLoad‘);
},
});
$(‘.page‘).on(‘onLeave‘,function(){
console.log( $(this).attr(‘id‘),‘==>>‘,‘onLeave‘ );
$(this).find(‘.component‘).trigger(‘onLeave‘);
})
$(‘.page‘).on(‘onLoad‘,function(){
console.log( $(this).attr(‘id‘),‘==>>‘,‘onLoad‘ );
$(this).find(‘.component‘).trigger(‘onLoad‘);
})
$(‘.component‘).on(‘onLoad‘,function(){
$(this).fadeIn();
return false; // 阻止事件向上传播
})
$(‘.component‘).on(‘onLeave‘,function(){
$(this).fadeOut();
return false; // 阻止事件向上传播
})
});
</script>JS对象规划
内容组织类：H5
??作用：
- 组织H5报告的内容结构
- 设置H5报告的切换效果（fullpage.js），当页面切换时，通知页内所有的组件。
??方法；
- 添加一个页 addPage
- 添加一个组件 addCompoent
- 展现所以页面 Loader
图文组件类（H5CompoentBase）
??作用：输出一个DOM，内容可以是图片或者文字
??事件：
- 当前页载入：onLoad
- 当前页移出：onLeave
图片组件类（H5Compoent？？？）
??作用一：在H5ComponentBase的基础之上插入DOM结构或CANVAS图形
??事件：
- 当前页载入移除：onLoad，onLeave
- 图表组件本身的生长动画
项目JS类总结
??
通用图文组件类-H5ComponentBase(开发准备)
- 基本图文组件（图文设置）
- 接受onLoad,onLeave事件
- 开发方法：独立模块开发
// 设置随机唯一的ID
var id = ( ‘h5_c_‘+Math.random() ).replace(‘.‘,‘_‘);
// 把当前的组件类型添加到样式中进行标记
var cls = name+‘ h5_component_‘+cfg.type;
var component = $(‘<div class="h5_component ‘+cls+‘ h5_component_name_‘+name+‘" id="‘+id+‘">‘);相关代码
- HTML
<body>
<!-- 用于开发测试 H5ComponentBase 对象（基本的图文组件） -->
<div class="iphone">
</div>
<script type="text/javascript">
var cfg = {
type : ‘base‘,
bg : ‘./p1_people.png‘,
width : 514,
height : 306,
css:{
bottom:0,
opacity:0,
},
animateIn:{ bottom:80,opacity:1},
animateOut:{ bottom:0,opacity:0 },
center:true,
}
var h5 = new H5ComponentBase(‘myName‘,cfg);
$(‘.iphone‘).append(h5);
var leave = true;
$(‘body‘).click(function(){
leave = !leave;
$(‘.h5_component‘).trigger( leave ? ‘onLeave‘ : ‘onLoad‘);
});
</script>
</body>- CSS
/* 基本图文组件样式 */
.h5_component{
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
}- JavaScript
/* 基本图文组件对象 */
var H5ComponentBase = function( name,cfg ){
var cfg = cfg || {};
// 设置随机唯一的ID
var id = ( ‘h5_c_‘+Math.random() ).replace(‘.‘,‘_‘);
// 把当前的组件类型添加到样式中进行标记
var cls = name+‘ h5_component_‘+cfg.type;
var component = $(‘<div class="h5_component ‘+cls+‘ h5_component_name_‘+name+‘" id="‘+id+‘">‘);
cfg.text && component.text(cfg.text);
cfg.width && component.width(cfg.width/2);
cfg.height && component.height(cfg.height/2);
cfg.css && component.css(cfg.css);
cfg.bg && component.css(‘backgroundImage‘,‘url(‘+cfg.bg+‘)‘);
if( cfg.center === true){
component.css({
marginLeft : ( cfg.width/4 * -1 ) + ‘px‘,
left:‘50%‘,
})
// ...很多自定义的参数
}
component.on(‘onLoad‘,function(){
component.addClass(cls+‘_load‘).removeClass(cls+‘_leave‘);
cfg.animateIn && component.animate( cfg.animateIn );
return false;
})
component.on(‘onLeave‘,function(){
component.addClass(cls+‘_leave‘).removeClass(cls+‘_load‘);
cfg.animateOut && component.animate( cfg.animateOut );
return false;
})
return component;
}CSS样式规则
通用图表组件
- 内容组织，添加页面，添加组件
- 整合fullpage.js支持页面切换
- 链式调用
相关代码
- HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />
<title>IT学习网2015课程学习情况</title>
<!-- 基本资源库 -->
<script type="text/javascript" src="../js/lib/jquery.js"></script>
<script type="text/javascript" src="../js/lib/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/lib/jquery.fullpage.js"></script>
<!-- H5对象资源&管理内容：页-组件 -->
<script type="text/javascript" src="../js/H5.js"></script>
<link rel="stylesheet" type="text/css" href="../css/H5.css">
<script type="text/javascript" src="../js/H5ComponentBase.js"></script>
<link rel="stylesheet" type="text/css" href="../css/H5ComponentBase.css">
<style type="text/css">
</style>
</head>
<body>
<!-- 测试内容组织功能，以及fullPage页面切换&组件切换 -->
<!-- 内容组织管理，有可能会加载若干个资源 -->
<script type="text/javascript">
$(function () {
var h5 = new H5();
h5
.addPage(‘face‘)
.addComponent(‘logo‘,{
text:‘logo‘,
width:‘400‘,
height:‘100‘,
css:{backgroundColor:‘red‘,top:200,opacity:0},
center:true,
animateIn: {opacity:1},
animateOut: {opacity:0}
})
.addComponent(‘slogan‘,{
text:‘slogan‘,
width:‘400‘,
height:‘100‘,
css:{backgroundColor:‘green‘,top:300,opacity:0},
center:true,
animateIn: {opacity:1},
animateOut: {opacity:0}
})
.addPage(‘desc‘)
.addComponent(‘caption‘,{
text:‘核心理念‘,
width:‘400‘,
height:‘100‘,
css:{backgroundColor:‘blue‘,top:300,opacity:0},
center:true,
animateIn: {opacity:1},
animateOut: {opacity:0}
})
.addPage(‘page-3‘)
.addComponent(‘caption‘,{
text:‘课程方向分布‘,
width:‘400‘,
height:‘100‘,
css:{backgroundColor:‘yellow‘,top:300,opacity:0},
center:true,
animateIn: {opacity:1},
animateOut: {opacity:0}
})
.loader(); // 添加若干图片资源
})
</script>
</body>
</html>- CSS
/* H5对象的全局样式 */
.h5{
height: 100%;
}
.h5_page{
position: relative;
height: 100%;
width: 100%;
background-color: #ddd;
background-size: 100%;
background-repeat: no-repeat;
text-align: center;
}- JavaScript
/* 内容管理对象 */
var H5 = function () {
this.id = (‘h5_‘+Math.random()).replace(‘.‘,‘_‘);
this.el = $(‘<div class="h5" id="‘+this.id+‘">‘).hide();
this.page = [];
$(‘body‘).append( this.el );
/**
* 新增一个页
* @param {string} name 组件的名称，会加入到ClassName中
* @param {string} text 页内的默认文本
* @return {H5} [description] H5对象，可以重复使用H5对象支持的方法
*/
this.addPage = function( name,text ){
var page = $(‘<div class="h5_page section">‘);
if( name != undefined ){
page.addClass(‘h5_page_‘+name);
}
if( text != undefined ){
page.text(text);
}
this.el.append( page );
this.page.push( page );
return this;
}
/*新增一个组件*/
this.addComponent = function( name, cfg ){
var cfg = cfg || {};
cfg = $.extend({
type : ‘base‘
},cfg);
var component; // 定义一个变量，存储组件元素
var page = this.page.slice(-1)[0];
switch( cfg.type ){
case ‘base‘:
component = new H5ComponentBase(name,cfg);
break;
default:
}
page.append( component );
return this;
}
/*H5对象初始化呈现*/
this.loader = function(){
this.el.fullpage({
onLeave:function(index,nextIndex,direction){
// debugger; 测试
$(this).find(‘.h5_component‘).trigger(‘onLeave‘);
},
afterLoad:function(anchorLink,index){
// debugger; 测试
$(this).find(‘.h5_component‘).trigger(‘onLoad‘);
}
});
this.page[0].find(‘.h5_component‘).trigger(‘onLoad‘);
this.el.show();
}
return this;
}时间： 2024-10-23 12:48:14