jQuery-UI学习tabs

最新推荐文章于 2023-04-11 08:46:50 发布

牧梦

最新推荐文章于 2023-04-11 08:46:50 发布

阅读量882

点赞数

分类专栏： jQuery UI 文章标签： ui jquery

本文链接：https://blog.csdn.net/fengweimm/article/details/21158773

版权

jQuery UI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

tabs.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery对话框</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-ui-1.9.2/themes/base/jquery.ui.all.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-ui-1.9.2/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-ui-1.9.2/ui/jquery-ui.js"></script>
<script type="text/javascript">
	$(function(){
		$("#tabs").tabs({
			//ajaxOptions:{},		//在tab内容载入时额外需要的Ajax选项
			cache:false,		//是否缓存远程tab内容，默认为false
			event:"click",		//切换条件，也可以设为mouseover，hover
			collapsible:true,	//再次点击，可折叠选项卡
			collapsible:true,	//设置为true时将设置一个选中的tab再此被选中时执行反选操作
			fx:{ opacity: 'toggle'},	//在隐藏或者显示面板的时候开启动画
			selected:0,			//从0开始的序列值,设置第几个tab将在初始化时被选中. 设置为-1则不选中所有tab.
			beforeLoad:function(event,ui){
				//当远程加载失败时加载的函数
				ui.jqXHR.error(function(){
					ui.panel.html("暂时不能加载内容...");
				});
			},
			//这个事件在点击一个tab的时候触发
			select:function(event,ui){
				
			}
		}); 
	});
	
</script>
</head>
<body>
	<div id="tabs">
		<ul>
			<li><a href="#tabs-1">第一项</a></li>
			<li><a href="#tabs-2">第二项</a></li>
			<li><a href="ajax_test1.jsp">第三项</a></li>
		</ul>
		<div id="tabs-1">
			<p>第一项标题</p>
			<p>第一项具体内容</p>
		</div>
		<div id="tabs-2">
			<p>第二项标题</p>
			<p>第二项标题</p>
		</div>
	</div>
</body>
</html>

ajax_test1.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String result = "Ajax测试内容";
	out.print(result);
%>

牧梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录