移花接木(35)- 添加下拉选择框

更新于 2020.11.19 krpano 1.20.9

官方下载包路径

你电脑的路径\krpano-1.20.9\viewer\examples\combobox\

提示:如果不了解何谓下载包路径,请查看 循序渐进(3)- krpano下载包的使用说明

 

在线演示

 

使用方法

首先在主xml中嵌入下面代码

新版combobox插件将当前xml文件的<combobox>元素转换为若干内置的<layer>容器、scrollarea以及textfield元素。

 

下面按三种添加方法进行说明

静态代码添加下拉选择框

静态代码实际上就是一个combobox元素。

首先看第一行,name实际上就是一个layer的name,所以要遵循命名唯一性的原则。design属性是控制整个下拉选择框的外观效果,它指定了一个combobox_design元素的name。align、x、y实际上与layer元素的同名属性使用方法一致,是控制该下拉选择框在窗口中的位置。onchange事件则是在当前条目被改变时调用。

在这个代码中,共有9项,即九个item子元素,意味着该下拉选择框共九项,其name遵循命名唯一性,因此可参考案例中的方式命名。

caption是显示在每一条目中的文字。

onclick是当点击条目时需要执行的动作。

 

混合动态与静态代码添加下拉选择框

混合代码做法实际上是主框架由静态代码确定,而条目则动态添加。

combobox元素中onloaded事件与layer的同名事件用法一样,是控件加载完成时需要执行的动作,这里是一个自定义的动作,也即是动态添加条目。

在这个例子中add_scene_items动作中是一个for动作,添加可跳转到各个scene的下拉选择框。因为该动scope为local,因此在additem添加caller。

第一个参数是caption,即条目的名字。这里是

也即是每个场景的缩略图thumburl以及名字title。这实际上是个textfiled的html属性,因此可以写简单的html代码到caption中。

第二个参数是onclick,当点击条目时需要执行的动作。这里是

 

完全动态代码添加

removeComboboxLayer动作移除一个下拉列表框,参数是该combobox的name。

addComboboxLayer动作添加一个下来列表框,第一个参数是指定该combobox的name,第二个参数指定该combobox的样式,也即是design的数值。

additem动作动态添加一个条目,第一个参数是caption,第二个参数是onclick。

这里的onclick实际上是执行一次rebuild_design_selection。

 

combobox自定义设计

  • <combobox_design>元素包含以下属性:
    • margin – 条目边界空白(默认为2)
    • open_close_speed – 打开和关闭的速度,以秒为单位(默认为0.25)

且需要下面三个<style>元素放在其中:

1.combobox_container_style 

combobox基本layer的样式(容器layer)

可包含任意容器layer设置。

2.combobox_marker_style 

下拉/当前条目标记的样式(文本)。

可包含任意textfield设置。

3.combobox_item_style 

条目元素的样式(文本)

可包含任意textfield设置。

 

下面是一个<combobox_design>元素的默认设计例子:

 

为combobox添加onover与onout功能

目前combobox插件只有onclick事件,通过修改combobox.xml增加onover与onout两个鼠标事件。

使用修改后的combobox.xml:

http://krpano360.com/wp-content/uploads/combobox.xml