javascript

位置:IT落伍者 >> javascript >> 浏览文章

如何用jQuery做选项卡界面


发布日期:2023年09月15日
 
如何用jQuery做选项卡界面

选项卡式界面是本地桌面应用较大的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加载 演示代码所示 你可以很容易地在有回退功能的服务器上处理错误

上一篇:如何使用jQuery Draggable和Droppable实现拖拽功能

下一篇:Jquery加载时从后台读取数据绑定到dropdownList