如何用jQuery做選項卡界面

選項卡式界面是本地桌面應用較大的UI組件之一。 幸運的是, jQueryUI 使它們很容易實現。 下面是如何讓它們迅速啟動並正常運行。

HTML的基本結構如下:

<div id="tab_wrapper">
       <ul>
              <li><a href="#tab1">Tab 1</li>
              <li><a href="#tab2">Tab 2</li>
       </ul>
       <div id="tab1">
              Tab 1 content here...
       </div1>
       <div id="tab2">
              Tab 2 content here...
       </div1>
</div>

通過單一ID的div指定這些錨變成標簽,標簽的列表將會在網頁選項卡顯示。當用戶單擊鏈接時,它將選擇該選項卡。 只有短短的一行jQuery代碼可以把這個HTML轉換為選項卡式界面:

$(function() {
  $( "#tab_wrapper" ).tabs();
});

多簡潔的代碼！ 我們甚至可以實現更進一步的功能。 該文檔展示了較全功能 ,但我認為最有用的還是從外部來源加載數據。 通過使用的錨點到另一個頁面的ID,而不是屏幕上一個項目,點擊選項卡時它會自動加載資源，內容將通過AJAX加載。 演示代碼所示 ,你可以很容易地在有回退功能的服務器上處理錯誤。