🧑🎓 个人主页:《爱蹦跶的大A阿》
🔥当前正在更新专栏:《VUE》 、《JavaScript保姆级教程》、《krpano》、《Krpano中文文档》
- 一个组合框/下拉列表/选择框插件。
- 这个插件将当前xml中的<combobox>元素转换为几个内部<layer>容器,scrollarea和textfield元素。
- 此外,还可以动态地添加和删除组合框元素。
- 纯xml实现允许多种定制方式(设计和功能)。
- 由于只有xml的插件代码,它自动工作相同的HTML5和Flash。
- 可以使用这个插件替代旧的 combobox.swf / combobox.js 插件,操作接口是相同的。
主题
语法
首先将combobox.xml文件包含在xml中的任何位置(根据需要调整路径):
<include url="plugins/combobox.xml" />
通过静态xml代码定义combobox元素:
<combobox name="cb1" design="default" ...any layer settings...>
<item name="item1" caption="Item 1" onclick="..." oninit="..." />
<item name="item2" caption="Item 2" onclick="..." />
<item name="item3" caption="Item 3" onclick="..." />
</combobox>
该 <combobox> 元素将在启动时转换为 <layer> 元素。图层名称将是相同的。因此,对于动态访问组合框,使用 layer[name] 作为寻址。
或者通过动态操作代码创建combobox元素:
<action name="test">
addComboboxLayer(cb1, default);
set(layer[cb1].align, 'lefttop');
set(layer[cb1].x, 20);
set(layer[cb1].y, 20);
layer[cb1].addItem('Item 1', trace(Item 1 clicked) );
layer[cb1].addItem('Item 2', trace(Item 2 clicked) );
layer[cb1].addItem('Item 3', trace(Item 3 clicked) );
</action>
Size / Alignment / Position
- 组合框可以放置在屏幕上,也可以像普通图层元素一样放置在其他图层中——例如,通过使用 align, edge, x, y 和 parent 设置。
- 如果未设置 width 则宽度将由 design settings 和最大项目标题自动确定。
- 无法设置 height 高度将始终自动设置。
插件属性/事件
Attribute name | Type | Default value | |
design | String | "default" | |
---|---|---|---|
| |||
Attribute name | Type | Default value | |
maxopenheight | Number | 1000 | |
| |||
Attribute name | Type | Default value | |
callonclickafterclose | Boolean | false | |
| |||
Attribute name (read only) | Type | Default value | |
selecteditemindex | int | ||
| |||
Attribute name | Type | Default value | |
onchange | String | ||
| |||
Attribute name (read only) | Type | Default value | |
item | Array | ||
| |||
Attribute name | Type | Default value | |
item[itemname].caption | String | ||
| |||
Attribute name (read only) | Type | Default value | |
item[itemname].itemlayername | String | ||
Attribute name (read only) | Type | Default value | |
item[itemname].itemlayer | Object | ||
Attribute name | Type | Default value | |
item[itemname].oninit | String | ||
| |||
Attribute name | Type | Default value | |
item[itemname].onclick | String | ||
|
插件操作
Action name |
addComboboxLayer(name, design*) |
---|
|
Action name |
removeComboboxLayer(name) |
|
Action name |
layer[name].addItem(caption, onclick) |
|
Action name |
layer[name].addNamedItem(name, caption, onclick) |
|
Action name |
layer[name].selectItem(caption) |
|
Action name |
layer[name].selectItemByName(name) |
|
Action name |
layer[name].removeAll() |
|
Action name |
layer[name].openList() |
|
Action name |
layer[name].closeList() |
|
组合框自定义设计
- 自定义设计可以通过 <combobox_design> 元素定义。
- 它们可以在xml中的任何地方定义,并且需要一个唯一的 name.
- 为了使用该设计,需要使用其名称作为设计参数。
- <combobox_design> 元素本身有这些属性:
- margin - layout / item margins (默认为2)
- open_close_speed - 以秒为单位的开/关速度(默认为0.25)
- combobox_container_style
- 组合框的基本层(容器层)的样式。
- 它可以包含任何容器层设置。
- combobox_marker_style
- 下拉/当前项标记(文本字段)的样式。
- 它可以包含任何文本字段设置。
- combobox_item_style
- 条目元素(textfields)的样式。
- 它可以包含任何文本字段设置。
下面以默认设计的<combobox_design>元素为例:
<combobox_design name="default" margin="2" open_close_speed="0.25">
<style name="combobox_container_style"
bgalpha="1.0"
bgcolor="0xFFFFFF"
bgborder="1 0xFFFFFF 0.5"
bgroundedge="1"
bgshadow="0 1 3 0x000000 1.0"
/>
<style name="combobox_marker_style"
css="color:#FFFFFF;"
bg="false"
txtshadow="0 0 2 0x000000 1"
/>
<style name="combobox_item_style"
css="color:#222222;"
padding="4 4"
bg="false"
bgcolor="0xC7E4FC"
bgalpha="1.0"
bgroundedge="1"
txtshadow="0 0 1 0xFFFFFF 1.0"
/>
</combobox_design>
✨ 结语