熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

如何用jQuery做選項卡界面

2013-11-15 11:58:32  來源: JSP教程 

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

  HTML的基本結構如下:

  <div id="tab_wrapper"> <ul> <li><a href="#tab">Tab </li> <li><a href="#tab">Tab </li> </ul> <div id="tab"> Tab content here </div> <div id="tab"> Tab content here </div> </div>

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

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

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


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20004.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.