惊喜----XUL Element Interface - 天堂地狱鬼－dulao5's Blog - dulao5

载入中

自定义HTML载入中...

快速链接

惊喜----XUL Element Interface [原创 2007-06-07 14:36:13]

查XUL Object Reference ，只列出了下面几种：

XUL Objects

BoxObject
BrowserBoxObject
EditorBoxObject
IFrameBoxObject
ListBoxObject
MenuBoxObject
PopupBoxObject

ScrollBoxObject
TreeBoxObject
TreeColumn
TreeColumns
TreeContentView
TreeSelection

XULCommandDispatcher
XULControllers
XULDocument
XULElement
XULTemplateBuilder
XULTreeBuilder

而XUL元素那么多，这些Object是远远不够用的了。比如下面的XUL：

<menulist id="field-sel" >

<menupopup>

<menuitem label="[null]"/>

</menupopup>

</menulist>

如果我想动态增加几个menuitem元素，那么用XUL DOM提供的API，使用createElement("menuitem") 、appendChild、setAttribute等原始API可以做到：

//先找到item的父元素——menupopup：

  var mups = mlist.getElementsByTagName("menupopup");
  var mup;
  if(!mups.length){
   mup = document.createElement("menupopup");
   mlist.appendChild(mup);
  }
  else{
   mup = mups[0];

//删除所有item:

while(mup.hasChildNodes())mup.removeChild(mup.firstChild);

//添加一个元素:
  var item = document.createElement("menuitem");
  item.setAttribute("label", "[text]");
  item.setAttribute("value", "text");
  mup.appendChild(item);

这样写很麻烦。

于是我抱着一线希望搜索“XULMenulistElement”，WOW，找到了这篇《XUL 1.0》的文档。哈哈，原来真的有XULMenulistElement接口。看：

interface XULMenuListElement : XULSelectControlElement { attribute boolean editable; attribute boolean open; attribute DOMString label; attribute DOMString crop; attribute DOMString image; // For editable menu lists only. readonly attribute XULTextBoxElement inputField; };

不过并没有提供象HTMLSelectElement那样便捷的操作，别着急，我们再看它继承的接口XULSelectControlElement ：

interface XULSelectControlElement : XULControlElement {
  attribute XULSelectControlItemElement selectedItem;
  attribute long selectedIndex;

  attribute DOMString value;
  
  XULSelectControlItemElement appendItem(DOMString label, DOMString value);
  XULSelectControlItemElement insertItemAt(long index, DOMString label, DOMString value);
  XULSelectControlItemElement removeItemAt(long index);
};

看看，这下好了，selectedIndex、appendItem、insertItemAt、removeItemAt，很方便的方法o(∩_∩)o...哈哈。

经过写代码验证，发现这些属性和方法都是有效的。当通过DOM得到一个menulist元素时，都可以使用上面interface中的属性和方法。但是很奇怪，Mozilla提供了这些接口，也将menulist元素实现了这些接口，却没有将公开这个实现类。上面的代码“<menulist id="field-sel" >”中，我alert( document.getElementById("field-sel"))打印出来的还是“ [object XULElement]”，很奇怪。

当然，这篇《XUL 1.0》文档还在建设中，有些接口还没添加进去。比如没有XULTreeElement 接口，发现这里有XULTreeElement接口的文档：

interface XULTreeElement : XULElement {
  readonly attribute NodeList selectedItems;
  readonly attribute NodeList selectedCells;
                  
  void selectItem(in XULElement treeItem);
  void selectCell(in XULElement treeCell);
                  
  void clearItemSelection();
  void clearCellSelection();
                  
  void addItemToSelection(in XULElement treeItem);
  void removeItemFromSelection(in XULElement treeItem);
                  
  void addCellToSelection(in XULElement treeCell);
  void removeCellFromSelection(in XULElement treeCell);
                  
  void toggleItemSelection(in XULElement treeItem);
  void toggleCellSelection(in XULElement treeCell);
                  
  void selectItemRange(in XULElement startItem, in XULElement endItem);
  void selectCellRange(in XULElement startItem, in XULElement endItem);
                  
  void selectAll();
  void invertSelection();
};

也许文档《The XPToolkit Architecture》也值得参考。

一些期待更齐全的文档吧。