首页 > Web开发 > 详细

jquery ui tab跳转

时间:2015-03-14 23:13:32      阅读:424      评论:0      收藏:0      [点我收藏+]

1、tabs_iframe.jsp

<%-- 
    Document   : tabs
    Created on : 2015-2-28, 14:44:02
    Author     : liyulin lyl010991@126.com
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>tabs demo</title>
        <link href="/JqueryDemo/js/jquery-ui-1.11.4.custom/jquery-ui.css" rel="stylesheet">
        <script src="/JqueryDemo/js/jquery-ui-1.11.4.custom/external/jquery/jquery.js"></script>
        <script src="/JqueryDemo/js/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
        <script>
            function WindowSize(inSize) {
                var myWidth = 0, myHeight = 0;
                if( typeof( window.innerWidth ) == 'number' ) {
                    //Non-IE
                    myWidth = window.innerWidth;
                    myHeight = window.innerHeight;
            
                } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
                    //IE 6+ in 'standards compliant mode'
                    myWidth = document.documentElement.clientWidth;
                    myHeight = document.documentElement.clientHeight;
                } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
                    //IE 4 compatible
                    myWidth = document.body.clientWidth;
                    myHeight = document.body.clientHeight;
                }
                inSize=(inSize=="w")?myWidth:inSize;
                inSize=(inSize=="h")?myHeight:inSize;
                return inSize;
            }
        </script>
    </head>
    <body>
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">tab-1</a></li>
                <li><a href="#tabs-2">tab-2</a></li>
                <li><a href="#tabs-3">tab-3</a></li>
            </ul>
            <iframe width="100%" style="padding:0px;" frameborder="no" id="tabs-1" src="/JqueryDemo/demo/tabs/iframe1.jsp"></iframe>
            <iframe width="100%" style="padding:0px;" frameborder="no" id="tabs-2" src="/JqueryDemo/demo/tabs/iframe2.jsp"></iframe>
            <iframe width="100%" style="padding:0px;" frameborder="no" id="tabs-3" src="/JqueryDemo/demo/tabs/iframe3.jsp"></iframe>
        </div>
    </body>
</html>
<script>
    $(function(){
        $( "#tabs" ).tabs();
    });
    function adjustX(){        
        $("#tabs-1,#tabs-2,#tabs-3").css({
            "height":WindowSize("h")-80
        });  
    }
    adjustX();
    window.onresize=adjustX;
</script>

2、iframe2.jsp

<%-- 
    Document   : iframe2
    Created on : 2015-2-28, 18:21:13
    Author     : liyulin lyl010991@126.com
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>iframe2</title>
        <style>
            div{
                text-align: center;
                margin-top: 100px;
                font-size: 30px;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div>
            iframe21111
            <button onclick="parent.$('a[href=#tabs-1]').click();">tab1</button>
            <button onclick="parent.$('a[href=#tabs-3]').click();">tab3</button>
        </div>
    </body>
</html>

总结:

1、从tab2跳转到tab1:

parent.$('a[href=#tabs-1]').click();

2、从tab2跳转到tab3:

parent.$('a[href=#tabs-3]').click();





jquery ui tab跳转

原文:http://blog.csdn.net/class_horse/article/details/44264515

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!