开发者工具¶
Qingcloud 应用中心提供了 appcenter.css 样式库和 qclib.js 开发包，用于生成 Qingcloud 控制台的标准组件，并可以与控制台进行交互。
appcenter.css 样式库¶
应用以 iframe 方式嵌入 Qingcloud 控制台，因此需要展示上尽量保持与控制台风格统一。Qingcloud 应用中心提供了一套 css 样式库，定义了一系列组件类名和 html 代码结构，调用者可以在动态语言模板（或静态 html 文件）中按规范生成 html 代码。
常用页面组件包含toolbar、button、表格、form表单、tooltip、弹出层、提示框、图表等，以 button 为例。
首先，在页面中引用 appcenter.css 样式文件:
<link href="https://console.qingcloud.com/static/css/appcenter.css" rel="stylesheet" type="text/css" />
在页面中按控件样例的代码生成 html，保持类名，如:
<a class="btn" href="#"><span class="icon icon-create"></span><span class="text">添加></span></a>
即可生成如下的按钮:
qclib.js 工具包¶
Qingcloud 应用中心还提供了一个 qclib.js 的应用工具包。该工具包有生成标准 Qingcloud 控制台组件的 Mods 模块，以及与控制台交互的App模块。后续还会提供直接在控制台调用 Qingcloud API 的 API 模块。
上述 button 的例子，使用Mods模块，可以生成 button 的 html 代码：
var btn = new QCLIB.Mods.Button({type: 'create', text:'创建'});
// 可以直接操作 Dom 元素
some_element.appendChild(btn.el);
// 或者获取 Dom 元素的 html 代码
some_element.innerHTML = btn.html();
// 也可以链式操作
some_element.innerHTML = new QCLIB.Mods.Button({type: 'create', text:'创建'}).html();
qclib 的 App 模块提供了一些与 Qingcloud 控制台交互的方法：
// 设置控制台的 iframe 应用高度
var height = getPageHeight();
QCLIB.App.setAppHeight(height);
// 返回控制台应用中心页面
some_button.addEventListener('click', function(e) {
QCLIB.App.toAppCenter();
}, false);
// 改变控制台 URL，下面的例子会将控制台改为
// "https://console.qingcloud.com/{zone}/overview/"
var location = "overview";
some_button.addEventListener('click', function(e) {
QCLIB.App.setLocation(location);
}, false);
以下是各种组件使用 qclib.js Mods 模块生成组件，以及 html 的样式结构的代码示例
toolbar & button¶
var toolbar = new QCLIB.Mods.Toolbar({
buttons: [
{type: 'refresh'},
{type: 'create', text: '添加'},
{type: 'start', text: '启动', forbidden: true},
{type: 'stop', text: '关机', forbidden: true},
{type: 'more', text: '更多操作', sub_buttons: [
{type: 'restart', text: '重启', forbidden: true},
{type: 'volumes', text: '硬盘', forbidden: true},
{type: 'keypairs', text: '加载SSH密钥', forbidden: true},
{type: 'security_groups', text: '加载防火墙规则', forbidden: true},
{type: 'vxnet', text: '加入网络', forbidden: true},
{type: 'resize', text: '更改配置', forbidden: true},
{type: 'snapshot', text: '创建备份', forbidden: true},
{type: 'alarms', text: '绑定告警策略', forbidden: true},
{type: 'reset', text: '重置系统', forbidden: true},
{type: 'terminate', text: '删除', forbidden: true},
]}
],
search: true,
pagination: true
});
表格¶
// 定义嵌套在table中的dropdown组件
// 可以分别定义filter的字段名和展示名称
var dropdown = new QCLIB.Mods.Dropdown({
filters: [
{filter: 'pending', text: '等待中'},
{filter: 'running', text: '运行中'},
{filter: 'stopped', text: '已关机'},
{filter: 'suspended', text: '已暂停'},
{filter: 'terminated', text: '已删除'},
{filter: 'ceased', text: '已销毁'}
]});
// 也可以省略展示名称，字段名与展示名统一
// var dropdown = new QCLIB.Mods.Dropdown({
// filters: ['pending','running','stopped','suspended','terminated','ceased']
// });
// 定义嵌套在table中的icon插件
var icon = new QCLIB.Mods.Icon({type: 'status', status: 'running'});
// table的head和body都可以嵌套组件
var qctable = new QCLIB.Mods.Table({
checkbox: true,
head: ['ID', '名称', ['状态', dropdown], '公网IP', '类型', '告警状态', '创建于'],
body: [['i-xxxxxxxx', '主机1', [icon, ' 运行中'], 'xxx.xxx.xxx.xxx', '1核2G', '无监控', '5天前']]
});
// 可以动态添加一行内容
var alarm_icon = new QCLIB.Mods.Icon({type: 'alarms', alarms: 'alarm-ok'});
var row = ['i-xxxxxxxx', '主机1', [icon, ' 运行中'], '', '1核2G', alarm_icon, '2个月前'];
qctable.appendRow(row);
form表单¶
// 每个表单项作为一个item添加
// 如果有多行tips，可以用数组作为参数，否则可以用一个对象或字符串。
// 当使用字符串时，自动作为text，而不指定额外的className
var form = new QCLIB.Mods.Form({
items: [
{label: '名称', type: 'text', name: 'volume_name'},
{label: '数量', type: 'text', length:'medium', name: 'count', value: 1},
{label: '类型', type: 'radio', name: 'volume_type', radios: [
{text: '性能型', value: "0", checked: true},
{text: '容量型', value: "1"}
], tips: [
{
text: 'IO 吞吐 128 MB/s，单块最小容量10GB、最大容量1000GB。',
className: 'volume'
},
{
text: 'IO 吞吐 36 MB/s，单块最小容量100GB、最大容量5000GB。',
className: 'volume'
}
]},
{label: '监控周期', type: 'select', name: 'period', options: [
{value: '1m', text: '1分钟'}, {value: '5m', text: '5分钟', selected: true}
]},
{label: '容量', type: 'slider', name: 'size', value: '10', unit: 'GB',
tips: '10GB - 1000GB'
}
]
});
tooltip¶
var tooltip = new QCLIB.Mods.Tooltip({
text: '创建备份',
rel: document.querySelectorAll('.wrapper .icon-snapshot')[0]
});
弹出层¶
var modal = new QCLIB.Mods.Modal({
title: '创建私有网络',
width: 600
});
var form = new QCLIB.Mods.Form({
legend: '创建私有网络',
items: [
{label: '名称', type: 'text', name: 'vxnet_name'},
{label: '数量', type: 'text', name: 'count', value: 1, length: 'medium'},
{label: '', type: 'more', text: '显示高级选项...'}
],
actions: {submit: '提交', cancel: '取消'}
});
modal.addContent(form);
提示框¶
var qcconfirm = new QCLIB.Mods.Confirm({
type: 'info',
message: '确定要删除私有网络？'
});
图表¶
// javascript库暂不支持