`

jQuery使用iframe做tab标签

 
阅读更多
jQuery Tab插件 http://jqueryui.com/tabs/#default


Jquery、tabs、iframe相结合 http://blog.sina.com.cn/s/blog_656977f401014oy6.html
使用Jquery中的ui.tabs.js，如果tab中的界面有按钮需要跳转到新的页面时，整个页面会跳转，为了使界
面在tab内部跳转，可以在tab中使用iframe将页面加载。代码如下： 
<div id="expenseTabs" style="width: 98%; background: #cadbe7;">
<ul>
 <li><a id="noTravelExpenseTab" href="#noTravelExpenseDiv"><nobr>非差旅报销</nobr></a>
 </li>
 <li><a id="travelExpenseTab" href="#travelExpenseDiv"><nobr>差旅报销</nobr></a>
 </li>
</ul>
<div id="noTravelExpenseDiv">
 <iframe id="noTravelExpenseFrame"
  src="${contextPath}/expense/noTravelExpenseAction.do" width="100%"
  frameborder="0" marginheight="0" marginwidth="0">
 </iframe>
</div>
<div id="travelExpenseDiv">
 <iframe id="travelExpenseFrame"
  src="${contextPath}/expense/travelExpenseAction.do" width="100%"
  frameborder="0" marginheight="0" marginwidth="0">
 </iframe>
</div>
</div>
<script language="javascript">
 $(function() {
  $('#expenseTabs').tabs({
  cookie: {
   // store cookie for a day, without, it would be a session cookie
   expires: 1
  },
  select:function(event,ui) {
   $('#expenseTabs').tabs("url",ui.index, "");
  }
 });
  $("table tr:nth-child(odd)").addClass("striped");     
 });
 </script>

此时，iframe会出现纵向滚动条，是因为其高度所致。我们可以再加一段代码来设置它的高度。 
<script type="text/javascript">
 var noTravelExpenseFrame = document.getElementByIdx_x("noTravelExpenseFrame");
 noTravelExpenseFrame.height = document.body.clientHeight;
 var travelExpenseFrame = document.getElementByIdx_x("travelExpenseFrame");
 travelExpenseFrame.height = document.body.clientHeight;
</script>

这样问题得以解决。

点击“申请报销”按钮时，跳转到另一页面，但此时页面仍在刚才的tab中，如下图所示：

当然，tab边界与iframe边界之间有背景颜色的差异，是因为iframe中src返回的jsp页面宽度不为100%引起的。样式问题可以自己调试。



jQuery Tabs + iFrame’s http://deano.me/2011/08/jquery-tabs-iframes/ 
<html>
    <head>
        <script type="text/javascript" src="data/js/jquery.js"></script>
        <script type="text/javascript" src="data/js/jquery-ui.js"></script>
        <link href="data/css/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
        <style>
            html {
                font-size:10px;
            }

            .iframetab {
                width:100%;
                height:auto;
                border:0px;
                margin:0px;
                background:url("data/iframeno.png");
                position:relative;
                top:-13px;
            }

            .ui-tabs-panel {
                padding:5px !important;
            }

            .openout {
                float:right;
                position:relative;
                top:-28px;
                left:-5px;
            }
        </style>
        <script>
            $(document).ready(function() {
                var $tabs = $('#tabs').tabs();

                //get selected tab
                function getSelectedTabIndex() {
                    return $tabs.tabs('option', 'active');
                }

                //get tab contents
                beginTab = $("#tabs ul li:eq(" + getSelectedTabIndex() + ")").find("a");

                loadTabFrame($(beginTab).attr("href"),$(beginTab).attr("rel"));

                $("a.tabref").click(function() {
                    loadTabFrame($(this).attr("href"),$(this).attr("rel"));
                });

                //tab switching function
                function loadTabFrame(tab, url) {
                    if ($(tab).find("iframe").length == 0) {
                        var html = [];
                        html.push('<div class="tabIframeWrapper">');
                        html.push('<div class="openout"><a href="' + url + '"><img src="data/world.png" border="0" alt="Open" title="Remove iFrame" /></a></div><iframe class="iframetab" src="' + url + '">Load Failed?</iframe>');
                        html.push('</div>');
                        $(tab).append(html.join(""));
                        $(tab).find("iframe").height($(window).height()-80);
                    }
                    return false;
                }
            });
        </script>
    </head>
    <body>

        <div id="tabs">
            <ul>
                <li><a class="tabref" href="#tabs-1" rel="http://google.co.uk">google</a></li>
                <li><a class="tabref" href="#tabs-2" rel="http://yahoo.co.uk">yahoo</a></li>
                <li><a class="tabref" href="#tabs-3" rel="http://bing.co.uk">bing</a></li>
            </ul>
            <div id="tabs-1" class="tabMain">
            </div>

            <div id="tabs-2">
            </div>

            <div id="tabs-3">
            </div>
        </div> 

    </body>
</html>
分享到：
| CSS 的优先级机制[总结]
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics