更新于 2020.11.19 krpano 1.20.9
官方下载包路径
你电脑的路径\krpano-1.20.9\viewer\examples\combobox\
提示:如果不了解何谓下载包路径,请查看 循序渐进(3)- krpano下载包的使用说明
在线演示
使用方法
首先在主xml中嵌入下面代码
1 |
<include url="%VIEWER%/plugins/combobox.xml" /> |
新版combobox插件将当前xml文件的<combobox>元素转换为若干内置的<layer>容器、scrollarea以及textfield元素。
下面按三种添加方法进行说明
静态代码添加下拉选择框
静态代码实际上就是一个combobox元素。
1 2 3 4 5 6 7 8 9 10 11 |
<combobox name="cbsettings" design="vtour" align="righttop" x="10" y="10" onchange="selectItemByName(0);"> <item name="item0" caption="SETTINGS" /> <item name="item1" caption="Drag Control" onclick="set(control.mouse,drag); set(control.touch,drag);" /> <item name="item2" caption="Move Control" onclick="set(control.mouse,moveto); set(control.touch,moveto);" /> <item name="item3" caption="Normal View" onclick="cm_normal_view();" /> <item name="item4" caption="Fisheye View" onclick="cm_fisheye_view();" /> <item name="item5" caption="Stereographic View" onclick="cm_stereographic_view();" /> <item name="item6" caption="Architectural View" onclick="cm_architectural_view();" /> <item name="item7" caption="Pannini View" onclick="cm_pannini_view();" /> <item name="item8" caption="Little Planet View" onclick="cm_littleplanet_view();" /> </combobox> |
首先看第一行,name实际上就是一个layer的name,所以要遵循命名唯一性的原则。design属性是控制整个下拉选择框的外观效果,它指定了一个combobox_design元素的name。align、x、y实际上与layer元素的同名属性使用方法一致,是控制该下拉选择框在窗口中的位置。onchange事件则是在当前条目被改变时调用。
在这个代码中,共有9项,即九个item子元素,意味着该下拉选择框共九项,其name遵循命名唯一性,因此可参考案例中的方式命名。
caption是显示在每一条目中的文字。
onclick是当点击条目时需要执行的动作。
混合动态与静态代码添加下拉选择框
混合代码做法实际上是主框架由静态代码确定,而条目则动态添加。
1 2 3 4 5 6 |
<combobox name="cbscenes" design="vtour" align="leftbottom" x="10" y="10" onloaded="add_scene_items();" /> <action name="add_scene_items" scope="local"> for(set(i,0), i LT scene.count, inc(i), caller.additem(calc('[img src=[dq]' + scene[get(i)].thumburl + '[dq] style=[dq]border:1px solid rgba(255,255,255,0.5);width:48px;height:32px;vertical-align:middle;margin-right:8px;[dq]/] '+scene[get(i)].title), calc('loadscene('+i+',null,MERGE,BLEND(0.5))') ); ); </action> |
combobox元素中onloaded事件与layer的同名事件用法一样,是控件加载完成时需要执行的动作,这里是一个自定义的动作,也即是动态添加条目。
在这个例子中add_scene_items动作中是一个for动作,添加可跳转到各个scene的下拉选择框。因为该动scope为local,因此在additem添加caller。
1 |
addItem(caption, onclick) |
第一个参数是caption,即条目的名字。这里是
1 |
calc('[img src=[dq]' + scene[get(i)].thumburl + '[dq] style=[dq]border:1px solid rgba(255,255,255,0.5);width:48px;height:32px;vertical-align:middle;margin-right:8px;[dq]/] '+scene[get(i)].title |
也即是每个场景的缩略图thumburl以及名字title。这实际上是个textfiled的html属性,因此可以写简单的html代码到caption中。
第二个参数是onclick,当点击条目时需要执行的动作。这里是
1 |
calc('loadscene('+i+',null,MERGE,BLEND(0.5))') |
完全动态代码添加
1 2 3 4 5 6 7 8 9 |
<action name="rebuild_design_selection" autorun="onstart" scope="local" args="design" > removeComboboxLayer(cbdesigns); addComboboxLayer(cbdesigns, get(design)); set(layer[cbdesigns].align, 'center'); layer[cbdesigns].additem('Select Combobox Design'); for(set(i,0), i LT combobox_design.count, inc(i), layer[cbdesigns].additem( get(combobox_design[get(i)].name), calc('rebuild_design_selection(' + combobox_design[get(i)].name + ');') ); ); </action> |
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>元素的默认设计例子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<combobox_design name="rounded" margin="3" open_close_speed="0.25"> <style name="combobox_container_style" bgcolor="0xFFFFFF" bgalpha="0.95" bgborder="1 0xFFFFFF 0.5" bgroundedge="5" bgshadow="2 4 20 0x000000 0.5" /> <style name="combobox_marker_style" css="color:#999999;" bg="false" txtshadow="" /> <style name="combobox_item_style" css="color:#222222;" padding="4 4" bg="false" bgcolor="0xCCCCCC" bgalpha="1.0" bgroundedge="3" txtshadow="" onoveritem="set(css, 'color:#2277FF;');" onoutitem="set(css, 'color:#222222;');" /> </combobox_design> <combobox_design name="classic" margin="0" open_close_speed="0.25"> <style name="combobox_container_style" bgcolor="0xFFFFFF" bgalpha="1.0" bgborder="2 0x333333 0.5" bgroundedge="0" bgshadow="" height="50" /> <style name="combobox_marker_style" css="color:#222222;" bg="false" txtshadow="" /> <style name="combobox_item_style" css="color:#222222;" padding="7" bg="false" bgcolor="0x777777" bgalpha="1.0" bgroundedge="0" txtshadow="" onoveritem="set(bg,true); set(css, 'color:#FFFFFF;');" onoutitem="set(bg,false); set(css, 'color:#222222;');" /> </combobox_design> <combobox_design name="glas" margin="2" open_close_speed="0.25"> <style name="combobox_container_style" bgcolor="0xEEEEEE" bgalpha="0.5" bgborder="1 0x333333 0.5" bgroundedge="5" bgshadow="0 4 10 0x000000 0.3" height="50" /> <style name="combobox_marker_style" css="color:#222222;" alpha="0.7" bg="false" txtshadow="" /> <style name="combobox_item_style" css="color:#222222;" padding="4" bg="false" bgborder="1 0x333333 0.0" bgcolor="0xFFFFFF" bgalpha="1" bgroundedge="3" txtshadow="0 0 4 0xFFFFFF 1" onoveritem="set(bg,true); set(bgborder, '1 0x333333 0.5');" onoutitem="set(bg,false); set(bgborder, '1 0x333333 0.0');" /> </combobox_design> |
为combobox添加onover与onout功能
目前combobox插件只有onclick事件,通过修改combobox.xml增加onover与onout两个鼠标事件。
1 2 3 4 5 6 7 8 9 |
<!-- static example --> <combobox name="cbsettings" design="vtour" align="righttop" x="10" y="10" onchange="selectItemByName(0);" > <item name="item0" caption="Normal View" onclick="skin_view_normal();" onover="trace(name);" onout="trace(1);" /> <item name="item1" caption="Fisheye View" onclick="skin_view_fisheye();" onover="trace(name);" onout="trace(2);" /> <item name="item2" caption="Stereographic View" onclick="skin_view_stereographic();" onover="trace(name);" onout="trace(3);" /> <item name="item3" caption="Architectural View" onclick="skin_view_architectural();" onover="trace(name);" onout="trace(4);" /> <item name="item4" caption="Pannini View" onclick="skin_view_pannini();" onover="trace(name);" onout="trace(5);" /> <item name="item5" caption="Little Planet View" onclick="skin_view_littleplanet();" onover="trace(name);" onout="trace(6);" /> </combobox> |
使用修改后的combobox.xml:
http://krpano360.com/wp-content/uploads/combobox.xml