自定义标签 Jquery 

<!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>
    <title>自定义标签</title>
    <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var timeoutId;//定义一个全局的变量
        $(function () {
            $("#tab1 li").each(function (index) {
                var liNode = $(this); //当前的LI（tab项）
                $(this).mouseover(function () {
                    timeoutId = setTimeout(function () {//设置timeout目的在于防止快速浏览tab导致对服务器负担过重
                        $("div.contentin").removeClass("contentin"); //之前处于显示的div的样式移除
                        $("#tab1 li.tabin").removeClass("tabin"); //之前处于显示的li的样式移除
                        liNode.addClass("tabin");
                        $("div.content1").eq(index).addClass("contentin");
                    }, 300);
                }).mouseout(function () {
                    clearTimeout(timeoutId);
                });
            });
            $("#realcontent").load("TableEdit.htm");
            $("#tab2 li").each(function (index) {
                $(this).click(function () {
                    var liNode = $(this);
                    $("#tab2 li.tabin").removeClass("tabin");
                    liNode.addClass("tabin");
                    if (index == 0) {
                        $("#realcontent").load("TableEdit.htm");
                    } else if (index == 1) {

                        $("#realcontent").load("tab1.aspx");
                    } else if (index == 2) {
                        $("#realcontent").load("tab1.aspx");
                    }
                });
            });

            //对于loading图片绑定ajax请求开始和交互结束的事件
            $("#content2 img").bind("ajaxStart", function () {
                alert('a');
                //整个页面任何位置ajax交互开始都会执行
                $("#realcontent").html("");
                $(this).show();
            }).bind("ajaxStop", function () {
                alert('b');
                $(this).slideUp();

            });
            $("#content2 img").click(function () { alert('a'); });
        });
    </script>
    <style type="text/css">
        ul,li
        {
            list-style:none;
            margin:0;
            padding:0;
            margin-left:10px;
        }
        #tab1 li
        {
            float:left;
            background-color:#868686;
            color:White;
            padding:5px;
            margin-right:2px;
            border:1px solid white;
        }
        #tab1 li.tabin
        {
            background-color:#6E6E6E;
            border:1px solid #6E6E6E;
            
        }
        div.content1
        {
            clear:left;
            background-color:#6E6E6E;
            width:300px;
            height:100px;
            padding:10px;
            display:none;
            margin-left:20px;
        }
        div.contentin
        {
            display:block;
            color:White;
        }
        #tab2 li
        {
            float:left;
            background-color:white;
            color:blue;
            padding:5px;
            margin-right:2px;
            cursor:pointer;
         }
         #content2
         {
             width:500px;
             height:300px;
             padding:10px;
             background-color:#F2F6FB;
             clear:left;
             border:1px solid black;
              margin-left:20px;
              position:relative;
              top:-1px; /*将div整个往上移动1px 注意要设置position才有效果*/
         }
         #tab2 li.tabin
         {
             background-color:#F2F6FB;
             border:1px solid black;
             border-bottom:0;/*去掉标签的下边框*/
             z-index:101;
             position:relative;/*设置z-index的话一定要设置position*/
         }
         img
         {
           display:none;
         }
    </style>
</head>
<body>
    <ul id="tab1">
        <li class="tabin">标签1</li>
        <li>标签2</li>
        <li>标签3</li>
    </ul>
    <div class="contentin content1">我是内容1</div>
    <div class="content1">我是内容2</div>
    <div class="content1">我是内容3</div>
    <br />
    <br />
    <br />
    <ul id="tab2">
        <li class ="tabin">装入完整页面</li>
        <li>装入部分页面</li>
        <li>从远程获取数据</li>
    </ul>
    <div id="content2">
        <img src="../images/img-loading.gif" alt="加载中..."/>
        <div id ="realcontent"></div>
    </div>
</body>
</html>

 

posted on 2013-10-04 12:58  鱼东鱼  阅读(696)  评论(0)  编辑  收藏  举报

导航