亚洲欧美一级,国产精华一区二区三区,国产精品伦理一区二区

jquery ui tabs iframe 高度寬度自適應

<%@ 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

$(document).ready(function(){
11

var browser = navigator.appName;
13

var heightAdjust = 23;
14

var widthAdjust = 7+20;
15

// 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

$("#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

// 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

$("#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

if(flag){
51

$(this).addClass("hover");
52

$(this).siblings().removeClass("hover");
53

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

// 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

// Adjust the IFRAME height correctly in the browser window
76

$('#grant_iframe').height((ViewPortHeight() - $('#tabs_ul').height() - heightAdjust));
77

});
79

// Returns width of viewable area in the browser
81

function ViewPortWidth()
82

{
83

var width = 0;
84

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

return width;
96

}
97

// 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

</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 閱讀(5596) 評論(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

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: jquery ui tabs iframe 高度寬度自適應 svn+ant+tomcat+hudson 持續構建WEB應用最佳實踐 Java調用取得天氣預報WebServices js處理服務器返回的對象 JS處理list和select數據代碼 javascript小技巧手工搭建spring2.0_struts1.2.9_hibernate3.2.5集成環境采用Spring聲明式事務 Hibernate編程式事務關于Hibernate懶加載問題的最終解決方案

# re: jquery ui tabs iframe 高度寬度自適應回復 更多評論

# re: jquery ui tabs iframe 高度寬度自適應回復 更多評論

# re: jquery ui tabs iframe 高度寬度自適應 回復 更多評論

vjame

jquery ui tabs iframe 高度寬度自適應

評論

導航

公告

常用鏈接

留言簿(5)

我參與的團隊

隨筆分類

隨筆檔案

文章檔案

積分與排名

最新評論

閱讀排行榜

vjame

jquery ui tabs iframe 高度 寬度自適應

評論

# re: jquery ui tabs iframe 高度 寬度自適應 回復 更多評論

# re: jquery ui tabs iframe 高度 寬度自適應 回復 更多評論

# re: jquery ui tabs iframe 高度 寬度自適應 回復 更多評論

導航

公告

常用鏈接

留言簿(5)

我參與的團隊

隨筆分類

隨筆檔案

文章檔案

積分與排名

最新評論

閱讀排行榜

jquery ui tabs iframe 高度寬度自適應

# re: jquery ui tabs iframe 高度寬度自適應回復更多評論

# re: jquery ui tabs iframe 高度寬度自適應回復更多評論

# re: jquery ui tabs iframe 高度寬度自適應回復更多評論