用js算出页面高度和点击合并

于 2010-01-23 16:01:00 发布
阅读量868 收藏
点赞数
分类专栏： js控制样式 文章标签： 任务 class stylesheet div border function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qianxiaochi/article/details/5248733
版权

/**页面js**/

<script type="text/javascript">
 $(function(){
  //计算高度
  var BHeight = $("body").height();
  $("#flow_right,.flow_line").css("height",BHeight-49);
  //计算宽度
  var BWidth = $("body").width();
  var leftWidth = parseInt(BWidth*0.48);
  var lineWidth = 12;
  var rigthWidth = BWidth - lineWidth - leftWidth - 10;
  $("#flow_right").width(rigthWidth);
  //关闭，开启右侧
  $('div.cen').find('img').eq(0).toggle(function(){
   $('div.flow_left').css('width','97%');
   $('div.flow_right').css('display','none');
   $(this).attr("src","../../css/th1/Task/image/arrow_l.jpg");
  },function(){
   $('div.flow_left').css('width','48%');
   $('div.flow_right').css('display','block');
   $(this).attr("src","../../css/th1/Task/image/arrow_r.jpg");
  });
 })
 
</script>

 

/**iframe页面js**/

 

 

<script type="text/javascript">
 window.onload = function(){
  var c = $(window.parent.document.body)
  $("#flow_right iframe",c).height($("body").height());
 }
</script>

 

 

/**做div页面遇到了一个问题，液态页面去掉顶部，底部得用百分比，不可发出现滚动条，右侧是iframe!**/

 

 

页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新建页</title>
<link href="../../css/th1/common/steps.css" rel="stylesheet" type="text/css" />
<link href="../../css/th1/common/creat.css" rel="stylesheet" type="text/css" />
<link href="../../css/th1/Task/interflow.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../js/common/jquery.js"></script>
<script type="text/javascript" src="../../js/common/button.js"></script>
<script type="text/javascript" src="../../js/common/creat.js"></script>
<script type="text/javascript" src="../../js/common/text.js"></script>
<script type="text/javascript" src="../../js/common/min.js"></script>
<script type="text/javascript">
 $(function(){
  //计算高度
  var BHeight = $("body").height();
  $("#flow_right,.flow_line").css("height",BHeight-49);
  //计算宽度
  var BWidth = $("body").width();
  var leftWidth = parseInt(BWidth*0.48);
  var lineWidth = 12;
  var rigthWidth = BWidth - lineWidth - leftWidth - 10;
  $("#flow_right").width(rigthWidth);
  //关闭，开启右侧
  $('div.cen').find('img').eq(0).toggle(function(){
   $('div.flow_left').css('width','97%');
   $('div.flow_right').css('display','none');
   $(this).attr("src","../../css/th1/Task/image/arrow_l.jpg");
  },function(){
   $('div.flow_left').css('width','48%');
   $('div.flow_right').css('display','block');
   $(this).attr("src","../../css/th1/Task/image/arrow_r.jpg");
  });
 })
 
</script>
</head>
<body>
<div class="interflow">
    <div class="arrow">系统管理<img src="../../css/th1/common/image/arrow.gif" />**管理<img src="../../css/th1/common/image/arrow.gif" />**添加</div>
    <div class="flow_left">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="creat_table">
            <tr>
                <td height="30" width="80">任务名称</td>
                <td>&nbsp;任务名称</td>
            </tr>
            <tr>
                <td height="30">任务发起人</td>
                <td>&nbsp;任务名称</td>
            </tr>
            <tr>
                <td height="30">开始时间</td>
                <td>&nbsp;20009-111-11</td>
            </tr>
            <tr>
                <td height="30">结束时间</td>
                <td>&nbsp;20009-111-11</td>
            </tr>
            <tr>
                <td height="30">重要性</td>
                <td>&nbsp;<img src="../../css/th1/Task/image/blue.gif" width="11" height="10" /></td>
            </tr>
            <tr>
                <td height="30">完成进度</td>
                <td>&nbsp;50%</td>
            </tr>
            <tr>
                <td height="30" valign="top"><div class="top_spart">任务内容</div></td>
                <td valign="top"><div class="contents">任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容</div></td>
            </tr>
            <tr>
                <td height="30" valign="top"><div class="top_spart">交流附件</div></td>
                <td valign="top"><div class="contents"><a href="#">附件一</a></div></td>
            </tr>
            <tr>
                <td height="30">是否提醒</td>
                <td><input type="checkbox" name="checkbox" value="checkbox" /></td>
            </tr>
            <tr>
                <td height="30">提醒间隔</td>
                <td>&nbsp;每
                    <input type="text" name="textfield" style="width:50px;"/>
                    <select name="select">
                        <option>小时</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td height="30"><a href="#" title="点击查看任务进度图">任务进度图</a></td>
                <td></td>
            </tr>
        </table>
        <div class="creat_button">
            <input  name="creat_bun" type="button" value="确&nbsp;定" />
            <input  name="creat_bun" type="button" value="重&nbsp;置" />
        </div>
    </div>
    <div class="flow_line">
        <div class="cen"><img src="../../css/th1/Task/image/arrow_r.jpg" title="交流区" style=" cursor:pointer"/></div>
    </div>
    <div class="flow_right" id="flow_right">
        <iframe width="98%" src="交流2.html" frameborder="0" scrolling="no"></iframe>
    </div>
</div>
</body>
</html>

