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

来源：互联网发布：成都发展知乎编辑：程序博客网时间：2024/06/05 11:42

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

0 0