mozilla
您的搜索结果

    XUL_教程/修改XUL界面

     

        

    DOM 提供了一系列方法来修改文档。

    创建新元素 

        你可以使用文档对象的 createElement() 方法创建新元素。它有一个参数,待创建元素的标签名。可以使用元素的 setAttribute() 方法设置属性,使用 appendChild() 方法将其加入到XUL文件之中。例如下面的例子将一个按钮加入的XUL窗口中。

    Example 1 : Source View

    <script>
    function addButton(){
      var aBox = document.getElementById("aBox");
      var button = document.createElement("button");
      button.setAttribute("label","A new Button");
      aBox.appendChild(button);
    }
    </script>
    
    <box id="aBox" width="200">
      <button label="Add" oncommand="addButton();"/>
    </box>
    

        createElement() 方法将为文档创建一个默认类型的元素。对于XUL 文档,通常会创建一个XUL元素。对于 HTML 文档会创建一个HTML元素,它会包含HTML元素的功能及方法。 createElementNS() 方法用于在不同的名空间创建元素。

         appendChild() 方法用于像一个元素添加另一个元素。有三个相关的方法: insertBefore()replaceChild()removeChild 语法如下。

    parent.appendChild(child);
    parent.insertBefore(child, referenceChild);
    parent.replaceChild(newChild, oldChild);
    parent.removeChild(child);
    

        下面是这桑函数的简单说明。

    •   insertBefore() 方法在存在的元素之前插入一个新的子节点。它可以在一些子元素之间插入元素,而不像 appendChild() 只在最后插入。
    • replaceChild() 方法移除一个旧的元素并在相同的位置插入新元素。
    • removeChild() 删除一个节点。

        注意,以上所有的方法中的 referenceChild 及 child 必须是一个已经存在的节点否则会出错。

        通常你会希望移除一个现有的节点,并把它放到其他的位置。那么你没有必要先删除它。因为一个节点在同一时间只能在一个位置,插入方法总是先将节点从当前位置删除再插入新位置。这是一个在文档中移动节点的好方法。

    拷贝节点

        可以使用 cloneNode() 方法复制节点。这方法复制现有的节点,你可以将新的节点放置到任何位置(原始节点不动),此方法带一个 boolean 型参数确定是否复制此元素的全部子节点。如果‘否’只复制此节点,不包含任何子节点。如果‘是’,将复制全部子节点。此函数会递归调用,如需复制树结构请传递true给函数,如下例。

    Example 2 : Source View

    <hbox height="400">
      <button label="Copy"
              oncommand="this.parentNode.appendChild(this.nextSibling.cloneNode(true));"/>
    
      <vbox>
        <button label="First"/>
        <button label="Second"/>
      </vbox>
    </hbox>
    

    当 Copy 按钮按下:

        注意:有些元素,如listboxmenulist 提供了一些其他的修改方法,可以使用他们来代替,下一章( next section)会讨论。

    处理基本元素

        像按钮,复选框,单选按钮这些XUL的注意元素可以通过脚本属性处理。这些属性列在 element reference 。一些公共的属性如 label, value, checkeddisabled 。可以根据需要来设定他们。

    例:标签和值特性

        这里有一个改变按钮标签的例子。

    Example 3 : Source View

    <button label="Hello" oncommand="this.label = 'Goodbye';"/>
    

        当按钮按下时label会改变。对于有标签的元素这是通用的。比如文本框。同样的可以修改 value 属性。

    Example 4 : Source View

    <button label="Add" oncommand="this.nextSibling.value += '1';"/>
    <textbox/>
    

        当按钮按下时文本框中的内容每次加 '1' 。 nextSibling 重当前元素转移到下一个元素(textbox)。 += 用于像当前值加一个值,此处把 1 加到文本的末尾。注意此时你仍可以在文本框中输入,你也可以获取现在的标签和值属性的值,如下例。

    Example 5 : Source View

    <button label="Hello" oncommand="alert(this.label);"/>
    

    标记checkbox

        Checkboxes 有 checked 属性可以是 check 或 uncheck 。很容易知道怎么样。下一个例子,当按钮按下时把checked属性取反 注意 labelvalue 属性是字符串,而 checked 属性是布尔值。

    Example 6 : Source View

    <button label="Change" oncommand="this.nextSibling.checked = !this.nextSibling.checked;"/>
    <checkbox label="Check for messages"/>
    

        单选按钮也可以用属性选中或取消,注意在一个组中一次只能选中一个,这无需手工操作。单选组的 selectedIndex属性用在这里 selectedIndex 属性用于获得被选中的单选按钮的序号,同样可改变它。

    激活或无效一个元素

        在某些情况下一些操作将不被支持,有些内容将会无效。比如,在参数选择对话框中,能选择一系列参数但只有一项允许用户改变。下面的例子创建这样的一个界面。

    Example 7 : Source View

    <script>
    function updateState(){
      var name = document.getElementById("name");
      var sindex = document.getElementById("group").selectedIndex;
      name.disabled = sindex == 0;
    }
    </script>
    
    <radiogroup id="group" onselect="updateState();">
      <radio label="Random name" selected="true"/>
      <hbox>
        <radio label="Specify a name:"/>
        <textbox id="name" value="Jim" disabled="true"/>
      </hbox>
    </radiogroup>
    

        当单选组中的一个选择事件发生时会调用updateState() 方法。这个函数用selectedIndex 属性返回当前被选中的 radio 元素。。注意hbox中的元素也被包含在单选组中。如果第一个按钮 (序0)被选中,通过设置文本框的 disabled 属性,使文本框无效,第二个按钮被选中时,文本框又被激活了。

    下一章将提供关于单选框和列表的更多信息。

    文档标签和贡献者

    标签: 
    此页面的贡献者有: ziyunfei, alzhu, teoli, Herberthb
    最后编辑者: teoli,