[摘要]这是119pr13版本更新的全新的combobox插件效果，可以自定义样式，并提供实现缩略图combobox列表的生成方法。这个h5样式的比之前使用系统默认样式的好太多了。
使用方法
1、引入新版combobox插件
|
1 |
<include url="%SWFPATH%/plugins/combobox.xml" /> |
2、插入自动缩略图的combobox代码（案例左下角效果）
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- 场景缩略图效果，动态生成代码样例，自动生成combobox形式的缩略图列表，使用caller对象定义缩略图列表图片、样式、执行动作，caller不能自己改命名，要与插件内名称对应, 样式、大小、执行动作均可以自己修改--> <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> |
3、插入经典手动的combobox代码（案例右上角效果）
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- 经典手工列表样例 --> <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> |
4、插入动态combobox代码，与上面手工效果对应，动态代码适合有规律命名的批量生成（案例中央效果）
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- 动态生成 --> <action name="rebuild_design_selection" autorun="onstart" scope="local" args="design" onchange="selectItemByName(0);"> 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> |
5、自定义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 |
<!-- 一组combobox的样式定义，包含3个样式 --> <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> |
6、combobox插件内，已定义了default和vtour两组样式，可以直接调用，例如本案例缩略图的样式就用了vtour.
