vjame

优化代码是无止境的
随笔 - 65, 文章 - 9, 评论 - 26, 引用 - 0
数据加载中……

jquery ui tabs iframe 高度 宽度自适应

  1<%@ page contentType="text/html; charset=UTF-8" language="java" %>
  2<%@ taglib prefix="s" uri="/struts-tags" %>
  3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4<html xmlns="http://www.w3.org/1999/xhtml">
  5<head>
  6<title>temp_title</title>
  7    <%@ include file="/ui/common.jsp"%>
  8    <%@ include file="/ui/components/jquery-ui/jquery-uiHead.jsp"%>
  9    <script type="text/javascript">
 10     $(document).ready(function(){
 11         
 12         var browser = navigator.appName;
 13         var heightAdjust = 23;
 14         var widthAdjust = 7+20;
 15         
 16         // Make height and width offset adjusts for non-IE browsers 
 17         if (browser != "Microsoft Internet Explorer")
 18         {
 19             heightAdjust = 18;
 20             widthAdjust = 9+20;
 21         }
 22     
 23        $("#tabs").tabs({
 24            cache: true, // This ensures selecting a tab does not refresh the page
 25            load: function(event, ui)
 26            {
 27               // Keep links, form submissions, etc. contained within the tab
 28               //$(ui.panel).hijack();
 29               
 30               // Adjust the IFRAME size correctly in the browser window
 31               $('.contentsIframe').width((ViewPortWidth() - widthAdjust));
 32               $('.contentsIframe').height((ViewPortHeight() - $('#tabs_ul').height() - heightAdjust));
 33            }
 34        });
 35        
 36        $("#tabs_ul li").click(function(){
 37            var flag = false;
 38            var tabId = $(this).attr("id");
 39            var selectedItems = $("#tabs_ul li.selected");
 40            if(selectedItems.length > 0){
 41                var selectedItemId = selectedItems[0].id;
 42                if(tabId != selectedItemId){ // 尚未选中
 43                    flag = true;
 44                }
 45            } else {
 46                flag = true;
 47            }
 48            
 49            
 50            if(flag){
 51                $(this).addClass("hover");
 52                $(this).siblings().removeClass("hover");
 53                
 54                var url = "";
 55                if(tabId == "grant_menu"){
 56                    url = temp_ur1l;
 57                } else if(tabId == "grant_business"){
 58                    url = temp_ur12;
 59                } else if(tabId == "grant_resource"){
 60                    url = temp_ur13;
 61                }else{
 62                    return;
 63                }
 64                $("#grant_iframe").attr("src", url);
 65            }
 66        });
 67        $("#tabs_ul li")[0].click();
 68        
 69        // Adjust tab header width and visible iframe window height and width after the window is resized
 70        $(window).resize(function(){
 71            $('#grant_iframe').width((ViewPortWidth() - widthAdjust));
 72            $('#grant_iframe').height((ViewPortHeight() - $('#tabs_ul').height() - heightAdjust));
 73        });
 74        
 75        // Adjust the IFRAME height correctly in the browser window
 76        $('#grant_iframe').height((ViewPortHeight() - $('#tabs_ul').height() - heightAdjust));
 77        
 78    });
 79    
 80    // Returns width of viewable area in the browser
 81    function ViewPortWidth()
 82    {
 83        var width = 0;
 84
 85        if ((document.documentElement) && (document.documentElement.clientWidth)) {
 86            width = document.documentElement.clientWidth;
 87        }
 88        else if ((document.body) && (document.body.clientWidth)) {
 89            width = document.body.clientWidth;
 90        }
 91        else if (window.innerWidth) {
 92            width = window.innerWidth;
 93        }
 94
 95        return width;
 96    }
 97
 98    // Returns height of viewable area in the browser
 99    function ViewPortHeight()
100    {
101        var height = 0;
102
103        if (window.innerHeight) {
104            height = window.innerHeight;
105        }
106        else if ((document.documentElement) && (document.documentElement.clientHeight)) {
107            height = document.documentElement.clientHeight;
108        }
109
110        return height;
111    }
112    
113    </script>
114  </head>
115  <body style="margin:0; overflow:hidden;">
116    <div id="tabs">
117        <ul id="tabs_ul">
118            <li id="grant_menu"><a href="#tabs-grant">时间设置</a></li>
119            <li id="grant_business"><a href="#tabs-grant">岗位参数</a></li>
120            <li id="grant_resource"><a href="#tabs-grant">项目参数</a></li>
121        </ul>
122        <div id="tabs-grant" >
123            <iframe id="grant_iframe" src="" frameborder="0" style="height:100%; width:100%; marginwidth:0; marginheight:0; scrolling:auto" ></iframe>
124        </div>
125    </div>
126  </body>
127</html>
128
129




1、引用jquery-ui
2、设置body样式margin:0; overflow:hidden;
3、设置iframe样式 height:100%; width:100%; marginwidth:0; marginheight:0; scrolling:auto
4、设置窗体resize方法，以及高度的初始化值


posted on 2013-08-06 09:44 lanjh 阅读(5582) 评论(3)  编辑  收藏 所属分类: Java Web

评论

# re: jquery ui tabs iframe 高度 宽度自适应  回复  更多评论   

谢谢 你的代码很有用 而且可以在DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd和 Transitional 我式了好多 都不支持 这的 只支持不带Transitional和strict标准的
2013-10-28 07:45 | Sn

# re: jquery ui tabs iframe 高度 宽度自适应  回复  更多评论   

不过 我现在 还不知道差了4个像素在哪里 可能是2个Div的边框吧 我用border:0px去掉不行
2013-10-28 07:48 | Sn

# re: jquery ui tabs iframe 高度 宽度自适应  回复  更多评论   

我现在做的是让iframe可视化界面显示随窗口大小变动而变的
<iframe w=100% h=100%></iframe><div position:relative><div position:fixed>内容是浮在iframe上面</div></div> 主窗口页面没滚动条的用是iframe的滚动条 现在就不知道怎么差了4个像素
2013-10-28 08:00 | Sn

只有注册用户登录后才能发表评论。
网站导航: