码迷,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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!