用组件方式开发 Web App全站之通用图文组件类-H5ComponentBase（接受 onLoad、onLeave事件）-优快云博客

本文链接：https://blog.youkuaiyun.com/laike1355/article/details/51536666

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

    <title>慕课网2015课程学习情况</title>

    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            background-color: #000;
            font-size: 12px;
        }

        .iphone{
            width: 340px;
            height: 540px;
            background-color: #fff;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -270px 0 0 -170px;
        }
    </style>

    <script type="text/javascript" src="../js/lib/jquery.js"></script>
    <script type="text/javascript" src="../js/H5ComponentBase.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/H5ComponentBase.css">

    <body>
        <!-- 用于开发测试 H5ComponentBase 对象（基本的图文组件） -->
        <div class="iphone">

        </div>

        <script type="text/javascript">
          var cfg ={
            type:'base',
            text:'text',
            width:514,
            height:306,
            bg:'../imgs/p1_people.png',
            css:{
                left:50,
                top:50,
                opacity:0
            },
            center:true,
            animateIn:{
                top:50,
                opacity:1
            },
            animateOut:{
                top:150,
                opacity:0
            }
          }
          var h5  = new H5ComponentBase('myname',cfg);
          $('.iphone').append(h5);
        </script>

    </body>

</html>

H5Components.js

/* 基本图文组件对象 */

var H5ComponentBase = function(name,cfg){
    var cfg = cfg || {};
    var id = ('h5_c_'+Math.random()).replace('.','_');
    var cls = 'h5_component_'+cfg.type+' h5_component_name_'+name;
    var component = $('<div class="h5_component '+cls+'" id="'+id+'"/>');
    cfg.text && component.text(cfg.text);
    cfg.width && component.width(cfg.width/2);
    cfg.height && component.height(cfg.height/2);
    cfg.bg && component.css('backgroundImage','url('+cfg.bg+')');
    cfg.css && component.css(cfg.css);
    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);
    });
    component.on('onLeave',function(){
        component.addClass(cls+'_leave').removeClass(cls+"_load");
        cfg.animateOut && component.animate(cfg.animateOut);
    });

    return component;
}

H5Component.css

/* 基本图文组件样式 */
.h5_component{
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
}