JavaScript 列表框控件

• 下载示例应用程序 - 4.52 KB

引言

JavaScript ListBox 控件是一个跨浏览器的 JavaScript 类。它是 HTML select 元素的一个子集，其中 size 属性值大于等于 2。

背景

您知道，在 HTML ListBox 元素（size 属性值大于等于 2 的 select 元素）中，如果您想选择多个项目，您必须在选择项目时按住 Ctrl 键。在一个项目中，一个客户希望在 ListBox 的每个项目旁边都有一个 CheckBox ，这样在选择多个项目时就不需要按住 Ctrl 键了。由于 HTML ListBox 不支持每个项目旁边都有 CheckBox ，我决定通过 JavaScript 开发自己的自定义 ListBox 控件。

构造函数

ListBox 控件具有以下构造函数：

ListBox(Arguments)：ListBox 类的构造函数接受一个 Object Literal 类型的 参数。参数 Object Literal 的定义如下：

var Arguments = {
      Base: _Base, //Base reference where ListBox to be displayed.
      Rows: _Rows, //No. of visible items.
      Width: _Width, // Width of the ListBox.
      NormalItemColor: _NormalItemColor, // Normal item color.
      NormalItemBackColor: _NormalItemBackColor, // Normal item back color.
      AlternateItemColor: _AlternateItemColor, // Alternate item color.
      AlternateItemBackColor: _AlternateItemBackColor, // Alternate item back color.
      SelectedItemColor: _SelectedItemColor, // Selected item color.
      SelectedIItemBackColor: _SelectedIItemBackColor, // SelectedI item back color.
      HoverItemColor: _HoverItemColor, // Hover item color.
      HoverItemBackColor: _HoverItemBackColor, // Hover item back color.
      HoverBorderdColor: _HoverBorderdColor, // Hover bordered color.
      ClickEventHandler: _ClickEventHandler // Reference of the click event handler. 
 };

示例

var Arguments = {
            Base: document.getElementById('base'),
            Rows: 6,
            Width: 300,
            NormalItemColor: 'Black',
            NormalItemBackColor: '#ffffff',
            AlternateItemColor: 'Black',
            AlternateItemBackColor: '#E0E0E0',
            SelectedItemColor: '#ffffff',
            SelectedIItemBackColor: '#E6A301',
            HoverItemColor: '#ffffff',
            HoverItemBackColor: '#2259D7',
            HoverBorderdColor: 'orange',
            ClickEventHandler: CheckBoxOnClick
        };

您可以将 参数 Object Literal 的每个属性设置为 null。在这种情况下，每个 属性 将获取其默认值：

var Arguments = {
            Base: null,
            Rows: null,
            Width: null,
            NormalItemColor: null,
            NormalItemBackColor: null,
            AlternateItemColor: null,
            AlternateItemBackColor: null,
            SelectedItemColor: null,
            SelectedIItemBackColor: null,
            HoverItemColor: null,
            HoverItemBackColor: null,
            HoverBorderdColor: null,
            ClickEventHandler: null
        };

属性及其默认值已制成表格如下：

属性	默认值
Base	document.documentElement
Rows	6
宽度	300
NormalItemColor	'Black'
NormalItemBackColor	'#ffffff'
AlternateItemColor	'Black'
AlternateItemBackColor	'#E0E0E0'
SelectedItemColor	'#ffffff'
SelectedIItemBackColor	'#E6A301'
HoverItemColor	'#ffffff'
HoverItemBackColor	'#2259D7'
HoverBorderdColor	'orange'
ClickEventHandler	匿名方法

方法

ListBox 控件具有以下 public 方法：

• AddItem(Text, Value)：用于添加 ListBox 项目。它接受两个 参数：
• Text：项目的 文本
• Value：项目的 值
• GetItems()：用于获取所有 LBItem（ListBox 项目）的 集合。
• GetItem(Index)：用于在给定的 项目 索引处获取一个 LBItem（ListBox 项目）。如果 项目 未找到，则返回 null。它接受一个 参数：
• Index：项目的 索引。
• DeleteItems()：用于删除所有 ListBox 项目。返回已删除项目的数量。
• DeleteItem(Index)：用于删除在给定项目索引处的 ListBox 项目。成功删除时返回 true，否则返回 false。它接受一个 参数：
• Index：项目的 索引。
• GetTotalItems()：用于获取 ListBox 项目的总数。
• Contains(Index)：用于检查在给定的项目索引处是否存在 ListBox 项目。如果项目存在，则返回 true，否则返回 false。它接受一个 参数：
• Index：项目的 索引。
• Dispose()：用于销毁 ListBox 对象。

