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>

效果图如下:

]H)14~`PU$(E$E{BJE_0K}C

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>

效果图:

_0)34D@HACAR(OL4~U0C7M0

posted @ 2009-09-22 23:42  sunfishlu  阅读(2422)  评论(1编辑  收藏  举报