ComBox Control Demo

demo: entity:






API Document


概述:

本控件使用 html+css+javascript模拟HTML内置的select元素,实现其部分方法与属性,也增加了一部分功能,并且从UI上超越原生select控件。本控件使用到隐藏域、文本框、隐藏框架,隐藏域保存控件的值,文本框保存选项文本,隐藏框架通过切换显示/隐藏达到菜单收展效果,并储存选项列表。

用法:

  1. 页面上先后引用 /Jscript/myJSFrame.js/Jscript/combox.js
  2. 在需要使用控件的地方加入如下代码:
    var data = "张三:123456,李四:654321,赵武:456789,钱六:987654,赵七:000";//数据源(数据源格式包含几种格式,详细见下面所述)
    var t = new ComBox( data );//必须。创建实例
    t.name="demo"; //必须。指定实例名称,名称必须唯一,多个同类的控件名称不同
    t.write();//必须。输出控件

上面示例代码共四行,且都是必需的。新创建的实例除了有name属性与write方法外,还有其他属性方法:

控件基本结构:

<div class="combox" style="zoom:1">隐藏域存放 value,输入框显示文本,iframe 内部 html 将在 write 方法执行时生成。
  <input type="hidden" /><input type="text" /><a href="javascript:void(0)"><img src="trigger.gif" /></a><iframe frameborder=0 src="about:blank" name=""></iframe>
</div>

数据源:

创建实例时传入的数据源可以有三种类型:对象,数组,字符串。
对象
{text:"value", text1:"value1", text2:"value2"......}
数组
["text:value", "text1:value1", "text2:value2"......]
字符串
"text:value,text1:value1,text2:value2......"
创建实例的方法 new ComBox(dataArr,splitChar,reverse) 支持3个参数,后两个可选。splitChar 指明text与value之间的分隔符号(当dataArr为数组或字符串类型时有效),reverse 设置是否需要把 text 与 value 对换。

公用方法:

页面上创建的所有控件都会在虚拟队列里注册,公用方法入口 ComBox.findInstance(name) 中的参数 name 为控件实例名称,该方法找到页面上的控件,并提供若干方法与属性,下面列出各方法与属性的完整调用形式:

另外,上面提到的所有方法都可以迭代执行,比如 ComBox.findInstance("myName").add("啊蔡","27").sort().select(1); 表示新增一个选项后在给所有选项排序,然后选中下标为1的选项。


©happyshow.org