ComBox Control Demo
API Document
概述:
本控件使用 html +css +javascript 模拟HTML 内置的select 元素,实现其部分方法与属性,也增加了一部分功能,并且从UI 上超越原生select 控件。本控件使用到隐藏域、文本框、隐藏框架,隐藏域保存控件的值,文本框保存选项文本,隐藏框架通过切换显示/隐藏达到菜单收展效果,并储存选项列表。
用法:
页面上先后引用 /Jscript/myJSFrame.js 、/Jscript/combox.js
在需要使用控件的地方加入如下代码:
var data = "张三:123456,李四:654321,赵武:456789,钱六:987654,赵七:000 ";
var t = new ComBox ( data );
t.name="demo ";
t.write();
上面示例代码共四行,且都是必需的。新创建的实例除了有name 属性与write 方法外,还有其他属性方法:
readOnly
可选属性。值类型为布尔类型。默认为 true。
selectedIndex
可选属性。值为整型。默认为 -1。预设下拉列表被选中的项目。-1 表示不选。0 表示第一个选项,以此类推。
defaultText
可选属性。值为字符串。无默认值。预设下拉列表被选中的项目。
defaultValue
可选属性。值为字符串。无默认值。预设下拉列表被选中的项目。
onchange
可选属性。值类型为方法(function)。类似于 select 控件的 onchange 事件。可给实例绑定自定义方法,默认给方法传入实例对象。
width
可选属性。值为整型。默认值为 140。定义控件宽度。
autoComplete
可选属性。值类型为布尔类型。默认为 true。设置控件是否需要自动完成。在 readOnly 为 true 的情况下,按a-z键将会自动按字母索引下拉选项,在 readOnly 为 false 的情况下,下拉列表将按用户的输入自动加粗选项以提示。
控件基本结构:
<div class="combox" style="zoom:1">
<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 (name ).options
所有选项的集合。实质是个标准的数组,每个元素是一个完整的对象,形如:{text:xxx,value:123456}
ComBox .findInstance (name ).selectedIndex
当前选中的选项序号。从0开始计算的下标值。如果所有都未被选,返回 -1。
ComBox .findInstance (name ).text
当前选中的选项文本。
ComBox .findInstance (name ).value
当前选中的选项值。
ComBox .findInstance (name ).setValue( value )
设置控件的值。该方法将查找所有选项的值,匹配的第一个选项将被选中,其余的选项处于待选状态。如果所有的选项均不匹配传入的value ,则所有选项都处于待选状态。
ComBox .findInstance (name ).setText( text )
设置控件的值。该方法将查找所有选项的文本,匹配的第一个选项将被选中,其余的选项处于待选状态。如果所有的选项均不匹配传入的text ,则所有选项都处于待选状态。
ComBox .findInstance (name ).select( n )
选中下标为 n 的选项。
ComBox .findInstance (name ).add( text , value )
增加一个选项。新选项将出现在列表的底部。
ComBox .findInstance (name ).addBefore( text , value , n )
增加一个选项。新选项将在指定的下标位置 n 前面出现。
ComBox .findInstance (name ).remove( n )
移除下标为 n 的选项。
ComBox .findInstance (name ).sort( fun )
给下拉选项排序。fun 是排序的方式,如顺序、倒序,如按客户端区域设置排序,则 fun 为 function(a,b){return a.localeCompare(b)}
另外,上面提到的所有方法都可以迭代执行,比如
ComBox.findInstance(" myName ") .
add ("
啊蔡 ","
27 ").
sort ().
select (
1 ); 表示新增一个选项后在给所有选项排序,然后选中下标为1的选项。
©happyshow.org