2007年8月8日

iframe高度自动调整(通过IE,firefox,opera测试)

1.index.html
    <iframe id="mainIframe" scrolling="no" frameborder="0" width="100%" src="a.html"></iframe>
    <a href="#" onclick="page('a.html')">a页面</a><a href="#" onclick="page('b.html')">b页面</a>

2 a.html  //内嵌页面
    <script language="javascript">
          changeHight();
    </script>

3. b.html  //内嵌页面
     <script language="javascript">
          changeHight();
    </script>

4. page.js
 function changeHight(){
  var iFrm = parent.document.getElementById("mainIframe");
     var subWeb = iFrm.contentDocument;
     if(subWeb){
    if (subWeb.body.scrollHeight>480)
   iFrm.height = subWeb.body.scrollHeight+20;
  else
      iFrm.height=500;
  } 
  if(top.document.frames["mainIframe"].document && window.document.body.scrollHeight!="0"){
   parent.document.getElementById("mainIframe").style.height=window.document.body.scrollHeight;
  }
  if(top.document.frames["mainIframe"].document && window.document.body.scrollHeight=="0"){
   parent.document.getElementById("mainIframe").style.height=500;
  }
}

function page(page){
    document.getElementById("mainIframe").src=page;
}



造成IE,FireFox,Opera中Iframe显示差异原因在于
1.iframe在FireFox中取法为parent.document.getElementById("mainIframe").contentDocument,而在ie,opera中为parent.document.getElementById("mainIframe").document
2.当页面无滚动时，window.document.body.scrollHeight在IE中能取到，fireFox和Opera中取不到。

posted @ 2009-04-21 14:05 software5168 阅读(1261) | 评论 (0) | 编辑 收藏

文件上传下载

     摘要: 1.myapp/index.html <html> <head> 文件操作 <iframe id="iframefile" scrolling="no" frameborder="0" width="100%" src="/myapp/fileUpload.jsp"></iframe> &l...  阅读全文

posted @ 2009-02-26 17:11 software5168 阅读(285) | 评论 (0) | 编辑 收藏

如何控制单选、复选、列表框

一些频繁使用的javascript页面控制，做个总结。
下面是部分代码。
<html>
<head>
<script language="javascript">
 function a(){
  window.document.getElementsByName("dx")[0].checked=true;
 }
 function b(){
  window.document.getElementsByName("dx")[0].checked=false;
 }
 function c(){
  window.document.getElementsByName("fx")[0].checked=true;
 }
 function d(){
  window.document.getElementsByName("fx")[0].checked=false;
 }
 function e(){
  for(i=0;i<window.document.getElementsByName("fx").length;i++){
      if(!window.document.getElementsByName("fx")[i].checked){
       window.document.getElementsByName("fx")[i].checked=true;
      }
     }
 }
 function f(){
  for(i=0;i<window.document.getElementsByName("fx").length;i++){
      if(window.document.getElementsByName("fx")[i].checked){
       window.document.getElementsByName("fx")[i].checked=false;
      }
     }
 }
 function g(){
  window.document.getElementById("lbka")[1].selected=true;
 }
 function h(){
  alert("选择号为:"+window.document.getElementById("lbka").selectedIndex + "    值为:" +window.document.getElementById("lbka")[window.document.getElementById("lbka").selectedIndex].value+"    文本值为:" + window.document.getElementById("lbka")[window.document.getElementById("lbka").selectedIndex].text);
 }
 function m(){
  sel = false;
  var val="";
     for(i=0;i<window.document.getElementsByName("dx").length;i++){
      if(window.document.getElementsByName("dx")[i].checked){
       val = window.document.getElementsByName("dx")[i].value;
       sel=true;
    break;
      }  
     }
    if(sel){
   alert("单选值为:"+val);
     
     }else{
   alert("请选择文件");
      return false;
  }  
 }
 function j(){
  var sel = false;
  var val="";
     for(i=0;i<window.document.getElementsByName("fx").length;i++){
      if(window.document.getElementsByName("fx")[i].checked){
       if(val==""){
        val=window.document.getElementsByName("fx")[i].value;
       }else{
        val = val + "," +window.document.getElementsByName("fx")[i].value;
       } 
      }
     }
     if(val==""){
      alert("请选择文件");
      return false;
     }else{
   alert("复选值为:"+val);
  }
 }
