插件应用示例：渐变底色容器

点击下载插件应用示例

目录结构

插件应用： package.json

由于不需要服务器端资源，所以插件应用的package.json 保持默认即可


{
    "entrance": "",
    "proxy-prefixes": {
        "common": "",
        "manage-page": "",
        "manage-api": "",
        "backend-page": "",
        "backend-api": "",
        "page": "",
        "api": ""
    },
    "proxy-paths": {
        "common": "*"
    }
}

组件： package.json

{

    "title": "渐变色底板",
    "image_icon": "http://7bede40ef4e00.cdn.sohucs.com/9641d0e6edf33f8fadcbbf1878d71a3e",
    "font_icon": "",
    "html": "<div class=\"mod sub_container mod-wedding-floor {{class}}\" style=\"height:{{height}};\">{{content}}</div>",
    "data_config": {
        "class": {
            "type": "string",
            "default": "wedding-floor-A"
        },

        "height": {
            "type": "string",
            "default": "300px"
        }

    },
    "widgets": {
        "style": [
            {
                "label": "渐变类型",
                "type": "typeselect",
                "opt": {
                    "name": "class",
                    "options": [
                        {
                            "value": "wedding-floor-A",
                            "content": "样式一"
                        },
                        {
                            "value": "wedding-floor-B",
                            "content": "样式二"
                        }
                    ]
                },
                "data_name": "class"
            },
            {
                "label": "容器高度",
                "type": "text",
                "opt": {
                    "name": "height"
                },
                "data_name": "height"
            }
        ],
        "property": [

        ]
    }
}

editing.js

/*
 组件类定义。
 */
define(['jquery', 'component', 'lib/mustache', 'utils/uiHelper'], function ($, Component, mustache, uiHelper) {
    'use strict';

    //初始化组件类，参数为组件配置，如果组件第一次创建，将传递空配置，如果组件为已经创建到视图窗口，重新加载，将传递已保存的配置
    return Component.extend({
        html_edit: '<div class=\"mod sub_container mod-wedding-floor {{class}}\" style=\"height:{{height}};\">{{content}}</div>',

        //输出到编辑视图窗口，此函数需要处理编辑视图的显示以及相关事件的绑定，注：编辑视图不建议绑定事件
        renderView: function () {
            //因为renderView可以多次调用，为了防止重新渲染容器内组件丢失，需要检查，如果已有容器，清理容器内的组件。
            if (this.subComponentContainers) {
                for (var n in this.subComponentContainers) {
                    this.subComponentContainers[n].clear();
                }
            }
            //重新渲染容器外框
            this.$viewEl.html(mustache.render(this.html_edit, this.getData()));

            //setComponentContainer,可以设置一个dom为可以拖入子控件的外框，acceptRole设置子控件可以接收子控件的列表
            this.setComponentContainer(
                this.$viewEl.find('.sub_container').toArray(), "sub-container",
                {
                    //在添加子组件之前执行，用于检查是否允许此组件被添加到子模块下。如果允许，返回true,否则返回false
                    acceptRole: function () {
                        return true;
                    }
                }
            );

        },
        //输出到配置窗口，事件绑定使用$el.delegate 绑定，当删除$el时同时删除对应事件
        renderConfigurator: function () {
            var that = this;
            //使用 uiHelper 根据 package.json 的 widgets 创建配置窗口的UI
            uiHelper.createConfiguartor(this);

            //监听class 的事件修改data的class 值
            this.listen("class", function (ev) {
                that.data["class"] = ev.target.value;
                that.renderView();
            });
            //监听height 的输入值
            this.listen("height", function (ev) {
                that.data["height"] = ev.target.value;
                that.renderView();
            });
        },
        //监听配置窗口 name 的 change 事件
        listen: function (name, fn) {

            this.$configEl.delegate('[name="' + name + '"] ', 'change', fn);
            return this;
        },
        //不需要验证.return true;
        isValid: function () {
            return true;
        }
    });


});

portal.js

非必须，当需要在页面发布之后执行JS回调处理时使用。此组件不需要发布回调，这里保持默认


/*
 *发布后执行JS
 */
define(['zepto',''], function ($) {
    'use strict';
    //初始化组件类，参数为组件配置，如果组件第一次创建，将传递空配置，如果组件为已经创建到视图窗口，重新加载，将传递已保存的配置
    return {
            //输出到发布页面，当用户正式发布后，调用此函数创建视图。
            onAfterRender:function(el){

            }
        }
});

style.css

必须，组件的样式定义


.mod-layout_floor{
    overflow:hidden;
}
.phone-editing .mod-layout_floor{
     overflow:visible;
 }
.mod-wedding-floor.wedding-floor-A{
     background:-webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(rgba(224,105,125,.8)));
}
.mod-wedding-floor.wedding-floor-B{
    background:-webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(rgba(24,105,125,.8)));
}
.mod-wedding-floor.wedding-floor-C{
    background:-webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(rgba(255,255,255,1)));
}

edit.css

非必须，当需要在编辑状态下应用特殊样式时使用。

    ...