您的位置：首页 > 移动开发

慕课网实战—《用组件方式开发 Web App全站 》笔记二

2016-07-14 02:49 453 查看
运用HTML5、CSS3、JS流行技术，采用组件式开发模式，开发Web App全站！技术大牛带你统统拿下不同类型的HTML5动态数据报告！

《用组件方式开发 Web App全站 》

项目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;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航