</script>
</head>
<body>
<table id="table1" width="100%"  border="1" align="center" cellpadding="0" cellspacing="0">
 <tr>
  <td>文件</td>
  <td>列表框</td>
  <td>单选</td>
  <td>复选</td>
 </tr>
 <tr>
  <td>文件A</td>
  <td><select name="lbka"><option value="lbka1">文件A1</option><option value="lbka2">文件A2</option></select></td>
  <td><input type="radio" name="dx" value="dxa"></td>
  <td><input type="checkbox" name="fx" value="fxa"></td>
 </tr>
 <tr>
  <td>文件B</td>
  <td><select name="lbkb"><option value="lbkb1">文件B1</option><option value="lbkb2">文件B2</option></select></td>
  <td><input type="radio" name="dx" value="dxb"></td>
  <td><input type="checkbox" name="fx" value="fxb"></td>
 </tr>
 <tr>
  <td colspan="4">
   <a href="#" onclick="a();">单选A选中</a>
   <a href="#" onclick="b();">单选A不选中</a>
   <a href="#" onclick="c();">复选A选中</a>
   <a href="#" onclick="d();">复选A不选中</a>
   <a href="#" onclick="e();">复选全选</a>
   <a href="#" onclick="f();">复选全不选</a>
   <a href="#" onclick="g();">选中列表框文件A2</a>
   <a href="#" onclick="h();">取得选中列表框A的值,文本</a>
   <a href="#" onclick="m();">判断单选选择</a>
   <a href="#" onclick="j();">判断复选选择</a>
  </td>
 </tr>
</table>
</body>
</html>

posted @ 2007-08-09 09:17 software5168 阅读(1063) | 评论 (0) | 编辑 收藏

如何动态控制表单元素

主要通过javascript实现，理解IE的DOM结构，并调用元素的固定方法，可以实现表单元素的动态增删。
下面是部分代码。
<html>
<head>
<script language="javascript">
 function add(){
  //取得表格
  var table = document.getElementById("table1");
  //取得行数;
  var num = table.rows.length;
  //增加一行
  var newrow1 = table.insertRow(num-1);
  var cell1 = newrow1.insertCell();
     var cell2 = newrow1.insertCell();
     var cell3 = newrow1.insertCell();
     var cell4 = newrow1.insertCell();
  //增加行元素
  var inputcell2 = document.createElement("<input size='32' name=''>");
     cell2.appendChild(inputcell2);
  var inputcell4_1 = document.createElement("<input size='32' name=''>");
  var inputcell4_2 = document.createElement("<input type='button' value='删除元素'onClick='del(this);'/>");
     cell4.appendChild(inputcell4_1);
  cell4.appendChild(inputcell4_2);
  //刷新标签显示
  frash();
 }
 function del(obj){
  //取得按钮所在行
  var i = obj.parentNode.parentNode.rowIndex;
      var tab = document.getElementById("table1");
      //删除按钮所在行
  tab.deleteRow(i-1); 
      frash();
 }
 function frash(){
  var table = document.getElementById("table1");
     var num = table.rows.length;
     //计算动态元素个数
  var n = num-2;
     for(i=1;i<=n;i++){
   //设置标签值
      table.rows[i].cells[0].innerText="元素"+i+"属性A";
      //设置属性值
   table.rows[i].cells[1].childNodes[0].setAttribute("name","ysa"+i);
      table.rows[i].cells[2].innerText="元素"+i+"属性B";
      table.rows[i].cells[3].childNodes[0].setAttribute("name","ysb"+i);
     }
 }
</script>
</head>
<body>
<table id="table1" width="100%"  border="1" align="center" cellpadding="0" cellspacing="0">
 <tr>
  <td>标签1</td>
  <td><input name="a"></td>
  <td>标签2</td>
  <td><input name="b"></td>
 </tr>
 <tr>
  <td colspan="4" align="center"><a href="#" onclick="add();">增加元素</a></td>
 </tr>
</table>
</body>
</html>

posted @ 2007-08-08 16:11 software5168 阅读(648) | 评论 (0) | 编辑 收藏

如何实现页面打印

页面打印通常直接调用IE中打印命令，并通过class控制打印范围。当页面文件内容过多，无法完整打印时，可以通过javascript控制缩放实现完整打印。
下面是部分代码。
<html>
<head>
<title>***上海市眼病防治中心病人结帐费用报表***</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<!--media=print 这个属性可以在打印时有效-->
<style media=print>
.Noprint{display:none;}
.PageNext{page-break-after: always;}
</style>
<style>
body,td,th
{
font-size: 12px;
}
.tdp
{
border-bottom: 1 solid #000000;
border-left: 1 solid #000000;
border-right: 0 solid #ffffff;
border-top: 0 solid #ffffff;
}
.tabp
{
border-color: #000000;

border-collapse:collapse;
}
.NOPRINT {
font-family: "宋体";
font-size: 12px;
}

</style>
<script language="javascript">
　　var i=0;
       function zoomL(){
 　　   i++;
 　　   document.getElementById("f").style.zoom=1+i/3;
　　}
       function zoomS(){
 　　   i--;
 　　   document.getElementById("f").style.zoom=1+i/3;
　　}
</script>
</head>

