窗体缩放自动改变内容宽度
代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
    <style type='text/css'>
        .table
        {
            background-color: #cccccc;
            border: 0px;
            text-align: center;
            width: 100%;
            font-size: 12px;
        }
        .table tr
        {
            background-color: #ffffff;
            height: 18px;
            line-height: 18px;
        }
        .table .bgcolor
        {
            background-color: #EFEFEF;
        }
    </style>

    <script type='text/javascript' src='jquery-1.4.2.min.jss444'></script>

    <script type='text/javascript'>
        window.onload = function(){
            loadhtml();
        }
        
        window.onresize = function(){
            var tb = $(document.frames("frameId").document.getElementById("tb_list"));
            tb.find("tr").each(function(){
                $(this).children("td").eq(1).find("span").width(tb.width()*0.67-15);
            });
            
            var tb1 = $(document.frames("frameId1").document.getElementById("tb_list1"));
            tb1.find("tr").each(function(){
                $(this).children("td").eq(0).find("span").width(tb.width()*0.33-15);
                $(this).children("td").eq(1).find("span").width(tb.width()*0.33-15);
            });
        }
        
        //初始化
        function loadhtml(){
            var par = $(document.frames("frameId").document.childNodes[0]);
            var par1 = $(document.frames("frameId1").document.childNodes[0]);
            par.children("head").html($("#loadhead").html());
            par.children("body").css({"margin":"0px"}).html($("#loadbody").html());
            
            par1.children("head").html($("#loadhead").html());
            par1.children("body").css({"margin":"0px"}).html($("#loadbody1").html());
        }
        
        function add(site,url){
            var tb = $(document.frames("frameId").document.getElementById("tb_list"));
            tb.append('<tr><td style="width:33%"><span title='+site+'>'+site+'</span></td><td style="width:67%"><span title='+url+' style="width:'+(tb.width()*0.67-15)+'">'+url+'</span></td></tr>');
        }
        
        function update(site,url){
            $(document.frames("frameId").document.getElementById("tb_list")).find("td span[innerHTML="+site+"]").parent().parent().html('<td style="width:33%"><span title='+site+'>'+site+'</span></td><td style="width:67%"><span title='+url+'>'+url+'</span></td>');
        }
        
        function del(site){
            $(document.frames("frameId").document.getElementById("tb_list")).find("td span[innerHTML="+site+"]").parent().parent().remove();
        }
        
        
    
        function add1(site,url,reason){
            var tb = $(document.frames("frameId1").document.getElementById("tb_list1"));
            tb.append('<tr><td style="width:33%"><span title='+site+' style="width:'+(tb.width()*0.33-10)+'">'+site+'</span></td><td style="width:33%"><span title='+url+' style="width:'+(tb.width()*0.33-10)+'">'+url+'</span></td><td style="width:34%"><span title='+reason+'>'+reason+'</span></td></tr>');
        }
        
        function update1(site,url,reason){
            $(document.frames("frameId1").document.getElementById("tb_list1")).find("td span[innerHTML="+site+"]").parent().parent().html('<td style="width:33%"><span title='+site+'>'+site+'</span></td><td style="width:33%"><span title='+url+'>'+url+'</span></td><td style="width:34%"><span title='+reason+'>'+reason+'</span></td>');
        }
        
        function del(site){
            $(document.frames("frameId1").document.getElementById("tb_list1")).find("td span[innerHTML="+site+"]").parent().parent().remove();
        }
    </script>

</head>
<body>
    <table class="table" cellpadding="3" cellspacing="1" align="center">
        <tr class="bgcolor">
            <td style="width: 80px" align="right">
                网站域名：
            </td>
            <td>
                <input type='text' style="width: 100%" id='txtKeyWord' />
            </td>
            <td style="width: 220px">
                <input type='button' id='btnSearch' onclick="javascript:window.external.OnBtnClick()"
                    value='查询' />&nbsp;&nbsp;<input type='button' id='btClick' onclick="javascript:window.external.OnBtnClick1()"
                        value='死链检测' />
            </td>
        </tr>
    </table>
    <br />
    <input type="button" value="add" onclick="add('11','http://wwwwwwwwwwwwww.wwwwwwwww.wwwwwwwww/www.wwwwwwwwn.bbbbbbbbbbbbb.b/bbbbbcccccccc.cccccddd.dddddd')" />
    <input type="button" value="add1" onclick="add('22','22')" />
    <input type="button" value="update" onclick="update('11','33')" />
    <input type="button" value="add" onclick="add1('11','http://wwwwwwwwwwwwww.wwwwwwwww.wwwwwwwww/www.wwwwwwwwn.bbbbbbbbbbbbb.b/bbbbbcccccccc.cccccddd.dddddd','asdf')" />
    <input type="button" value="add1" onclick="add1('22','22',111)" />
    <input type="button" value="update" onclick="update1('11','33','sadfasd')" />
    <input type="button" value="flush" onclick="del('11')" />
    <table class='table1' cellpadding='3' cellspacing='0' id='Table1' align="center"
        style="border: solid 1px #cccccc; border-bottom: 0px">
        <tr class='bgcolor'>
            <td style="width: 33%">
                网址
            </td>
            <td style="width: 67%">
                所在网页
            </td>
        </tr>
    </table>
    <iframe width="100%" id="frameId" height="40%" frameborder="0" scrolling="yes" src="about:blank">
    </iframe>
    <br />
    <br />
    <table class='table1' cellpadding='3' cellspacing='0' id='Table2' align="center"
        style="border: solid 1px #cccccc; border-bottom: 0px">
        <tr class='bgcolor'>
            <td style="width: 33%">
                网址
            </td>
            <td style="width: 33%">
                所在网页
            </td>
            <td style="width: 34%">
                死链原因
            </td>
        </tr>
    </table>
    <iframe width="100%" id="frameId1" height="40%" frameborder="0" scrolling="yes" src="about:blank">
    </iframe>
    <div id="loadhead" style="display: none">
        <style type='text/css'>
            .table1
            {
                background-color: #cccccc;
                border: 0px;
                text-align: center;
                width: 100%;
                font-size: 12px;
            }
            .table1 tr
            {
                background-color: #ffffff;
                height: 18px;
                line-height: 18px;
            }
            .table1 tr td
            {
                overflow: hidden;
            }
            .table1 .bgcolor
            {
                background-color: #EFEFEF;
            }
            span
            {
                white-space: nowrap;
                word-break: keep-all;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        </style>
    </div>
    <div id="loadbody" style="display: none">
        <table class='table1' cellpadding='3' cellspacing='1' id='tb_list' align="center">
            <tr style="display:none">
                <td style="width:33%"></td>
                <td style="width:67%"></td>
            </tr>
        </table>
    </div>
    <div id="loadbody1" style="display: none">
        <table class='table1' cellpadding='3' cellspacing='1' id='tb_list1' align="center">
            <tr style="display:none">
                <td style="width:33%"></td>
                <td style="width:33%"></td>
                <td style="width:34%"></td>
            </tr>
        </table>
    </div>
</body>
</html>

 

 posted on 2010-07-09 18:25  ︷起↘嚸.  阅读(356)  评论(0)  编辑  收藏  举报