Select 控件Combox加强版(IE Only)

作者:快乐笛子 来源:快乐笛子的博客 时间:2008-07-23 13:26:00 

概述:

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

js框架:myjsFrame 源代码下载 (0.21 API 开发文档)

MyJSFrame API 开发帮助文档

用法:

  1. 页面上先后引用 myJSFrame.jscombox.js

  2. 在需要使用控件的地方加入如下代码: 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)

 

标签:select,控件,myjsFrame
0
投稿

猜你喜欢

  • Mootools 1.2教程(14)——定时器和哈希简介

    2008-12-08 12:50:00
  • asp如何实现网上考试功能?

    2010-05-24 18:32:00
  • ASP 错误代码

    2009-05-11 12:38:00
  • asp中获取当前月份距离以前某个时间的月份数

    2012-11-30 20:29:40
  • *.HTC 文件的简单介绍

    2008-11-24 17:36:00
  • 一个向上滚动代码

    2010-02-10 12:29:00
  • SQL中自己创建函数 分割字符串

    2008-11-20 16:13:00
  • 从Web查询数据库之PHP与MySQL篇

    2009-09-19 16:58:00
  • SQL优化基础 使用索引(一个小例子)

    2012-01-29 18:29:26
  • W3C Group的JavaScript1.8新特性介绍

    2009-07-24 12:31:00
  • css reset中的list-style:none

    2010-05-26 13:56:00
  • 正则表达式不匹配某个字符串

    2010-03-02 22:08:00
  • 初探MS SQL CE+Codesmith

    2009-05-11 09:03:00
  • js倒记时代码,自定义时间改变时间,日期到时事件,日期格式。

    2010-08-08 08:51:00
  • Response.Flush的用法

    2010-04-08 12:54:00
  • 将SQL 2000日志迁移到SQL Server 2008

    2009-03-25 16:20:00
  • js取得当前鼠标的X,Y坐标

    2007-09-27 19:52:00
  • asp fso创建与删除文件与文件夹

    2008-12-31 16:07:00
  • SQL SERVER 与ACCESS、EXCEL的数据转换方法分享

    2012-02-25 20:17:22
  • 条件注释使用指南[译]

    2009-03-23 17:41:00
  • asp之家 网络编程 m.aspxhome.com