不刷新页面, 在页面中的不同标签间切换:
本实例通过jQuery UI的Tabs组件实现. Tabs组件的使用与dialog一样十分简单, 默认的配置即可实现最简单的tab, 通过设置更多的options可以实现更复杂的应用.
1.应用实例
源代码:
<%@PageLanguage="C#"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headid="Head1"runat="server">
<title>jQueryUI-弹出层应用实例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-->
<linkrel="stylesheet"type="text/css"href="<%=WebConfig.ResourceServer+"/JsLib/jquery/themes/redmond/style.css"%>"/>
<scripttype="text/javascript"src="<%=WebConfig.ResourceServer%>/JsLib/jquery/jquery-min-lastest.js"></script>
<scriptsrc="<%=WebConfig.ResourceServer%>/JsLib/jquery/ui/jquery-ui-all-min-lastest.js"
type="text/javascript"></script>
<%if(false)
{%><scriptsrc="~/js/jquery-vsdoc-lastest.js"type="text/javascript"></script>
<%}%>
<scripttype="text/javascript">
/*==========必须放在头部加载的语句块.尽量避免使用==========*/
</script>
<styletype="text/css">
</style>
</head>
<body>
<!--Demo.默认Tab与AjaxTab-->
<divid="tabs1"style="width:300px;">
<ul>
<li><ahref="#tabs1-1">One</a></li>
<!--AjaxTab-->
<li><ahref="TabData.htm">Two</a></li>
<li><ahref="#tabs1-3">Three</a></li>
</ul>
<divid="tabs1-1">
<p>Tab1内容</p>
</div>
<divid="tabs1-3">
<p>Tab3内容</p>
</div>
</div>
<br/>
<br/>
<br/>
<!--Demo.可折叠的Tab-->
<divid="tabs2"style="width:300px;">
<ul>
<li><ahref="#tabs2-1">One</a></li>
<li><ahref="#tabs2-2">Two</a></li>
<li><ahref="#tabs2-3">Three</a></li>
</ul>
<divid="tabs2-1">
<p>Tab1内容</p>
</div>
<divid="tabs2-2">
<p>Tab2内容</p>
</div>
<divid="tabs2-3">
<p>Tab3内容</p>
</div>
</div>
<br/>
<br/>
<br/>
<!--Demo.鼠标滑动即切换的Tab-->
<divid="tabs3"style="width:300px;">
<ul>
<li><ahref="#tabs3-1">One</a></li>
<li><ahref="#tabs3-2">Two</a></li>
<li><ahref="#tabs3-3">Three</a></li>
</ul>
<divid="tabs3-1">
<p>Tab1内容</p>
</div>
<divid="tabs3-2">
<p>Tab2内容</p>
</div>
<divid="tabs3-3">
<p>Tab3内容</p>
</div>
</div>
<scripttype="text/javascript">
/*==========用户自定义方法==========*/
/*==========事件绑定==========*/
$(function()
{
});
/*==========加载时执行的语句==========*/
$(function()
{
//默认Tabs
$("#tabs1").tabs();
//可折叠的Tabs
$("#tabs2").tabs({
collapsible:true
});
//鼠标滑动即切换的Tabs
$("#tabs3").tabs({
event:"mouseover"
});
});
</script>
</body>
</html>效果:
默认设置的Tabs, Two标签内容使用Ajax获取
再折叠tab
鼠标滑动即切换的tab
2.要点讲解
(1) 注意Tabs中的HTML结构.
使用ul构建标签. 内容div一定要和标签关联, 没有关联的div将不被处理直接显示.
(2) 使用Ajax可以不指定内容容器, 但是也可以将Ajax内容放入指定容器中.
<li><a href="hello/world.html" title="Todo Overview"> ... </a></li> <div id="Todo_Overview"> ... </div>
(3) 活用事件
tab有很多事件:
select, load, show, add, remove, enable, disable
使用这些事件可以完成很多复杂任务. 需要注意事件的签名:
$('#example').bind('tabsselect', function(event, ui) {
// Objects available in the function context:
ui.tab // anchor element of the selected (clicked) tab
ui.panel // element, that contains the selected/clicked tab contents
ui.index // zero-based index of the selected (clicked) tab
});第一个是事件对象, 第二个ui对象是传递的额外参数, 我们可以获取tab对象, tab所在容器和tab的索引值.
比如我们可以在事件中做验证:
$('#example').tabs({
select: function(event, ui) {
var isValid = ... // form validation returning true or false
return isValid;
}
});或者当添加一个tab时立刻切换到选中状态:
var $tabs = $('#example').tabs({
add: function(event, ui) {
$tabs.tabs('select', '#' + ui.panel.id);
}
});活学活用, 更多应用大家也可以参见tab组件的官方文档:
