Select 控件Combox加强版(IE Only)
作者:快乐笛子 来源:快乐笛子的博客 发布时间:2008-07-23 13:26:00
概述:
本控件使用 html+css+javascript模拟HTML内置的select元素,实现其部分方法与属性,也增加了一部分功能,并且从UI上超越原生select控件。本控件使用到隐藏域、文本框、隐藏框架,隐藏域保存控件的值,文本框保存选项文本,隐藏框架通过切换显示/隐藏达到菜单收展效果,并储存选项列表。
js框架:myjsFrame 源代码下载 (0.21 API 开发文档)
用法:
页面上先后引用 myJSFrame.js、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 表示第一个选项,以此类推。
onchange
可选属性。值类型为方法(function)。类似于 select 控件的 onchange 事件。可给实例绑定自定义方法,默认给方法传入实例对象。
width
可选属性。值为整型。默认值为 140。定义控件宽度。
autoComplete
可选属性。值类型为布尔类型。默认为 true。设置控件是否需要自动完成。在 readOnly 为 true 的情况下,按a-z键将会自动按字母索引下拉选项,在 readOnly 为 false 的情况下,下拉列表将按用户的输入自动加粗选项以提示。
控件基本结构:
<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......"
公用方法:
页面上创建的所有控件都会在虚拟队列里注册,公用方法入口 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的选项。
作者网站下载:combox.rar
本站下载地址:combox.rar (16.36 KB)
猜你喜欢
- 平面设计 常用尺寸 三折页广告 标准尺寸: (A4)210mm x 285mm普通宣传册 标准尺寸: (A4)210mm x 285mm文件
- 如何避免磁盘临时表因为内存储引擎不支持TEXT和BLOB数据类型, 使用到BLOB和TEXT列的查询和使用隐式临时表的查询将不得不使用MyI
- SQL Server的作业调度来建立自动备份的方法◆1、进入企业管理器中->管理->sql server代理->作业;◆2
- 今天 大白 问了一个关于CSS权重的问题:关于选择器权重的问题 。class的权重是10 标签权重是 1 。比如说 p span{} 权重是
- 我们将在下面的例子中使用这个 XML 文档。<?xml version="1.0" encod
- 对所有数据进行整合与管理当你使用SQL Server 2008企业级的数据仓库平台时,你可以高效的操纵所有数据,并对其进行统一管理存储。◆合
- ASP中转换unicode编码为GB编码方法:<% function urldecode(encodestr)
- 今天写了一个放迅雷焦点广告的效果,还请大家多多指正,先附上效果图一张:相关文章:迅雷首页新闻图片轮播效果js源码首先是JS代码部分,之前一定
- 翻译:ShiningRay简介你是否知道JavaScript其实也是一个函数式编程语言呢?本指南将教你如何利用JavaScript的函数式特
- 看一个网站其实就好比品评一个美女。一看长相,我们很多时候关注的是视觉,比如老板经常会说,你做几个页面让我看看!二看身材,也有很多关注标准和s
- SQL语句优化的原则:◆1、使用索引来更快地遍历表缺省情况下建立的索引是非群集索引,但有时它并不是最佳的。在非群集索引下,数据在物理上随机存
- 由Oralce8.1开始,Oracle增加了一个新的特性就是Stored Outlines,或者称为Plan Stability(计划稳定性
- 中文简繁体网页的转换FrontPage 2002提供了中文简繁体转换的功能。只要轻轻一点就可做出简体或繁体中文网站了。如要将当前
- 本文介绍了10个asp网页制作的常用到的技巧,有asp的也有javascript。如asp如何获取系统时间,如何取得IP,及浏览
- ASPJPEG组件是Persits出品的共享软件,试用期为30天,您可以在这里下载:http://www.persits.com/aspjp
- MySQL是一个非常流行的小型关系型数据库管理系统,2008年1月16号被Sun公司收购。目前MySQL被广泛地应用在Internet上的中
- 利用图标工具(有很多)制作图标文件(favicon.ico)上传到网站所在的服务器的根目录下,这个文件必须是16*16大小的图标文件。当然,
- MySQL中模式就是数据库SHOW DATABASES;show databases;罗列所有数据库名称CREATE DATABASE &l
- 1. 查看数据库的版本select @@version2.查看数据库所在机器操作系统参数exec master..xp_msver3. 查看
- 页面自动刷新代码大全,基本上所有要求自动刷新页面的代码都有,大家可以自由发挥做出完美的页面。 1)10表示间隔10秒刷 ...页面自动刷新代