可以在下面的地址查看各个主题的效果:
http://jqueryui.com/themeroller/#themeGallery
六.Tab标签
不刷新页面, 在页面中的不同标签间切换:
本实例通过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%20+”/JsLib/jquery/themes/redmond/style.css”%>” />
<script type=”text/javascript” src=”<%%20=WebConfig.ResourceServer%20%>/JsLib/jquery/jquery-min-lastest.js”></script>
<script src=”<%%20=WebConfig.ResourceServer%20%>/JsLib/jquery/ui/jquery-ui-all-min-lastest.js”
type=”text/javascript”></script>
<% if (false)
{%><script src=”~/js/jquery-vsdoc-lastest.js” type=”text/javascript”></script>
<% }%>
<script type=”text/javascript”>
/*========== 必须放在头部加载的语句块. 尽量避免使用 ==========*/
</script>
<style type=”text/css”>
</style>
</head>
<body>
<!–Demo.默认Tab与Ajax Tab –>
<div id=”tabs1″ style=”width:300px;”>
<ul>
<li><a href=”#tabs1-1″>One</a></li>
<!– Ajax Tab –>
<li><a href=”TabData.htm”>Two</a></li>
<li><a href=”#tabs1-3″>Three</a></li>
</ul>
<div id=”tabs1-1″>
<p>Tab1内容</p>
</div>
<div id=”tabs1-3″>
<p>Tab3内容</p>
</div>
</div>
<br />
<br />
<br />