注意： LBItem 是一个 Object Literal ，其定义如下：

var LBItem = {
   IsSelected: _IsSelected, // true/false.
   Text: _Text, // Item Text.
   Value: _Value, // Item Value.
   ItemIndex: _ItemIndex // Item Index.
}; 

属性

ListBox 控件只有一个 属性：

• Version: 用于获取 ListBox 控件的当前版本。

事件

ListBox 控件只有一个 事件：

• Click: 当任何一个项目 CheckBox 被点击时触发。

响应 click 事件 的 本地匿名 方法（即 事件 处理器）具有以下签名：

 var EventHandlerName = function(Sender, EventArgs) {}

在此，Sender 是触发 click 事件 的元素（在此情况下为项目 CheckBox）的引用，而 EventArgs 是一个 Object Literal ，其中包含关于 事件 的必要信息。EventArgs Object Literal 的定义如下：

var EventArgs = {
    Text: _Text, // Item Text.
    Value: _Value, // Item Value.
    ItemIndex: _ItemIndex // Item Index.
}; 

使用控件

将 ListBox.js 文件的引用添加到您的网页中，如下所示：

<script type="text/javascript" src="JS/ ListBox.js"></script>

在网页中创建一个 div 元素，如下所示：

<div id="base"></div>

现在，在网页的 head 部分创建一个 script 标签，并将以下代码放入 window.onload 事件 中：

<script type="text/javascript">
    var oListBox;
    window.onload = function()
    {        
        var Arguments = {
            Base: document.getElementById('base'),
            Rows: 3,
            Width: 300,
            NormalItemColor: null,
            NormalItemBackColor: null,
            AlternateItemColor: null,
            AlternateItemBackColor: null,
            SelectedItemColor: null,
            SelectedIItemBackColor: null,
            HoverItemColor: null,
            HoverItemBackColor: null,
            HoverBorderdColor: null,
            ClickEventHandler: OnClick
        };
        
        oListBox = new ListBox(Arguments); 

        oListBox.AddItem('CodeProject.com','https://codeproject.org.cn');
        oListBox.AddItem('yahoo.com','http://www.yahoo.com/');
        oListBox.AddItem
		('microsoft.com','http://www.microsoft.com/en/us/default.aspx');
        oListBox.AddItem('asp.net','http://www.asp.net');
        oListBox.AddItem('cricinfo.com','http://www.cricinfo.com/');
        oListBox.AddItem('AOL','http://www.aol.com/');
        oListBox.AddItem('STPL','http://stpl.biz');
    }
</script>

在上面的代码中，首先创建了一个带有必要属性的 Object Literal 参数。然后使用 new 关键字实例化 ListBox。最后，将不同的 ListBox 项目添加到 ListBox Object 中。别忘了在 参数 Object Literal 中进行 click 事件 的绑定：

ClickEventListener: OnClick

其中 OnClick 是 click 事件 处理程序的引用，该处理程序被创建为一个 本地匿名 方法。

var OnClick = function(Sender, EventArgs)
{
    //Code 
} 

示例

var OnClick = function(Sender, EventArgs)
{
    var Message = new Array();

    Message.push('IsSelected: ' + Sender.checked.toString());
    Message.push('Text: ' + EventArgs.Text);
    Message.push('Value: ' + EventArgs.Value);
    Message.push('Index: ' + EventArgs.ItemIndex);

    document.getElementById('DivMessage').innerHTML = Message.join('<br />');
}

当您 点击 ListBox 控件的任何一个项目 CheckBox 时，将调用此方法。

在 window.onunload 事件 中调用 Dispose 方法以销毁 ListBox Object，如下所示：

window.onunload = function(){oListBox.Dispose(); }

结论

这就是我开发自定义 JavaScript ListBox 控件的方法。尽管它只是现有 HTML ListBox 元素的一个子集，但它比现有元素更用户友好。它可以根据不同的需求进一步定制。请随时告知我有关错误和/或问题，并提出改进此 ListBox 控件的建议。

浏览器兼容性

我已在多个 Web 浏览器上测试过此控件。