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

原创 2016年05月30日 11:26:38

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;
}
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

React Native es6继承(Component例子)

很多用React Native的同学都是前端工程师,在传统的Js没有继承的概念。但是在react Native所支持的es6是有继承的,今天牛刀小试一下,原来效果也是不错的,分享给大家。   首先定...
  • arjick
  • arjick
  • 2016-06-19 16:16
  • 4601

组件方式开发 Web App全站-5-开发基本图文组件H5ComponentBase

这里先引申下什么叫做组件式开发? 组件式开发=(高内聚性和低耦合性),js封装,分而治之、重复利用。 H5ComponentBase - 基本图文组件(图,文设置) - 接受onLoad,...

组件方式开发 Web App全站-5-开发H5对象

1. 内容组织:添加页面,添加组件 2. 整合fullPage.js页面切换 3. 链式调用 jQuery对象,对一个Dom数组进行封装,提供一系列对Dom数据的操作,大部分的操作可以返回jQ...

组件方式开发 Web App全站-8-总项目

载入所有的组件资源 <script type="text/javascript" src="js/lib/jquery

组件方式开发 Web App全站-3

静态页验证 1. 页切换:fullPage.js(jQuery插件) 2. 组件切换:入场,出场动画 3. 注意问题:DOM事件循环无限传播 http://www.uedsc.com...

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

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

组件方式开发 Web App全站-4- 页面切换

方法: - 添加一个页 addPage - 添加一个组件 addComponet - 展现所有的页面 loader 图文组件类:H5ComponentBase 作用:输出一个DOM,内...

组件方式开发 Web App全站-2(设计稿标注和切图,回滚1)

双倍分辨率 手机端UI设计元素尺寸一般都为偶数 距离转换成百分比

组件方式开发 Web App全站-1

H5专题页类型 活动运营 品牌宣传 产品介绍 总结报告 职业:名称->产出 原型设计:产品经理->需求文档(MRD) 描述项目功能需求 经验:产品经理的需求文档的功能不可能100%...

慕课网实战—《用组件方式开发 Web App全站 》笔记三 -散点图组件开发

运用HTML5、CSS3、JS流行技术,采用组件式开发模式,开发Web App全站!技术大牛带你统统拿下不同类型的HTML5动态数据报告! 《用组件方式开发 Web App全站 》 散点图开发
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)