插件示例：流量交换插件
目录结构
- traffic-exchange
- package.json
- components
- traffic-exchange
- package.json
- editing.js
- portal.js
- style.css
- traffic-exchange
插件： package.json
{
"entrance": "/manage/",
"proxy-prefixes": {
"common": "http://traffic-exchange.kuaizhan.com",
"manage-page": "",
"manage-api": "",
"backend-page": "",
"backend-api": "",
"page": "",
"api": ""
},
"proxy-paths": {
"common": "*"
}
}
组件： package.json
{
"name": "traffic-exchange",
"title": "流量互换",
"image_icon": "http://7bede40ef4e00.cdn.sohucs.com/62a785ae51c23d71b829d28d06450a8b",
"html": "{{#t0}}<div class='traffic-exchange' style='margin:{{margin-top}} {{margin-right}} {{margin-bottom}} {{margin-left}};' {{_progdata_}}> <a href='javascript:void' type='text'><div class='text'></div></a><div></div></div>{{/t0}}{{#t1}} <div style='margin:{{margin-top}} {{margin-right}} {{margin-bottom}} {{margin-left}};' {{_progdata_}}> <a href='javascript:void'><img src='' /> </a></div>{{/t1}}",
"data_config": {
"t0": {
"type": "boolean",
"required": true,
"default": true,
"vd_rules": {}
},
"t1": {
"type": "boolean",
"required": true,
"default": false,
"vd_rules": {}
},
"margin-top": {
"type": "string",
"required": false,
"category": "style"
},
"margin-right": {
"type": "string",
"required": false,
"category": "style"
},
"margin-bottom": {
"type": "string",
"required": false,
"category": "style"
},
"margin-left": {
"type": "string",
"required": false,
"category": "style"
}
},
"seq": "22",
"widgets": {
"style": [
{
"type": "switchrow",
"label": "调整边距",
"opt": {
"name": "chk_margin",
"content": {
"type": "margin"
}
},
"data_name": "margin-top"
}
],
"property": [
{
"data_name": "t0"
},
{
"data_name": "t1"
},
{
"data_name": "margin-right"
},
{
"data_name": "margin-bottom"
},
{
"data_name": "margin-left"
}
]
}
}
editing.js
define(['jquery', 'configurableComponent', 'lib/mustache', 'ui'], function($, Component, mustache, ui) {
'use strict';
//初始化组件类，参数为组件配置，如果组件第一次创建，将传递空配置，如果组件为已经创建到视图窗口，重新加载，将传递已保存的配置
return Component.extend({
html_edit: '{{#t0}}<div class=\"mod mod-traffic_exchange\" style=\"margin:{{margin-top}} {{margin-right}} {{margin-bottom}} {{margin-left}};\"> <div class=\"text\"><a href=\"javascript:void\" type=\"text\">推广位将会展示来自其他站点的推广信息</a></div><div></div></div>{{/t0}}\
{{#t1}} <div style="margin:{{margin-top}} {{margin-right}} {{margin-bottom}} {{margin-left}};"> <a href=\"javascript:void\"><img src=\"http://traffic-exchange.kuaizhan.com/static/image/sample.png\" /> </a></div>{{/t1}}',
//输出到配置窗口，事件绑定使用$el.delegate 绑定，当删除$el时同时删除对应事件
init: function(data) {
this.$viewEl = $(this.viewEl);
this.$configEl = $(this.configEl);
var defaults = this.getDefaults();
this.data.site_id
$.extend(this.data, defaults, data);
},
renderConfigurator: function() {
var that = this;
Component.prototype.renderConfigurator.apply(this, [{column: "style"}]);
var t = this.data.t0 ? "t0" : this.data.t1 ? "t1" : "";
var options = [],
o = [{
"t0": true,
"title": "标题文字",
value: "t0",
"content": "<div class=\"traffic-exchange\" style=\"\"> <div class=\"text\"><a href=\"javascript:void\" type=\"text\">推广位将会展示来自其他站点的推广信息</a></div><div></div></div>"
}, {
"t1": true,
"title": "标题文字",
value: "t1",
"content": " <div> <a href=\"javascript:void\"><img src=\"http://traffic-exchange.kuaizhan.com/static/image/sample.png\" /> </a></div>"
}];
for (var i in o) {
options.push({
cur: t == o[i].value,
value: o[i].value,
content: o[i].content
});
}
var typesel = ui.typeselect.create({
name: "theme",
options: options
});
this.$stylePanel.prepend(
ui.createRow({
title: "推广位样式",
content: typesel
})
);
this.$stylePanel.append(
ui.createRow({
title: "",
content: "<a style=\"color: blue;\" href=\"/plugin/page-proxy/traffic-exchange/manage/?site_id=" + SOHUZ.page.site_id + "\">上传</a>本站推广信息，获得其他站点推荐！"
})
);
ui.typeselect.init(this.$configEl);
this.listen("theme", "", function(ev, v) {
that.data["t0"] = that.data["t1"] = false;
that.data[v] = true;
that.renderView();
});
this.listenMargin();
}
});
});
portal.js
非必须，当需要在页面发布之后执行JS回调处理时使用。
/*
*发布后执行JS
*/
define(['zepto'], function($) {
return {
//输出到发布页面，当用户正式发布后，调用此函数创建视图。
onAfterRender: function(el) {
site_id = SOHUZ.page.site_id;
url = "http://traffic-exchange.kuaizhan.com/ad/display/" + site_id + "/";
$.getJSON(url + "?callback=?",
function(json) {
var e = $(el);
if (json.code != 0) {
e.hide();
return;
}
var link = "http://traffic-exchange.kuaizhan.com/ad/click/" + site_id + "/" + json.data.site_id + "/";
var a = e.find('a');
if (a.attr("type") == "text") {
a.html("<div class=\"text\">" + json.data.text + "</div>");
} else {
if (!json.data.pic) {
e.attr("class", "traffic-exchange");
a.html("<div class=\"text\">" + json.data.text + "</div>");
} else {
a.find("img").attr("src", json.data.pic);
}
}
a.attr("href", link);
});
}
}
});
style.css
必须，组件的样式定义
.mod-traffic_exchange,.traffic-exchange {
background: #fcf2d8;
border-top-style: solid;
border-top-color: #6c2f00;
border-top-width: 1px;
}
.mod-traffic_exchange .text,.traffic-exchange .text {
background: #fcf2d8;
font-size: 16px;
height: 40px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 40px;
max-width: 300px;
}
.mod-traffic_exchange a,.traffic-exchange a {
max-width: 200px;
white-space: nowrap;
overflow: hidden;
}
.mod-traffic_exchange,.traffic-exchange {
background: url(http://traffic-exchange.kuaizhan.com/static/image/array.png) no-repeat 98% center;
-webkit-background-size: 5px auto;
background-color: #fcf2d8;
}
edit.css
非必须，当需要在编辑状态下应用特殊样式时使用。
...