比如我们可以在事件中做验证:
$(
'#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组件的官方文档:
七. 手风琴菜单
使用jQuery UI的accordion组件可以实现手风琴菜单. 效果见下图.
accordion文档地址:
1.实例效果
2.实例代码
<%@ 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 - 手风琴菜单应用实例 Accordion
</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">
body
{
font-size: 12px;
}
</style>
</head>
<body>
<!-- Demo. 默认配置的Accordion菜单 -->
<div style=https://www.jb51.net/article/
"width: 300px; float:left; margin-left:20px;">
<div id=https://www.jb51.net/article/
"accordion1">
<h3><a href=https://www.jb51.net/article/
"#">菜单1</a></h3>
<div>
菜单1的内容<br />
菜单1的内容<br />
菜单1的内容<br />
菜单1的内容<br />
菜单1的内容<br />
菜单1的内容<br />
菜单1的内容<br />
</div>
<h3><a href=https://www.jb51.net/article/
"#">菜单2</a></h3>
<div>
菜单2的内容
</div>
<h3><a href=https://www.jb51.net/article/
"#">菜单3</a></h3>
<div>
菜单3的内容
</div>
</div>
</div>
<!-- Demo. 取消自动高度, 可折叠 -->
<div style=https://www.jb51.net/article/
"width: 300px; float: left; margin-left: 20px;">
<div id=https://www.jb51.net/article/
"accordion2">
<h3><a href=https://www.jb51.net/article/
"#">菜单1</a></h3>
<div>
菜单1的内容<br />
菜单1的内容<br />
菜单1的内容<br />
菜单1的内容<br />
菜单1的内容<br />
菜单1的内容<br />
菜单1的内容<br />
</div>
<h3><a href=https://www.jb51.net/article/
"#">菜单2</a></h3>
<div>
菜单2的内容
</div>
<h3><a href=https://www.jb51.net/article/
"#">菜单3</a></h3>
<div>
菜单3的内容
</div>
</div>
</div>
<!-- Demo. 鼠标滑动触发, 自定义图标 -->
<div style=https://www.jb51.net/article/
"width: 300px; float: left; margin-left: 20px;">
<div id=https://www.jb51.net/article/
"accordion3">
<h3><a href=https://www.jb51.net/article/
"#">菜单1</a></h3>
<div>
菜单1的内容<br />
菜单1的内容<br />
菜单1的内容<br />
菜单1的内容<br />
菜单1的内容<br />
菜单1的内容<br />
菜单1的内容<br />
</div>
<h3><a href=https://www.jb51.net/article/
"#">菜单2</a></h3>
<div>
菜单2的内容
</div>
<h3><a href=https://www.jb51.net/article/
"#">菜单3</a></h3>
<div>
菜单3的内容
</div>
</div>
</div>
<script type=https://www.jb51.net/article/
"text/javascript">
/*==========用户自定义方法==========*/
/*==========事件绑定==========*/
$(
function()
{
});
/*==========加载时执行的语句==========*/
$(
function()
{
//默认配置的Accordion菜单
$(
"#accordion1").accordion();
//取消自动高度, 可折叠
$(
"#accordion2").accordion({
autoHeight:
false,
collapsible:
true
});
//鼠标滑动触发, 自定义图标
$(
"#accordion3").accordion({
icons: {
header:
"ui-icon-circle-arrow-e",
headerSelected:
"ui-icon-circle-arrow-s"
},
event:
"mouseover"
});
});
</script>
</body>
</html>
3. 关键点讲解
(1) 注意高度设置过小问题
