Class: Panel

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)