进阶教程（9）- 添加组合框combobox

combobox是krpano一个非常常见的组件，它是我们在网页常见的组合框，你可以利用组合框来实现场景导航或者功能分类、缩略图分组等功能。在官网案例有一个自动添加所有场景到一个combobox的案例，不过这个案例没有和cofu skin结合，本次课程我们就是把combobox和默认漫游ui结合。

首先，combobox的位置是examples/virtual-tours/scenes-with-combobox/

在线预览地址（手机可看，为HTML5样式）是

http://www.krpano.com/examples/117/examples/virtual-tours/scenes-with-combobox/scenes-with-combobox.html

在我们来看源代码是怎么一回事之前，你要确保你的plugins文件夹已经有了combobox.js和combobox.swf，

1. <krpano
   onstart="loadscene(0);">
2. <!--
   combobox 插件 -->
3. <plugin
   name="box"
   keep="true"
4. url="%SWFPATH%/plugins/combobox.swf"
5. alturl="%SWFPATH%/plugins/combobox.js"
   native="false"
6. align="leftbottom"
   x="10"
   y="10"
7. onloaded="fill_with_scenes();"
8. />
9. <!--
   自动填充combobox的一个action -->
10. <action
    name="fill_with_scenes">
11. for(set(i,0), i LT scene.count, inc(i),
12. txtadd(itemcall, ‘loadscene(‘,get(scene[get(i)].name),‘,null,MERGE,BLEND(1));‘);
13. addIdItem(get(scene[get(i)].name), get(scene[get(i)].title), get(itemcall));
14. );
15. </action>
16. <!--场景改变时更新combobox中场景名称的action
    -->
17. <action
    name="select_box_item">
18. if(plugin[box].loaded,
19. plugin[box].selectIdItem(%1);
20. ,
21. delayedcall(0.1, select_box_item(%1));
22. );
23. </action>
24. <!--
    热点的style-->
25. <style
    name="hotspotstyle"
    scale="0.6"
    zoom="true"
    alpha="0.3"
    onover="tween(alpha,1);tween(scale,1);"
    onout="tween(alpha,0.3);tween(scale,0.6);"
    ondown="onover();"
    onup="onout();"
    />
26. <!--
    场景，在onstart时执行select_box_item -->
27. <scene
    name="scene1"
    title="Scene
    1"
    onstart="select_box_item(scene1);">
28. <view
    hlookat="-15"
    vlookat="-10"
    fov="90"
    />
29. <preview
    url="pano1.jpg"
    />
30. <image>
31. <cubestrip
    url="pano1.jpg"
    />
32. </image>
33. <hotspot
    name="spot2"
    style="hotspotstyle"
    url="spot2.png"
    ath="-42"
    atv="-12"
    onclick="looktohotspot(spot2);
    loadscene(scene2, null, MERGE, BLEND(1));"
    />
34. </scene>
35. <scene
    name="scene2"
    title="Scene
    2"
    onstart="select_box_item(scene2);">
36. <view
    hlookat="-110"
    vlookat="8"
    fov="100"
    />
37. <preview
    url="pano2.jpg"
    />
38. <image>
39. <cubestrip
    url="pano2.jpg"
    />
40. </image>
41. <hotspot
    name="spot1"
    style="hotspotstyle"
    url="spot1.png"
    ath="165"
    atv="0"
    onclick="looktohotspot(spot1);
    loadscene(scene1, null, MERGE, BLEND(1));"
    />
42. <hotspot
    name="spot3"
    style="hotspotstyle"
    url="spot3.png"
    ath="265"
    atv="0"
    onclick="looktohotspot(spot3);
    loadscene(scene3, null, MERGE, BLEND(1));"
    />
43. </scene>
44. <scene
    name="scene3"
    title="Scene
    3"
    onstart="select_box_item(scene3);">
45. <view
    hlookat="-174"
    vlookat="5"
    fov="75"
    />
46. <preview
    url="pano3.jpg"
    />
47. <image>
48. <cubestrip
    url="pano3.jpg"
    />
49. </image>
50. <hotspot
    name="spot3"
    style="hotspotstyle"
    url="spot2.png"
    ath="0"
    atv="0"
    onclick="looktohotspot(spot3);
    loadscene(scene2, null, MERGE, BLEND(1));"
    />
51. </scene>
52. </krpano>

虽说这个看着很自动化，实际上在我看来在更新combobox的时候需要手动填写第一个参数名，也就是场景名字这一点，还是挺笨的，你如果想得到的话，可以用我之前在自定义地图改造所用过的方法，利用select_box_item(get(scene[get(xml.scene)].name))
，这样就不用每次都要改一下了。当然你可以将get(scene[get(xml.scene)].name)放在action里写，以免onstart看得太臃肿。这样就是onstart=“select_box_item()”，把下面的代码拷贝到我们的tour.xml，这样在我们的左上角就会出现一个场景的组合框。

1. <!--
   combobox 插件 -->
2. <plugin
   name="box"
   keep="true"
3. url="%SWFPATH%/plugins/combobox.swf"
4. alturl="%SWFPATH%/plugins/combobox.js"
   native="false"
5. align="lefttop"
   x="10"
   y="10"
6. onloaded="fill_with_scenes();"
7. />
8. <!--
   自动填充combobox的一个action -->
9. <action
   name="fill_with_scenes">
10. for(set(i,0), i LT scene.count, inc(i),
11. txtadd(itemcall, ‘loadscene(‘,get(scene[get(i)].name),‘,null,MERGE,BLEND(1));‘);
12. addIdItem(get(scene[get(i)].name), get(scene[get(i)].title), get(itemcall));
13. );
14. </action>
15. <!--场景改变时更新combobox中场景名称的action
    -->
16. <action
    name="select_box_item">
17. if(plugin[box].loaded,
18. plugin[box].selectIdItem(get(scene[get(xml.scene)].name));
19. ,
20. delayedcall(0.1, select_box_item(get(scene[get(xml.scene)].name)));
21. );
22. </action>