在线咨询
QQ交流群
微信公众号

Class: Panel

Panel

Panel 创建一个面板,并可向该面板中添加文本、数字、布尔、单选框、复选框、图标按钮、进度条、Tab 选项卡、Iframe 等组件。


new Panel(param) → {Panel}

Parameters:
Name Type Description
param Object

参数列表

Properties
Name Type Description
template? String

面板样式,可填 'default' (默认值) 、'default2'

cornerType? String

角标样式,可填 none (默认值)、没有线的角标 noline 、折线角标 polyline

width String

面板宽度,可设置像素值('200px')或百分比('25%')

hasTitle Boolean

是否有标题

titleText String

标题内容

closeIcon? Boolean

面板是否有关闭按钮

dragable? Boolean

面板是否可拖拽

retractable? Boolean

面板是否可收起

opacity? Number

不透明度 0 为全透明,1 为不透明

zIndex? Number

层级

Returns:

面板对象

Type
Panel
Example
var panel = new THING.widget.Panel({
  template: 'default',// 面板样式 默认 default
  cornerType: "none",// 角标样式 默认 none 无角标
  width: "300px",// 面板宽度
  hasTitle: true, // 是否有标题
  titleText: "我是标题", // 标题内容
  closeIcon: true,// 是否有关闭按钮
  dragable: true,// 是否可拖拽
  retractable: true,// 是否可收起
  opacity: 0.9,// 面板不透明度
  zIndex: 99 // 层级
})

Members


opacity :Number

不透明度 0 为全透明,1 为不透明

Type:
  • Number

position :Array

设置界面位置,可填写 像素值 或 百分比

Type:
  • Array
Example
// 像素值
panel.position = [10,20]
// 百分比
panel.position = ['50%','25%']

positionOrigin :String

位置原点, 以面板自身的四个顶点为基准点进行偏移 左上角——TL/topleft,右上角——TR/topright,左下角——BL/bottomleft,右下角——BR/bottomright

Type:
  • String

titleText :String

标题名称

Type:
  • String

visible :Boolean

设置/获取 是否可见

Type:
  • Boolean
Example
panel.visible = false;

zIndex :Number

层级

Type:
  • Number

Methods


<static> addTable(object) → {THING.Controller}

添加表格类型数据

Parameters:
Name Type Description
object Object

数据对象

Properties
Name Type Description
props Array.<String>

列标题

items Array.<Object>

列数据

Returns:

表格类型组件对象

Type
THING.Controller
Example
var dataObj = {
  props: ['第一列','第二列','第三列'],
  items: [
    { "第一列": 'I1',"第二列": '120MP',"第三列": '2018.02.24'},
    { "第一列": 'I2',"第二列": '120MP',"第三列": '2018.02.24'},
    { "第一列": 'I3',"第二列": '120MP',"第三列": '2018.02.24'}]
};
panel.addTable(dataObj)

<static> on(event, func)

绑定事件

Parameters:
Name Type Description
event String

事件类型

func Funcion

回调函数


addBoolean(object, property) → {THING.Controller}

添加布尔类型组件

Parameters:
Name Type Description
object Object

数据对象

property String

要绑定的某属性值的属性名称

Returns:

布尔类型组件对象

Type
THING.Controller
Example
var dataObj = {
  '开关状态': true
}
var ctrl = panel.addBoolean(dataObj, '开关状态');

addCheckbox(object, property) → {Array}

添加复选框组件

Parameters:
Name Type Description
object Object

数据对象

property String

要绑定的某属性值的属性名称

Returns:

复选框类型组件对象

Type
Array
Example
var dataObj = {
  '设备': { '设备1': false, '设备2': false, '设备3': true, '设备4': true }
}
var checkBox = panel.addCheckbox(dataObj, '设备')

addContextMenu(object, property) → {THING.Controller}

菜单组件

Parameters:
Name Type Description
object Object

数据对象

property String

要绑定的某属性值的属性名称

Returns:

菜单组件

