JavaScript 可折叠/可展开面板控件

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

引言

JavaScript 可折叠/可展开 面板控件 是一个跨浏览器 JavaScript 控件。

背景

坦白说，我开发这个控件的灵感来源于 Microsoft 网站。如果您浏览 Microsoft 网站，会在默认页面的右上角找到一个漂亮的 面板控件。以前它也有平滑的展开/折叠功能，但现在没有了。在我的 面板控件 中，我通过 JavaScript 动画实现了这种平滑的展开/折叠功能。

类

Panel: 这是一个 public 的跨浏览器 JavaScript 类。

构造函数

Panel Control 具有以下构造函数

• Panel(Arguments): Panel 类的构造函数接受一个 Object Literal 类型的参数。argument Object Literal 的定义如下

  var Args = {
     Base: _Base, //Base reference where ListBox to be displayed.
     HeaderText: _ HeaderText, // Header Text.
     Width: _Width, // Width of the Control.
     ClickEventHandler: _ClickEventHandler // Reference of the click event handler. 
  };

  示例

  var Args = {
     Base: document.getElementById('parent'),
     HeaderText: 'Items',
     Width: 200,
     ClickEventListener: OnClick
  };

  如果您将 argument Object Literal 的每个 Property 都赋值为 null，那么每个 property 都会获取其默认 value。

  Properties 及其默认值已在下表中列出

  属性	默认值
  Base	document.documentElement
  HeaderText	Header Text
  宽度	200
  ClickEventHandler	匿名方法

方法

Panel Control 具有以下 public 方法

• InsertItem(Text, Value): 用于插入一个 Panel Item。它接受两个参数
  • Text: Item Text
  • Value: Item Value
• GetItems(): 用于获取所有 Panel Items 的集合
• GetItem(Index): 用于获取指定 Item index 的 Panel Item。如果找不到 Item，则返回 null。它接受一个 argument
  • Index: Item Index
• RemoveItems(): 用于 delete 所有 Panel Items。返回已删除的 Items 数量
• RemoveItem(Index): 用于 delete 指定 Item index 的 Panel Item。成功删除则返回 true，否则返回 false。它接受一个 argument
  • Index: Item Index
• GetTotalItems(): 用于获取 Panel Items 的总数
• Contains(Index): 用于检查在指定的 Item index 是否存在 Panel Item。如果 Item 存在，则返回 true，否则返回 false。它接受一个 argument
  • Index: Item Index
• Dispose(): 用于销毁 Panel object

注意: Panel Item 是一个 Object Literal，其定义如下

var PItem = {
   IsSelected: _IsSelected, // true/false.
   Text: _Text, // Item Text.
   Value: _Value, // Item Value.
}; 

属性

Panel Control 只有一个 property

• Version: 用于获取 Panel Control 的当前版本

事件

Panel Control 只有一个 event

• Click: 当任何一个 Panel Item 被点击时触发

响应 click event 的 **本地匿名** 方法（即 event handler）具有以下签名

var EventHandler = function(Sender, EventArgs) {}

在这里，Sender 是引发 click event 的元素（在本例中是 Panel Item）的引用，EventArgs 是一个 Object Literal，其中包含有关 event 的必要信息。EventArgs Object Literal 的定义如下

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

使用控件

在您的网页中添加 Panel.js 文件的引用

<script type=&quot;text/javascript&quot; src=&quot;JS/Panel.js&quot;></script>

在网页中创建一个 div 元素。

<div id=&quot;parent&quot;></div>

现在，在网页的 head 部分创建一个 script 标签，并将以下代码放在 window.onload event 中，如下所示

<script type=&quot;text/javascript&quot;>
   var oPanel = null;
   window.onload = function()
   { 
       var Args = {
             Base: document.getElementById('parent'),
             HeaderText: 'Items',
            Width: 200,
            ClickEventListener: OnClick
         };
 
       oPanel = new Panel(Args); 
       oPanel.InsertItem('MSDN', 'Insert');
       oPanel.InsertItem('HotMail', 'Delete');
       oPanel.InsertItem('Yahoo', 'Update');
       oPanel.InsertItem('Gmail', 'Cancel');
       oPanel.InsertItem('Rediff', 'Truncate');
       oPanel.InsertItem('AOL', 'Select');
       oPanel.InsertItem('Hi5', 'Between');
} </script>

在上面的代码中，首先创建了一个具有必要属性的 argument Object Literal。然后实例化了 Panel Control。最后，向 Panel Object 添加了一些 Panel Items。别忘了在 argument Object Literal 中设置 click event handler，如下所示

ClickEventListener: OnClick

这里，OnClick 是 click event handler 的引用，它被创建为一个 **本地匿名** 方法

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

示例

var OnClick = function(Sender, EventArgs)
{
   var Message = new Array();
   Message.push('Text: ' + EventArgs.Text);
   Message.push('Value: ' + EventArgs.Value);

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

当您点击任何一个 Panel Item 时，上面的方法都会被调用。

在 window.onunload event 中调用 Dispose 方法以销毁 Panel Object，如下所示

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

结论

这就是我通过 JavaScript 开发 **可折叠/可展开面板控件** 所采用的方法。请报告错误、缺陷和改进此控件的建议。

浏览器兼容性

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