用组件方式开发 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
  • 5706

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

运用HTML5、CSS3、JS流行技术,采用组件式开发模式,开发Web App全站!技术大牛带你统统拿下不同类型的HTML5动态数据报告! 《用组件方式开发 Web App全站 》...
  • Lovejulyer
  • Lovejulyer
  • 2016年07月14日 02:49
  • 4487

慕课网实战—《用组件方式开发 Web App全站 》笔记七-饼图和环图组件开发

运用HTML5、CSS3、JS流行技术,采用组件式开发模式,开发Web App全站!技术大牛带你统统拿下不同类型的HTML5动态数据报告! 《用组件方式开发 Web App全站 》 饼图和环图组...
  • Lovejulyer
  • Lovejulyer
  • 2016年07月16日 18:00
  • 3612

慕课网实战—《用组件方式开发 Web App全站 》笔记四-柱状图组件开发

运用HTML5、CSS3、JS流行技术,采用组件式开发模式,开发Web App全站!技术大牛带你统统拿下不同类型的HTML5动态数据报告! 《用组件方式开发 Web App全站 》 平柱图开发...
  • Lovejulyer
  • Lovejulyer
  • 2016年07月15日 18:02
  • 2688

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

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

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

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

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

载入所有的组件资源
  • qq_33936481
  • qq_33936481
  • 2017年04月25日 13:36
  • 315

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

运用HTML5、CSS3、JS流行技术,采用组件式开发模式,开发Web App全站!技术大牛带你统统拿下不同类型的HTML5动态数据报告!...
  • Lovejulyer
  • Lovejulyer
  • 2016年07月09日 14:32
  • 2502

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

方法: - 添加一个页 addPage - 添加一个组件 addComponet - 展现所有的页面 loader 图文组件类:H5ComponentBase 作用:输出一个DOM,内...
  • qq_33936481
  • qq_33936481
  • 2017年04月06日 19:55
  • 355

Web App用组件方式开发全站

Web App用组件方式开发全站    第1章 课程前期准备 在学习正式课程之前了解下“WEB项目开发流程”以及在“流程中的角色”。 第2章 前端开发简介...
  • QQ1160717335
  • QQ1160717335
  • 2017年12月06日 12:58
  • 31
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用组件方式开发 Web App全站之通用图文组件类-H5ComponentBase(接受 onLoad、onLeave事件)
举报原因:
原因补充:

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