Type
THING.Controller
Example
var dataObj = {
  '菜单项': [
    {
      label: '菜单1'
    }, {
      label: '菜单2',
      childMenu: [
        { label: '子菜单1'},
        { label: '子菜单2'}]
    }]
};
var contextMenu = panel.addContextMenu(dataObj, '菜单项');

addIframe(object, property) → {THING.IframeController}

添加 iframe 组件

Parameters:
Name Type Description
object Object

数据对象

property String

要绑定的某属性值的属性名称

Returns:

iframe 组件对象

Type
THING.IframeController
Example
var dataObj = {
  'url':'https://www.thingjs.com/guide/'
}
panel.addIframe(dataObj,'url')

addImageBoolean(object, property) → {THING.ImageController}

添加图标按钮组件

Parameters:
Name Type Description
object Object

数据对象

property String

要绑定的某属性值的属性名称

Returns:

图标按钮组件对象

Type
THING.ImageController
Example
var dataObj={
  '按钮1':true,
  '按钮2':true,
  '按钮3':false,
}
var btn01 = panel.addImageBoolean(dataObj, '按钮1')
var btn02 = panel.addImageBoolean(dataObj, '按钮2')
var btn03 = panel.addImageBoolean(dataObj, '按钮3')

addNumber(object, property) → {THING.Controller}

添加数字类型组件

Parameters:
Name Type Description
object Object

数据对象

property String

要绑定的某属性值的属性名称

Returns:

数字类型组件对象

Type
THING.Controller
Example
var dataObj = {
  '气温': 21
}
var ctrl = panel.addNumber(dataObj, '气温')

addNumberSlider(object, property) → {THING.NumberControllerSlider}

添加数值型进度条组件

Parameters:
Name Type Description
object Object

数据对象

property String

要绑定的某属性值的属性名称

Returns:

数值型进度条组件对象

Type
THING.NumberControllerSlider
Example
var dataObj = {
  '气温': 21
}
var ctrl = panel.addNumberSlider(dataObj, '气温')

addProgress(object, property, arr) → {THING.Controller}

添加导航型进度条

Parameters:
Name Type Description
object Object

数据对象

property String

要绑定的某属性值的属性名称

arr Array.<Object>

各节点信息对象

Returns:

进度条组件对象

Type
THING.Controller
Example
var dataObj = {
  'progress' : 2
}
var ctrl = panel.addProgress(dataObj, 'progress',
  [{ name: '2号楼', describe: '教学楼' },
   { name: '3号楼', describe: '实验楼' },
   { name: '5号楼', describe: '室内篮球场' },
   { name: '餐厅', describe: '五星级' },
   { name: '大讲堂', describe: '开讲了' }]
)

addRadio(object, property, arr) → {THING.Controller}

添加单选框组件

Parameters:
Name Type Description
object Object

数据对象

property String

要绑定的某属性值的属性名称

arr Array

单选框值数组

Returns:

单选框组件对象

Type
THING.Controller
Example
var dataObj = {
  '监控设备':'摄像头01'
}
var radio = panel.addRadio(dataObj, '监控设备', ['摄像头01', '摄像头02','摄像头02']);

addString(object, property) → {THING.Controller}

添加字符串组件

Parameters:
Name Type Description
object Object

数据对象

property String

要绑定的某属性值的属性名称

Returns:

字符串组件对象

Type
THING.Controller
Example
var dataObj = {
  '气温':'21℃'
}
var ctrl = panel.addString(dataObj, '气温')

addTab(object) → {THING.Controller}

添加 Tab 栏

Parameters:
Name Type Description
object Object

数据对象

Returns:

Tab 类型组件对象

Type
THING.Controller
Example
var dataObj = {
  '基本信息': {
    '品种': "小麦",
    '库存数量': "6100"
  },
  '粮情信息': {
     '仓房温度': "26",
     '粮食温度': "22"
  },
  '报警信息': {
     '温度': "22",
     '火灾': "无",
     '虫害': "无"
  }
};
var tab = panel.addTab(dataObj);

remove(组件对象)

删除组件

Parameters:
Name Type Description
组件对象 THING.Controller
Example
panel.remove(ctrl)