本实例通过jQuery UI的Tabs组件实现. Tabs组件的使用与dialog一样十分简单, 默认的配置即可实现最简单的tab, 通过设置更多的options可以实现更复杂的应用.
1.应用实例源代码:
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>jQuery UI - 弹出层应用实例 Dialog</title> <!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-street,start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader--> <link rel="stylesheet" type="text/css" href="<%=WebConfig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css"%>" /> <script type="text/javascript" src="<% =WebConfig.ResourceServer %>/JsLib/jquery/jquery-min-lastest.js"></script> <script src=https://www.jb51.net/article/"<% =WebConfig.ResourceServer %>/JsLib/jquery/ui/jquery-ui-all-min-lastest.js" type=https://www.jb51.net/article/"text/javascript"></script> <% if (false) {%><script src=https://www.jb51.net/article/"~/js/jquery-vsdoc-lastest.js" type=https://www.jb51.net/article/"text/javascript"></script> <% }%> <script type=https://www.jb51.net/article/"text/javascript"> /*========== 必须放在头部加载的语句块. 尽量避免使用 ==========*/ </script> <style type=https://www.jb51.net/article/"text/css"> </style> </head> <body> <!--Demo.默认Tab与Ajax Tab --> <div id=https://www.jb51.net/article/"tabs1" style=https://www.jb51.net/article/"width:300px;"> <ul> <li><a href=https://www.jb51.net/article/"#tabs1-1">One</a></li> <!-- Ajax Tab --> <li><a href=https://www.jb51.net/article/"TabData.htm">Two</a></li> <li><a href=https://www.jb51.net/article/"#tabs1-3">Three</a></li> </ul> <div id=https://www.jb51.net/article/"tabs1-1"> <p>Tab1内容</p> </div> <div id=https://www.jb51.net/article/"tabs1-3"> <p>Tab3内容</p> </div> </div> <br /> <br /> <br /> <!--Demo. 可折叠的Tab --> <div id=https://www.jb51.net/article/"tabs2" style=https://www.jb51.net/article/"width: 300px;"> <ul> <li><a href=https://www.jb51.net/article/"#tabs2-1">One</a></li> <li><a href=https://www.jb51.net/article/"#tabs2-2">Two</a></li> <li><a href=https://www.jb51.net/article/"#tabs2-3">Three</a></li> </ul> <div id=https://www.jb51.net/article/"tabs2-1"> <p>Tab1内容</p> </div> <div id=https://www.jb51.net/article/"tabs2-2"> <p>Tab2内容</p> </div> <div id=https://www.jb51.net/article/"tabs2-3"> <p>Tab3内容</p> </div> </div> <br /> <br /> <br /> <!--Demo. 鼠标滑动即切换的Tab --> <div id=https://www.jb51.net/article/"tabs3" style=https://www.jb51.net/article/"width: 300px;"> <ul> <li><a href=https://www.jb51.net/article/"#tabs3-1">One</a></li> <li><a href=https://www.jb51.net/article/"#tabs3-2">Two</a></li> <li><a href=https://www.jb51.net/article/"#tabs3-3">Three</a></li> </ul> <div id=https://www.jb51.net/article/"tabs3-1"> <p>Tab1内容</p> </div> <div id=https://www.jb51.net/article/"tabs3-2"> <p>Tab2内容</p> </div> <div id=https://www.jb51.net/article/"tabs3-3"> <p>Tab3内容</p> </div> </div> <script type=https://www.jb51.net/article/"text/javascript"> /*==========用户自定义方法==========*/ /*==========事件绑定==========*/ $(function() { }); /*==========加载时执行的语句==========*/ $(function() { //默认Tabs $("#tabs1").tabs(); //可折叠的Tabs $("#tabs2").tabs({ collapsible: true }); //鼠标滑动即切换的Tabs $("#tabs3").tabs({ event: "mouseover" }); }); </script> </body> </html>效果:
1. 默认设置的Tabs, Two标签内容使用Ajax获取