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

作者:弋江区易采办公设备经营部  发布时间:2017-09-07 13:28:29
《用组件方式开发 Web App全站 》笔记二

运用HTML5、CSS3、JS流行技术,采用组件式开发模式,开发Web App全站!技术大牛带你统统拿下不同类型的HTML5动态数据报告!

项目JS类开发 静态页思路验证 组件切换,入场,出场动画

这里写图片描述

DOM事件循环传播-无限循环

使用return false;或者triggerHander()方法阻止事件向上传播。

相关代码 HTML

log slogan 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){ // 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 = $(''); 相关代码 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支持页面切换

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:宜昌网站建设 http://yichang.45qun.com

  • 上一篇:ASP.NET MVC 过滤器(三)
  • 下一篇:最后一页
  •