iframe代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新建页</title>
<link href="../../css/th1/common/steps.css" rel="stylesheet" type="text/css" />
<link href="../../css/th1/common/creat.css" rel="stylesheet" type="text/css" />
<link href="../../css/th1/Task/interflow.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../js/common/jquery.js"></script>
<script type="text/javascript" src="../../js/common/button.js"></script>
<script type="text/javascript" src="../../js/common/creat.js"></script>
<script type="text/javascript" src="../../js/common/text.js"></script>
<script type="text/javascript">
 window.onload = function(){
  var c = $(window.parent.document.body)
  $("#flow_right iframe",c).height($("body").height());
 }
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="creat_table">
    <tr>
        <td height="30" valign="top" width="16%"><div class="top_spart">回复内容</div></td>
        <td valign="top"><textarea name="textfield2" style="width:92%;height:70px" class="creat_textarea"></textarea></td>
    </tr>
    <tr>
        <td height="30" valign="top"><a href="#" class="attach"></a></td>
        <td valign="top"><div class="contents"></div></td>
    </tr>
</table>
<div class="creat_button">
    <input  name="creat_bun" type="button" value="确&nbsp;定" />
    <input  name="creat_bun" type="button" value="重&nbsp;置" />
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="creat_table" style="margin:10px 0 0 0;">
            <tr>
                <td height="30" width="16%">回复人</td>
                <td >&nbsp;王小二</td>
            </tr>
            <tr>
                <td height="30">回复时间</td>
                <td>&nbsp;1998-11-11</td>
            </tr>
   <tr>
    <td height="30" valign="top"><div class="top_spart">交流附件</div></td>
    <td valign="top"><div class="contents"><a href="#">附件一</a></div></td>
   </tr>
            <tr>
                <td height="30" valign="top"><div class="top_spart">回复内容</div></td>
                <td valign="top"><div class="contents">任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容</div></td>
            </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="creat_table" style="margin:10px 0 0 0;">
            <tr>
                <td height="30" width="16%">回复人</td>
                <td >&nbsp;王小二</td>
            </tr>
            <tr>
                <td height="30">回复时间</td>
                <td>&nbsp;1998-11-11</td>
            </tr>
   <tr>
    <td height="30" valign="top"><div class="top_spart">交流附件</div></td>
    <td valign="top"><div class="contents"><a href="#">附件一</a></div></td>
   </tr>
            <tr>
                <td height="30" valign="top"><div class="top_spart">回复内容</div></td>
                <td valign="top"><div class="contents">任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容</div></td>
            </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="creat_table" style="margin:10px 0 0 0;">
            <tr>
                <td height="30" width="16%">回复人</td>
                <td >&nbsp;王小二</td>
            </tr>
            <tr>
                <td height="30">回复时间</td>
                <td>&nbsp;1998-11-11</td>
            </tr>
   <tr>
    <td height="30" valign="top"><div class="top_spart">交流附件</div></td>
    <td valign="top"><div class="contents"><a href="#">附件一</a></div></td>
   </tr>
            <tr>
                <td height="30" valign="top"><div class="top_spart">回复内容</div></td>
                <td valign="top"><div class="contents">任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容</div></td>
            </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="creat_table" style="margin:10px 0 0 0;">
            <tr>
                <td height="30" width="16%">回复人</td>
                <td >&nbsp;王小二</td>
            </tr>
            <tr>
                <td height="30">回复时间</td>
                <td>&nbsp;1998-11-11</td>
            </tr>
   <tr>
    <td height="30" valign="top"><div class="top_spart">交流附件</div></td>
    <td valign="top"><div class="contents"><a href="#">附件一</a></div></td>
   </tr>
            <tr>
                <td height="30" valign="top"><div class="top_spart">回复内容</div></td>
                <td valign="top"><div class="contents">任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容</div></td>
            </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="creat_table" style="margin:10px 0 0 0;">
            <tr>
                <td height="30" width="16%">回复人</td>
                <td >&nbsp;王小二</td>
            </tr>
            <tr>
                <td height="30">回复时间</td>
                <td>&nbsp;1998-11-11</td>
            </tr>
   <tr>
    <td height="30" valign="top"><div class="top_spart">交流附件</div></td>
    <td valign="top"><div class="contents"><a href="#">附件一</a></div></td>
   </tr>
            <tr>
                <td height="30" valign="top"><div class="top_spart">回复内容</div></td>
                <td valign="top"><div class="contents">任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容</div></td>
            </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="creat_table" style="margin:10px 0 0 0;">
            <tr>
                <td height="30" width="16%">回复人</td>
                <td >&nbsp;王小二</td>
            </tr>
            <tr>
                <td height="30">回复时间</td>
                <td>&nbsp;1998-11-11</td>
            </tr>
   <tr>
    <td height="30" valign="top"><div class="top_spart">交流附件</div></td>
    <td valign="top"><div class="contents"><a href="#">附件一</a></div></td>
   </tr>
            <tr>
                <td height="30" valign="top"><div class="top_spart">回复内容</div></td>
                <td valign="top"><div class="contents">任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容</div></td>
            </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="creat_table" style="margin:10px 0 0 0;">
            <tr>
                <td height="30" width="16%">回复人</td>
                <td >&nbsp;王小二</td>
            </tr>
            <tr>
                <td height="30">回复时间</td>
                <td>&nbsp;1998-11-11</td>
            </tr>
   <tr>
    <td height="30" valign="top"><div class="top_spart">交流附件</div></td>
    <td valign="top"><div class="contents"><a href="#">附件一</a></div></td>
   </tr>
            <tr>
                <td height="30" valign="top"><div class="top_spart">回复内容</div></td>
                <td valign="top"><div class="contents">任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容</div></td>
            </tr>
</table>
</body>
</html>

 

 

qianxiaochi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值