①  輸入控制元件

 XUL 元件支援一套輸入控制組件;

      textbox (任意型別的資料) 

      intbox (只能輸入int型別,如果什麼也不輸入預設值為0) 

      datebox(選擇日期的控制元件)

      doublebox (只能輸入浮點型別的資料)

     combobox和bandbox 是特殊的輸入框,他們共享這裡的公共屬性.不常用

②  type屬性

你可以為textbox 元件指定值為password的type屬性.這樣將不會顯示使用者輸入的內容.如下

Username: <textbox/> 
Password: <textbox type="password"/> 
 

③  format屬性

通過使用format域,可以控制輸入控制元件的格式.預設為null.對於datebox,意味著 yyyy/MM/dd .而對與intbox 和 decimalbox, 則意味著根本沒有格式.

輸入資料如下

                      <div class="col-sm-4">
                            <z:datebox format="yyyy-MM-dd HH:mm"/>
                            <span class="input-group-addon">to</span>
                            <z:datebox format="yyyy-MM-dd HH:mm"/>
                        </div>
 

顯示資料如下

<z:listitem>
  <z:listcell label="${c:formatDate(each.createAt, 'yyyy-MM-dd')}"/>
</z:listitem>

④ Tabs 的 closable 屬性 

將closable屬性設定為 true，tab 會顯示關閉按鈕，這樣使用者可以通過點選按鈕來 關閉 tab 和相應的 tab 面板。一旦使用者點選了close按鈕，onClose事件會被送至 tab。此事件會由 Tab 的onClose方法來處理。然後，預設情況下，onClose方法 將 tab 本身及相應的 tab 面板移除。

      <z:tabs>
                <z:tab label="我是Tab1" closable="true" />
      </z:tabs>
      <tabpanels>     
              <tabpanel>This is panel 1</tabpanel>      
     </tabpanels>

⑤  特殊屬性 checkmark 屬性 

checkmark屬性控制是否在每個 listitem 前顯示一個 checkbox 或 radio 按鈕。 

 <z:listbox id="result" fixedLayout="true" checkmark="true" multiple="true" >
                <z:listhead>
                    <z:listheader/>
                </z:listhead>
                <z:template name="model">
                    <z:listitem onClick="@command('onClickProductSeries',this=self)" onCreate="@command('initProductSeries',this=self)">
                        <z:custom-attributes productSeries="${each}"/>
                        <z:listcell label="${w:familyLabel0(each)}">
                        </z:listcell>
                    </z:listitem>
                </z:template>
            </z:listbox>

效果為

⑥ autodrop 屬性 

預設情況下，直到使用者點選搜尋按鈕或按下Alt+DOWN時，彈出 window 才會開啟。 但是，你可以將autodrop屬性設定為true，這樣當用戶鍵入任意字元時彈出window 就會開啟。這對於初學者來說是有幫助的，但是這或許會令有經驗的使用者感到厭煩。 

⑦ onDrop 事件 

一旦使用者拖曳一個元件並將其放入可放下的另一個元件，onDrop事件會通知使用者放入 元件的元件。onDrop事件是org.zkoss.ui.event.DropEvent的一個例項。 呼叫getDragged方法，你可以獲取什麼被拖曳(及放下)了。 注意 onDrop事件的目標是可放下的元件，而不是被拖曳的元件。  下面是一個簡單的例子，允許使用者使用拖放對列表專案重新排序。 

<z:template name="model">
                        <z:listitem droppable="true" draggable="true"  onDrop="@command('move')">
                            <z:listcell  >
                                <span class="drag-icon" ></span>
                            </z:listcell>
                            <z:listcell label="${each.code}"/>
                            <z:listcell label="${w:attrLabel0(each)}"/>
                            <z:listcell>
                                <div class="btn-group" if="${hik:isAllow('/attributeGroup/edit')}">
                                    <z:button class="btn-white btn btn-xs" label="${u:l('common.button.remove')}"
                                    onClick="@command('removeAttribute',this=self)">
                                        <z:custom-attributes attribute="${each}"/>
                                    </z:button>
                                </div>
                            </z:listcell>
                        </z:listitem>
                    </z:template>

效果圖