码迷，mamicode.com
首页 > 移动开发 > 详细

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

时间：2016-07-14 07:13:41      阅读：300      评论：0      收藏：0      [点我收藏+]

标签：

运用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;
}

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

标签：

原文地址：http://blog.csdn.net/lovejulyer/article/details/51901455
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！