可编辑下拉列表 - DHTML 行为

• 下载源文件 - 2.19 Kb

引言

在 Microsoft Internet Explorer 5 中引入的最令人兴奋的新功能之一是动态 HTML (DHTML) 行为。 DHTML 行为是封装页面上特定功能或行为的组件。 有两种类型的行为：元素和附加。 在本文中，我将演示附加行为，因为它们可以附加到 ASP.NET Web 控件。

下拉列表

为了本文的目的，该行为将附加到标准的 HTML Select 元素，但也可以附加到 ASP.NET DropDownList。 下拉菜单有一个值为 -2 的选项，该选项将向该行为发出信号，使其更改为文本框。

<select name="Dropdown1" id="Dropdown1" class="FormDropdown" 
       onDropdownChange="alert('Dropdown has changed!');" 
       onDropdownRefresh="alert('Dropdown has been refreshed!');">
  <option value="-1" selected>Please Select...</option>
  <option value="1">Item1</option>
  <option value="2">Item2</option>
  <option value="3">Item3</option>
  <option value="4">Item4</option>
  <option value="5">Item5</option>
  <option value="-2">Other...</option>
</select>

有两个自定义事件，“OnDropdownChange”事件在下拉菜单更改为文本框时触发，可以通过选择具有与行为的“ChangeValue”属性匹配的值的选项，或者通过调用“Change”方法来实现。 另一个是“OnDropdownRefresh”事件，当文本框更改回下拉菜单时触发；这可以通过单击刷新图标或调用“Refresh”方法来实现。

创建行为

行为本身不是在 HTML 文档中编写的，而是在具有 .htc 扩展名的自己的文件中编写，并包含在 <public:component> </public:component> 标记中。 首先要做的是添加声明，其中包括属性、事件和方法。

<public:component id="EditableDropdown" name="EditableDropdown" lightWeight="true" >

      <public:property     name="Version"          value="Editable Dropdown 1.0" />
      <public:property     name="ChangeValue"      value="-2" />
      <public:attach       event="ondocumentready" handler="Init" />
      <public:attach       event="onchange"        handler="Change" />
      <public:method       name="Refresh" /> 
      <public:method       name="Change" />
      <public:event        id="onDropdownChange"   name="ondropdownchange">
      <public:event        id="onDropdownRefresh"  name="ondropdownrefresh">

</public:component>

当文档准备就绪时，行为运行其“Init”函数，此函数仅检查行为是否附加到下拉元素。

function Init()
{
      // Check to see if attached to a dropdown list.

      if(!tagName.toLowerCase() == "select")
      {
            alert("Please attach to a dropdown list.");
            return;
      }
}

当用户更改下拉菜单时，“Change”函数运行。 在“Change”函数中，我们首先检查下拉菜单是否已经更改（如果从脚本调用“Change”函数，则可能就是这种情况），然后我们检查下拉菜单的值是否与“ChangeValue”属性相同，在这种情况下为 -2。

function Change()
{
      // Has the element already changed?

      if(changed) return;
      // Check to see if we need to change the dropdown list.

      if(value != ChangeValue)return;
      
      // Create the textbox that will replace the dropdown list.

      // The id and name are the same as the dropdowns with a "_txt" suffix.

      var txtElem = winDoc.createElement("<input type='text' id='"+ 
                    id +"_txt' name='" + name + 
                    "_txt' value='' class='FormTextbox' style='width:" 
                    + (style.width - 15) + "px'>");
      parentElement.appendChild(txtElem);
      
      // Create the refresh image and insert.

      var imgElem = winDoc.createElement("<img src='Refresh.gif'" + 
          " width='15' height='13' border='0' onclick='"+ id + 
          ".Refresh();') style='cursor:hand' id='"+ id +"_img'>");
      txtElem.parentElement.appendChild(imgElem);     
 
      // Hide the dropdown list and set the "changed" property to true.

      style.display = "none";
      changed = true;
 
      // Set the focus to the new textbox.

      txtElem.focus();
      
      // Fire the "onDropdownChange" event.

      onDropdownChange.fire(createEventObject());     
}

然后，我们使用与下拉菜单相同的 ID 创建一个文本框，并带有“_txt”后缀和一个刷新图标。 然后，我们将它们插入到下拉菜单旁边，隐藏下拉菜单，然后触发“OnDropdownChange”事件。

附加行为

附加行为就像向 DropDownList 添加 CSS 样式一样简单。 在示例中，附加了一个名为“FormDropdown”的类。

.FormDropdown 
{
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 11px;
      width: 150px;
      behavior:url(EditableDropdown.htc);
}

正如您所看到的，我们使用 CSS 行为属性链接行为的 HTC 文件。

使用行为

该行为使用“_txt”后缀创建一个新元素。 使用 ASP.NET，我们随后可以查找新元素并将其插入数据库中。 此代码使用 C# 来检查下拉菜单是否有新值。

string newValue;
 
if(Request.Form["Dropdown1_txt"] != null)
    newValue = Request.Form["Dropdown1_txt"];

考虑因素

在创建此行为时，我必须做出某些决定，其中一些我从未有机会尝试甚至没有足够深入地思考。 该组件可以工作并且可以很好地完成它的工作，但远未完成。 以下是如果您想改进该行为可能值得考虑的一些事项。

重命名下拉菜单并将文本框命名为下拉菜单的原始名称，使用元素行为而不是附加行为，以及可能作为包装器的 ASP.NET 服务器控件。

链接和资源

• MSDN -- 行为

演示

• 演示.