<body >
<OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 width=0 VIEWASTEXT> </OBJECT>
<input type=button value=打印 onclick="document.all.WebBrowser.ExecWB(6,1)" class="NOPRINT">
<input type=button value=直接打印 onclick="document.all.WebBrowser.ExecWB(6,6)" class="NOPRINT">
<input type=button value=页面设置 onclick="document.all.WebBrowser.ExecWB(8,1)" class="NOPRINT">
<input type=button value=打印预览 onclick="document.all.WebBrowser.ExecWB(7,1)" class="NOPRINT">
<input type=button value=放大 onclick="zoomL();" class="NOPRINT">
<input type=button value=缩小 onclick="zoomS();" class="NOPRINT">
<br/>
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr align="center">
<td colspan="5"><font size="3">上海市眼病防治中心病人结帐费用报表（A） </font></td>
</tr>
<tr>
<td>汇总人次 5</td>
<td>费用合计 15853.12</td>
<td>统计日期 </td>
<td>制表人 023</td>
<td>制表日期：2004-05-13</td>
</tr>
</table>

<table width="90%" border="1" align="center" cellpadding="2" cellspacing="0" bordercolor="#000000" class="tabp" id="f">
<tr>
<td >姓名</td>
<td >住院号</td>
<td >科室</td>
<td >结帐日期</td>
<td >出院日期</td>
<td >费用合计</td>
<td >医保交易费用</td>
<td >分类给付费用</td>
<td >非医保交易费</td>
</tr>
<tr>
<td >&nbsp;</td>
<td >&nbsp;</td>
<td >&nbsp;</td>
<td >&nbsp;</td>
<td >&nbsp;</td>
<td >&nbsp;</td>
<td >&nbsp;</td>
<td >&nbsp;</td> 
<td >&nbsp;</td> 
</tr>
</table>
<hr align="center" width="90%" size="1" noshade class="NOPRINT" >
<!--分页-->
<div class="PageNext"></div>
<table width="90%" border="1" align="center" cellpadding="2" cellspacing="0" bordercolor="#000000" class="tabp">
<tr>
<td >第2页</td>
</tr>
<tr>
<td >看到分页了吧</td>
</tr>
<tr>
<td >&nbsp;</td>
</tr>
<tr>
<td >&nbsp;</td>
</tr>
<tr>
<td ><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" >这样的报表
对一般的要求就够了。</td>
<td>&nbsp;</td>
</tr>
</table></td>
</tr>
</table>

<table width="780%" border="1" class="Noprint">
<tr>
<td>能不能打印</td>
</tr>
</table>

</body>
</html>

posted @ 2007-08-08 11:27 software5168 阅读(565) | 评论 (0) | 编辑 收藏

如何同时提交表单中的文件和文本

思路是把表单类型设置为enctype="multipart/form-data"，其他表单中文本数据通过javascript处理，附加在action后面，后台通过request.getParameter()取得。上传文件调用commons-fileupload.jar中方法。

下面是部分代码。
<form  name="ajform" action="/da.do" method="post" enctype="multipart/form-data">
   <tr><td><input name="a" value=""></td></tr>
   <tr><td><input name="b" type="file"></td></tr>
   <tr><td><a href="#" onclick="checksubmit();">提交</a></td></tr>
</form>

<script language="javascript">
   function checksubmit(){
      var value  = "/da.do?formAction=save";   
      value = value+"&a="+ window.document.getElementById("a").value;
      window.document.ajform.action=value;
      window.document.ajform.submit();
   }
</script>

String a = request.getParameter("a");
try {
      //文件上传目录“/file/wj”
    String filepath= request.getSession().getServletContext().getRealPath("/")+"file"+File.separator+"wj";
   //文件上传临时目录“/file/temp”
    String tempPath = request.getSession().getServletContext().getRealPath("/")+"file"+File.separator+"temp";
    File dir = new File(filepath);
      //建立目录
       if(!dir.exists()){
        dir.mkdirs();
       }
       File dir1 = new File(tempPath);
       if(!dir1.exists()){
        dir1.mkdirs();
       }
       DiskFileUpload fu = new DiskFileUpload();
       //设置最大文件尺寸，这里是10MB
          fu.setSizeMax(10485760);
          //设置缓冲区大小，这里是4kb
          fu.setSizeThreshold(4096);
          //设置临时目录：
          fu.setRepositoryPath(tempPath);
         
    List fileItems = fu.parseRequest(request);
    Iterator iter = fileItems.iterator();
    while (iter.hasNext()) {
       FileItem item = (FileItem) iter.next();
        String fileName = item.getName();
        //判断是否为文件
        if(fileName!=null){
         //取文件名
         String name = fileName.substring(fileName.lastIndexOf(File.separator)+1);
         if(fileName!=null&& !fileName.equals("")) {          
           File file = new File(filepath+File.separator+name);
                   //上传文件 
                  item.write(file);
                }
        } 
     }
   } catch (Exception e) {
       e.printStackTrace();
   }

posted @ 2007-08-08 10:52 software5168 阅读(852) | 评论 (0) | 编辑 收藏

<2007年8月>
日一二三四五六
2930311234
567891011
12131415161718
19202122232425
2627282930311
2345678

导航

统计

常用链接

留言簿(3)

随笔分类

随笔档案

收藏夹

JAVA學習網站

綜合

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