弹出控件移动

everlxq

浏览: 108728 次
性别:
来自: 青岛

最近访客更多访客>>

lilybao

kalin001

haodyy

Jessie丶J

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

<%@ page contentType="text/html; charset=UTF-8" language="java"%>
<%@ include file="/commons/taglib.jsp"%>
<link rel="Stylesheet" href="<c:url value='/css/weebox.css" type="text/css'/>"/>
<script type='text/javascript' src='<c:url value='/js/jquery.js'/>'></script>
<script type="text/javascript">
var _move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置

$(function()
{
   $("#btnShow").click(function()
   {
      $("#BgDiv").css({ display: "block", height: $(document).height() });//743
      var yscroll=document.documentElement.scrollTop;//undifined
      $("#DialogDiv").css("top","200px");
      $("#DialogDiv").css("display","block");
      document.documentElement.scrollTop=0;
   });
   $("#btnClose").click(function()
   {
      $("#BgDiv").css("display", "none");
      $("#DialogDiv").css("display","none");
   });
   
   $("#DialogDiv").click(function(){
        //alert("click");//点击（松开后触发）
        }).mousedown(function(e){
        _move=true;
        _x=e.pageX-parseInt($("#DialogDiv").css("left"));
        _y=e.pageY-parseInt($("#DialogDiv").css("top"));
        $("#DialogDiv").fadeTo(20, 20);//点击后开始拖动并透明显示
    });
    $(document).mousemove(function(e){
        if(_move){
            var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
            var y=e.pageY-_y;
            $("#DialogDiv").css({top:y,left:x});//控件新位置
        }
    }).mouseup(function(){
    _move=false;
    $("#DialogDiv").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
  });
});

</script>
<body>
<div id="BgDiv"></div>
<div id="DialogDiv" style="display:none">
<h2>上传文件<a  id="btnClose" style="padding-top: 4px"><img src="<c:url value='/images/delete.gif'/>" border="0" title="单击关闭此窗口"></a></h2>
<table width="100%">
<tr><td>&nbsp;</td><td><b>允许下载</b></td></tr>
<tr><td><s:file name="files" required="true" onchange=""/></td><td><select name="yxxzs"><option value="1">允许</option><option value="0">不允许</option></select></td></tr>
</table>
</div>
<div class="biaoqian"><!--标签 -->
		  <input name="Input" type="button" value="附件信息"  class="mybiaoqian_on"/>
</div>
<table id="list" cellpadding="0" class="table" cellspacing="0">
<thead><tr><th height="30"><b>选择</b></th><th><b>序号</b></th><th><b>文件名</b></th><th><b>扩展名</b></th><th><b>文件大小</b></th><th><b>允许下载</b></th><th><b>下载次数</b></th></tr></thead>
<tbody>
<s:iterator value="filelist" status="st" id="sjfjb">
<tr>
<td width="5%"><input type="checkbox" name="ids" value="<s:property value='id'/>"></td>
<td width="5%"><s:property value="#st.index+1"/>&nbsp;</td>
<td width="50%">
<s:if test="yxxz==1">
<a href="<%=request.getContextPath() %>/bd/downloadFjAction!downloadFj.action?id=<s:property value='id'/>" title="点击下载"><s:property value="wjmc"/></a>
<s:hidden name="wjmcs" value="%{wjmc}"/>
</s:if>
<s:else><s:property value="wjmc"/></s:else>
</td>
<td width="10%"><s:property value="wjkzm"/>&nbsp;</td>
<td width="10%"><s:property value="wjdx"/>&nbsp;</td>
<td width="5%"><s:property value="yxxz1"/>&nbsp;</td>
<td width="5%"><s:property value="xzcs"/>&nbsp;</td>
</tr>
</s:iterator>
</tbody>
</table>

<s:submit method="deleteFjs" value="删除文件" onclick="return confirmListDelete('ids')" cssClass="input_submit"/>
<input id="btnShow" type="button" value="上传文件">

分享到：