JQueryUI(一):Tabs(第一部分)
1:首先我们先创建一个最基本的tab,它需要<ul>元素,并且每一个<li>都需要一<span>和一<a>元素,代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>A basic tab implementation</title>
<link href="../css/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../css/redmond/ui.tabs.css" />
<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../ui/ui.core.js"></script>
<script type="text/javascript" src="../ui/ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#myTabs").tabs();
});
</script>
<style type="text/css">
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 0px;}
</style>
</head>
<body>
<div id="myTabs">
<ul>
<li><a href="#0"><span>Tab 1</span></a></li>
<li><a href="#1"><span>Tab 2</span></a></li>
</ul>
<div id="0">
sun
</div>
<div id="1">
fish
</div>
</div>
</body>
</html>
效果图如下:
2:属性
2.1:ajaxOptions:当选项卡加载内容时,添加一个ajax选项。
2.2:cache:是否启用缓存,默认为false。
2.3:disabled:设置那些选项卡不能使用。
2.4:idPrefix:
2.5:event:切换选项卡的事件,默认为click。(mouseover,鼠标滑过切换)
2.6:fx:切换选项卡时的动画效果
2.7:panelTemplate
2.8:tabTemplate
2.9:selected:哪个选项卡被选中
例子:
<script type="text/javascript">
$(document).ready(function () {
var tabOpts = {
selected: 1,
fx:{
opacity:"toggle",
duration:"slow"
}
};
$("#myTabs").tabs(tabOpts);
});
</script>效果图: