《用组件方式开发 Web App全站 》笔记二
运用HTML5、CSS3、JS流行技术，采用组件式开发模式，开发Web App全站！技术大牛带你统统拿下不同类型的HTML5动态数据报告！
项目JS类开发
静态页思路验证
组件切换，入场，出场动画
DOM事件循环传播-无限循环
使用return false;或者triggerHander()方法阻止事件向上传播。
相关代码
HTMLlogslogan desc bar JavaScript
<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){
// window; 测试
$('#h5').find('.page').eq(index-1).trigger('onLeave');
},
afterLoad:function(anchorLink,index){
// window; 测试
$('#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 = $('');
相关代码
HTML<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>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 = $('');
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
<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对象的全局样式 */
.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 = $('').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 = $('');
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){
// window; 测试
$(this).find('.h5_component').trigger('onLeave');
},
afterLoad:function(anchorLink,index){
// window; 测试
$(this).find('.h5_component').trigger('onLoad');
}
});
this.page[0].find('.h5_component').trigger('onLoad');
this.el.show();
}
return this;
}
相关文章
图文推荐
-
Spring工具组件去掉控制台颜色设置的方法
-
11岁的大巴重新出发，Blogbus新版上线
-
爱的是我还是那像她的眼睛
-
如何解决双网卡bond0绑定模式物理成员口的mac地址和bonding接口mac地址不一致的问题
- 文章
- 推荐
- 热门新闻