插件说明
- 名称:组合框或下拉选项卡.
- 这个插件由滚动条、文本框、layer等代码构成.
- xml版本的插件更容易编辑和修改.
- 由于是纯XML代码制作,所以同时支持HTML5 and Flash.
- 如果使用旧版的 combobox.swf / combobox.js 插件,功能是一致的,领主建议使用新版xml,因为xml可以自己修改.
语法
引入combobox.xml file(官方软件plugins目录内):
1 |
<include url="plugins/combobox.xml" /> |
在xml代码中插入combobox的定义标签:
1 2 3 4 5 |
<combobox name="box1" design="default" ...layer的其他属性也可以设置,这其实也是一个layer...> <item name="item1" caption="Item 1" onclick="..." /> <item name="item2" caption="Item 2" onclick="..." /> <item name="item3" caption="Item 3" onclick="..." /> </combobox> |
也可以通过动作动态添加combobox:
1 2 3 4 5 6 7 8 9 |
<action name="test"> addComboboxLayer(box1, default); set(layer[box1].align, 'lefttop'); set(layer[box1].x, 20); set(layer[box1].y, 20); layer[box1].addItem('Item 1', trace(Item 1 clicked) ); layer[box1].addItem('Item 2', trace(Item 2 clicked) ); layer[box1].addItem('Item 3', trace(Item 3 clicked) ); </action> |
大小与位置
- 定位方式和普通layer没有区别.
- 宽度width没有定义的话将以框内最大文本宽度为宽度.
- 高度height是全自动的不能自己设置.
插件属性和事件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
•design[字符型] 样式选项,默认是default, 也可以选择vtour,更多的样式可以自己设计(看下文自定义样式) •selecteditemindex[整型] 从0开始,默认打开时下拉框选择哪一个选项,0是第一个 •onchange[字符型] 当改变当前下拉框选项时,执行的动作 •item[数组型] 该属性供读取用,而非设置,例如读取当前下拉框有多少个下拉选项 layer[cbname].item.count •item[itemname].caption 读取或设置指定文本框的文字 •item[itemname].onclick 设置选项选择后执行的动作 |
插件动作
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 |
•addComboboxLayer(name, design*) 通过动作方式添加combobox •removeComboboxLayer(name) 移除指定combobox •layer[name].addItem(caption, onclick) 在combobox内增加layer选项和定义onclick点击后执行的动作 •layer[name].addNamedItem(name, caption, onclick) 在combobox内增加layer选项,指定各选项的name和定义onclick点击后执行的动作 •layer[name].selectItem(caption) 指定选择哪个标题的选项 •layer[name].selectItemByName(name) 指定选择哪个item的name的选项 •layer[name].removeAll() 移除全部layer •layer[name].openList() 人工展开列表 •layer[name].closeList() 人工关闭列表 |
插件样式设计 <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> |
***ps: combobox插件内,已定义了default和vtour两组样式,可以直接调用.