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

最新推荐文章于 2024-04-25 08:37:10 发布

「已注销」

最新推荐文章于 2024-04-25 08:37:10 发布

阅读量5.8k

点赞数 1

分类专栏： Web开发文章标签： jquery web app html5 css3 开发模式

本文链接：https://blog.csdn.net/Lovejulyer/article/details/51901455

版权

Web开发专栏收录该内容

50 篇文章 1 订阅

订阅专栏

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

项目JS类开发

静态页思路验证

jQuery全屏滚动插件fullPage.js

使用参考：Fullpage入门指南

组件切换，入场，出场动画

这里写图片描述

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

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

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+'">');

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>

/* 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;
}

「已注销」

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
慕课网实战—《用组件方式开发 Web App全站》笔记二

运用HTML5、CSS3、JS流行技术，采用组件式开发模式，开发Web App全站！技术大牛带你统统拿下不同类型的HTML5动态数据报告！《用组件方式开发 Web App全站》
复制链接

扫一扫