Krpano Combobox插件使用指南

 🧑‍🎓 个人主页：《爱蹦跶的大A阿》

🔥当前正在更新专栏：《VUE》 、《JavaScript保姆级教程》、《krpano》、《Krpano中文文档》

​ 

​

• 一个组合框/下拉列表/选择框插件。
• 这个插件将当前xml中的<combobox>元素转换为几个内部<layer>容器，scrollarea和textfield元素。
• 此外，还可以动态地添加和删除组合框元素。
• 纯xml实现允许多种定制方式(设计和功能)。
• 由于只有xml的插件代码，它自动工作相同的HTML5和Flash。
• 可以使用这个插件替代旧的 combobox.swf / combobox.js 插件，操作接口是相同的。

主题

• 语法
• Size / Alignment / Position
• 插件属性/事件
• 插件操作
• 组合框自定义设计

语法

首先将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"
选择组合框的设计。 这里可以选择预定义的设计或自己的定制设计。 可用的设计有: default - 白色的盒子有阴影和黑色的文字。 vtour - vtourskin.xml 查看, dark-blue background with white text. 如果没有设置或使用无效设置，将使用“默认”设计。 自定义设计可以通过 <combobox_design> 元素创建。 更多信息请参见这里: Combobox Custom Designs
Attribute name	Type	Default value
maxopenheight	Number	1000
打开列表的最大高度(以px为单位)。 当大于可用窗口空间时，高度将被自动限制。
Attribute name	Type	Default value
callonclickafterclose	Boolean	false
定义何时调用项目的onclick事件: true (default) - 关闭组合框后调用 onclick 延迟。 false - 即时调用，当更改浏览器设置需要直接用户交互时，这是必要的，例如切换到全屏模式。
Attribute name (read only)	Type	Default value
selecteditemindex	int
当前选中项的索引(0-n)。
Attribute name	Type	Default value
onchange	String
当当前选中的项目被更改时，将调用此事件。
Attribute name (read only)	Type	Default value
item	Array
项的数组，仅用于读访问。 访问方式:layer[cbname].item[itemname].* 获取项目的数量:layer[cbname].item.count
Attribute name	Type	Default value
item[itemname].caption	String
项目的标题文本。 项目本身是一个文本域，所以它也可以使用html/css代码在这里。
Attribute name (read only)	Type	Default value
item[itemname].itemlayername	String
内部item textfield <layer> 元素的名称。
Attribute name (read only)	Type	Default value
item[itemname].itemlayer	Object
内部item textfield <layer> 元素。
Attribute name	Type	Default value
item[itemname].oninit	String
此事件将在创建项时调用。 调用范围将是item textfield层元素。 可用于在创建时动态设置item元素的样式。
Attribute name	Type	Default value
item[itemname].onclick	String
单击项目时将调用此事件。 注意-请参阅 callonclickafterclose 设置!

插件操作

Action name
addComboboxLayer(name, design*)
添加一个新的组合框层与给定的名称和设计(*可选)。
Action name
removeComboboxLayer(name)
移除combobox元素。
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)
  并且需要这三个 <style> 元素:
  1. combobox_container_style
     • 组合框的基本层(容器层)的样式。
     • 它可以包含任何容器层设置。
  2. combobox_marker_style
     • 下拉/当前项标记(文本字段)的样式。
     • 它可以包含任何文本字段设置。
  3. 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>

✨ 结语

        

​