亚洲另类小说图片,国产成人精品亚洲2020,亚洲a在线视频视频

jquery ui tabs iframe 高度寬度自適應(yīng)

<%@ 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">時(shí)間設(shè)置</a></li>
119

<li id="grant_business"><a href="#tabs-grant">崗位參數(shù)</a></li>
120

<li id="grant_resource"><a href="#tabs-grant">項(xiàng)目參數(shù)</a></li>
121

</ul>
122

<div id="tabs-grant" >
123

</div>
125

</div>
126

</body>
127

</html>
128

129

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

posted on 2013-08-06 09:44 lanjh 閱讀(5594) 評(píng)論(3) 編輯收藏所屬分類(lèi): Java Web

評(píng)論

# re: jquery ui tabs iframe 高度寬度自適應(yīng) 回復(fù) 更多評(píng)論

謝謝你的代碼很有用而且可以在DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd和 Transitional 我式了好多都不支持這的只支持不帶Transitional和strict標(biāo)準(zhǔn)的

2013-10-28 07:45 | Sn

# re: jquery ui tabs iframe 高度寬度自適應(yīng) 回復(fù) 更多評(píng)論

不過(guò) 我現(xiàn)在還不知道差了4個(gè)像素在哪里可能是2個(gè)Div的邊框吧我用border:0px去掉不行

2013-10-28 07:48 | Sn

# re: jquery ui tabs iframe 高度寬度自適應(yīng) 回復(fù) 更多評(píng)論

我現(xiàn)在做的是讓iframe可視化界面顯示隨窗口大小變動(dòng)而變的
<iframe w=100% h=100%></iframe><div position:relative><div position:fixed>內(nèi)容是浮在iframe上面</div></div> 主窗口頁(yè)面沒(méi)滾動(dòng)條的用是iframe的滾動(dòng)條現(xiàn)在就不知道怎么差了4個(gè)像素

2013-10-28 08:00 | Sn

新用戶注冊(cè) 刷新評(píng)論列表


只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問(wèn) 管理
相關(guān)文章: jquery ui tabs iframe 高度寬度自適應(yīng) svn+ant+tomcat+hudson 持續(xù)構(gòu)建WEB應(yīng)用最佳實(shí)踐 Java調(diào)用取得天氣預(yù)報(bào)WebServices js處理服務(wù)器返回的對(duì)象 JS處理list和select數(shù)據(jù)代碼 javascript小技巧手工搭建spring2.0_struts1.2.9_hibernate3.2.5集成環(huán)境采用Spring聲明式事務(wù) Hibernate編程式事務(wù) 關(guān)于Hibernate懶加載問(wèn)題的最終解決方案

# re: jquery ui tabs iframe 高度寬度自適應(yīng) 回復(fù) 更多評(píng)論

# re: jquery ui tabs iframe 高度寬度自適應(yīng) 回復(fù) 更多評(píng)論

# re: jquery ui tabs iframe 高度寬度自適應(yīng) 回復(fù) 更多評(píng)論

vjame

jquery ui tabs iframe 高度寬度自適應(yīng)

評(píng)論

導(dǎo)航

公告

常用鏈接

留言簿(5)

我參與的團(tuán)隊(duì)

隨筆分類(lèi)

隨筆檔案

文章檔案

積分與排名

最新評(píng)論

閱讀排行榜

vjame

jquery ui tabs iframe 高度 寬度自適應(yīng)

評(píng)論

# re: jquery ui tabs iframe 高度 寬度自適應(yīng) 回復(fù) 更多評(píng)論

# re: jquery ui tabs iframe 高度 寬度自適應(yīng) 回復(fù) 更多評(píng)論

# re: jquery ui tabs iframe 高度 寬度自適應(yīng) 回復(fù) 更多評(píng)論

導(dǎo)航

公告

常用鏈接

留言簿(5)

我參與的團(tuán)隊(duì)

隨筆分類(lèi)

隨筆檔案

文章檔案

積分與排名

最新評(píng)論

閱讀排行榜

jquery ui tabs iframe 高度寬度自適應(yīng)

# re: jquery ui tabs iframe 高度寬度自適應(yīng) 回復(fù) 更多評(píng)論

# re: jquery ui tabs iframe 高度寬度自適應(yīng) 回復(fù) 更多評(píng)論

# re: jquery ui tabs iframe 高度寬度自適應(yīng) 回復(fù) 更多評(píng)論