JQuery学习笔记五(可拖动、覆盖层) -

liumeng5888

浏览: 36462 次
性别:
来自: 武汉

最近访客更多访客>>

winwa

qq_32411721

guoyouxi

limeng5854

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JQuery学习笔记五(可拖动、覆盖层)

博客分类：

web前端

jquery 框架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TipsWindown Demo By [Await]</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<link rel="stylesheet" href="tipswindown.css" type="text/css" media="all" />
<script type="text/javascript" src="../JQuery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="tipswindown.js"></script>
<style type="text/css">
body {
   font: 12px 'Microsoft Yahei',arial,SimSun,sans-serif;
   margin: 0 auto;
   padding: 0px;
   text-align: center;
   color: #555;
   background: #fff;
}
h1,h2,h3,h4,h5,h6,div,p,ul,ol,dl,dd,dt,abbr,form,input,img { margin: 0; padding: 0; }
img { border: none; }
h1 { width: 100%; text-align: center;}
a { color: #096FB7; text-decoration: none; }
a:hover { text-decoration: underline; }
#container { margin: 0 auto; margin-top: 20px; padding: 20px; width: 600px; text-align: left; border: 20px solid #DDD; }
h3{ margin: 10px 0;}
ol li { list-style: ; margin: 20px 0 0 50px; }
blockquote { width: 500px; margin: 10px 0; padding: 10px; border: 2px dashed #F8B3D0; background-color: #FFF5FA;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#text1").click(function() {
   tipsWindown("请选择：①默认为不限--②","iframe:http://www.baidu.com","600","200","false","","true","text")
});
$("#text2").click(function() {
   tipsWindown("标题","text:我不能拖动，而且还没遮罩背景","250","150","false","","false","text")
});
$("#text3").click(function() {
   tipsWindown("标题","text:我不能拖动，但3秒钟后我会自动消失","250","150","false","3000","true","text")
});
$("#id1").click(function() {
   tipsWindown("标题","id:testID","350","150","true","","true","id")
});
$("#img1").click(function() {
   tipsWindown("图片","img:http://leotheme.cn/wp-content/uploads/2008/09/tr2xcp6yw4o5xebj9s.jpg","500","230","true","","true","img")
});
$("#url1").click(function(){
   tipsWindown("标题","url:get?test.html","250","150","true","","true","text");
});
$("#iframe1").click(function(){
   tipsWindown("标题","iframe:http://leotheme.cn","950","527","true","","true","leotheme");
});
});
</script>
</head>
<body>
<div id="container">
<h1>TipsWindown 1.0</h1>
<h3>关于插件：</h3>
<p>一个基于jQuery的弹出层。支持拖拽，支持内容为文字，图片，URL等!至于兼容性。在IE6下，弹出对像无法绝对固定。其他应该没啥大问题；</p>

<h3>应用演示：</h3>
    <ol>
   <li>
   弹出文本信息提示： <br />
   <blockquote>tipsWindown("提示","text:提示信息内容","250","150","true","","true","msg")</blockquote>
   <button id="text1">点击我弹出提示</button>
   </li>
   <li>
   弹出页面中的某个ID的html： <br />
   <blockquote>tipsWindown("标题","id:testID","300","200","true","","true","id")</blockquote>
   <button id="id1">点击我弹出提示</button>
   <div id="testID" style="display: none">
    <p>我是测试ID里的内容</p> <br />
    我换行了...
   </div>
   </li>
   <li>
   弹出图片： <br />
   <blockquote>tipsWindown("图片","img:图片路径","250","150","true","","true","img")</blockquote>
   <button id="img1">点击我弹出提示</button>
   </li>
   <li>
   get加载一个.html文件（也可以是.php/.asp?id=4之类的）： <br />
   <blockquote>tipsWindown("标题","url:get?test.html","250","150","true","","true","text"); </blockquote>
   <button id="url1">点击我弹出提示</button>
   </li>
   <li>
   加载一个页面到框架显示：<br />
   <blockquote>tipsWindown("标题","iframe:http://leotheme.cn","900","580","true","","true","leotheme"); </blockquote>
   <button id="iframe1">点击我弹出提示</button>
   </li>
   <li>
   弹出一个不能拖动且没有遮罩背景的文本信息层： <br />
   <blockquote>tipsWindown("提示","text:提示信息内容","250","150","false","","false","msg")</blockquote>
   <button id="text2">点击我弹出提示</button>
   </li>
   <li>
   弹出一个不能拖动，三秒钟自动关闭的层： <br />
   <blockquote>tipsWindown("提示","text:提示信息内容","250","150","false","3000","true","msg")</blockquote>
   <button id="text3">点击我弹出提示</button>
   </li>
</ol>

<h3>参数说明：</h3>
<table width="0" border="1" cellpadding="5" cellspacing="0">
    <tr>
      <th scope="col">顺序</th>
      <th scope="col">参数</th>
      <th scope="col">功能</th>
      <th colspan="2" scope="col">备注</th>
    </tr>
    <tr>
      <th scope="row">1</th>
      <th scope="row">title</th>
      <td>弹出层的标题</td>
      <td colspan="2">必填，纯文本</td>
    </tr>
    <tr>
      <th rowspan="5" scope="row">2</th>
      <th rowspan="5" scope="row">content</th>
      <td rowspan="5">弹出层的内容</td>
      <td>text</td>
      <td>文本内容</td>
    </tr>
    <tr>
      <td>id</td>
      <td>页面里某id的子标签</td>
    </tr>
    <tr>
      <td>img</td>
      <td>图片</td>
    </tr>
    <tr>
      <td>url</td>
      <td>get或post某一页面里的html，该页面要求只包含body的子标签</td>
    </tr>
    <tr>
      <td>iframe</td>
      <td>目标地址在框架显示</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <th scope="row">width</th>
      <td>弹出层的宽</td>
      <td colspan="2">必填，比如“200”。（不需要带px）</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <th scope="row">height</th>
      <td>弹出层的高</td>
      <td colspan="2">同 width</td>
    </tr>
    <tr>
      <th scope="row">5</th>
      <th scope="row">drag</th>
      <td>是否可拖动</td>
      <td colspan="2">必填，可选参数（true,false）</td>
    </tr>
    <tr>
      <th scope="row">6</th>
      <th scope="row">time</th>
      <td>自动消失时间</td>
      <td colspan="2">可不填，默认不自动关闭；参数可为空("")</td>
    </tr>
    <tr>
      <th scope="row">7</th>
      <th scope="row">showbg</th>
      <td>是否显示遮罩层</td>
      <td colspan="2">可不填，默认不显示（此项如填了，它前面的time也必须要填）</td>
    </tr>
    <tr>
      <th scope="row">8</th>
      <th scope="row">cssName</th>
      <td>弹出层附加样式名</td>
      <td colspan="2">可不填</td>
    </tr>
</table>
<h3>相关下载：</h3>
<p><a href="http://leotheme.cn/wp-content/uploads/Example/js/tipswindown/tipswindown.js" title="JS文件下载">JS文件下载</a> | <a href="http://leotheme.cn/wp-content/uploads/Example/js/tipswindown/tipswindown.rar" title="完整包下载">完整包下载</a></p>
<p style="float: right;">最后更新日期：2009-11-24 By <a href="http://leotheme.cn/" title="Await">Await</a><br /></p>
<p style="clear: both;"></p>
</div>
<br />
</body>
</html>
//tipswindown.js
//-------------------------------------------------------------------------
//jQuery弹出窗口 By Await [2009-11-22]
//--------------------------------------------------------------------------
/*参数：[可选参数在调用时可写可不写,其他为必写]
----------------------------------------------------------------------------
    title: 窗口标题
content: 内容(可选内容为){ text | id | img | url | iframe }
    width: 内容宽度
   height: 内容高度
drag: 是否可以拖动(ture为是,false为否)
     time: 自动关闭等待的时间，为空是则不自动关闭
   showbg: [可选参数]设置是否显示遮罩层(0为不显示,1为显示)
cssName: [可选参数]附加class名称
------------------------------------------------------------------------*/
//示例:
//------------------------------------------------------------------------
//simpleWindown("例子","text:例子","500","400","true","3000","0","exa")
//------------------------------------------------------------------------
var showWindown = true;
var templateSrc = "http://leotheme.cn/wp-content/themes/Dreamy"; //设置loading.gif路径
function tipsWindown(title,content,width,height,drag,time,showbg,cssName) {
/*隐藏所有select标记*/
$("select").hide();
$("#windown-box").remove(); //请除内容
var width = width>= 950?this.width=950:this.width=width;     //设置最大窗口宽度
var height = height>= 527?this.height=527:this.height=height; //设置最大窗口高度
if(showWindown == true) {
   var simpleWindown_html = new String;
    simpleWindown_html = "<div id=\"windownbg\" style=\"height:"+$(document).height()+"px;filter:alpha(opacity=0);opacity:0;z-index: 999901\"></div>";
    simpleWindown_html += "<div id=\"windown-box\">";
    simpleWindown_html += "<div id=\"windown-title\"><h2></h2><span id=\"windown-close\"></span></div>";
    simpleWindown_html += "<div id=\"windown-content-border\"><div id=\"windown-content\"></div></div>";
    simpleWindown_html += "</div>";
    $("body").append(simpleWindown_html);
    /*alert(simpleWindown_html);*/
    show = false;
}
contentType = content.substring(0,content.indexOf(":"));
content = content.substring(content.indexOf(":")+1,content.length);
switch(contentType) {
   case "text":
   $("#windown-content").html(content);
   break;
   case "id":
   $("#windown-content").html($("#"+content+"").html());
   break;
   case "img":
   $("#windown-content").ajaxStart(function() {
    $(this).html("<img src='"+templateSrc+"/images/loading.gif' class='loading' />");
   });
   $.ajax({
    error:function(){
     $("#windown-content").html("<p class='windown-error'>加载数据出错...</p>");
    },
    success:function(html){
     $("#windown-content").html("<img src="+content+" alt='' />");
    }
   });
   break;
   case "url":
   var content_array=content.split("?");
   $("#windown-content").ajaxStart(function(){
    $(this).html("<img src='"+templateSrc+"/images/loading.gif' class='loading' />");
   });
   $.ajax({
    type:content_array[0],
   url:content_array[1],
    data:content_array[2],
    error:function(){
     $("#windown-content").html("<p class='windown-error'>加载数据出错...</p>");
    },
    success:function(html){
     $("#windown-content").html(html);
    }
   });
   break;
   case "iframe":
   $("#windown-content").ajaxStart(function(){
    $(this).html("<img src='"+templateSrc+"/images/loading.gif' class='loading' />");
   });
   $.ajax({
    error:function(){
     $("#windown-content").html("<p class='windown-error'>加载数据出错...</p>");
    },
    success:function(html){
     $("#windown-content").html("<iframe src=\""+content+"\" width=\"100%\" height=\""+parseInt(height)+"px"+"\" scrolling=\"auto\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\"></iframe>");
    }
   });
}
$("#windown-title h2").html(title);
if(showbg == "true") {$("#windownbg").show();}else {$("#windownbg").remove();};
$("#windownbg").animate({opacity:"0.5"},"normal");//设置透明度
$("#windown-box").show();
if( height >= 527 ) {
   $("#windown-title").css({width:(parseInt(width)+22)+"px"});
   $("#windown-content").css({width:(parseInt(width)+17)+"px",height:height+"px"});
}else {
   $("#windown-title").css({width:(parseInt(width)+10)+"px"});
   $("#windown-content").css({width:width+"px",height:height+"px"});
}
var cw = document.documentElement.clientWidth,ch = document.documentElement.clientHeight,est = document.documentElement.scrollTop;
var _version = $.browser.version;
if ( _version == 6.0 ) {
   $("#windown-box").css({left:"50%",top:(parseInt((ch)/2)+est)+"px",marginTop: -((parseInt(height)+53)/2)+"px",marginLeft:-((parseInt(width)+32)/2)+"px",zIndex: "999999"});
}else {
   $("#windown-box").css({left:"50%",top:"50%",marginTop:-((parseInt(height)+53)/2)+"px",marginLeft:-((parseInt(width)+32)/2)+"px",zIndex: "999999"});
};
var Drag_ID = document.getElementById("windown-box"),DragHead = document.getElementById("windown-title");

var moveX = 0,moveY = 0,moveTop,moveLeft = 0,moveable = false;
   if ( _version == 6.0 ) {
    moveTop = est;
   }else {
    moveTop = 0;
   }
var sw = Drag_ID.scrollWidth,sh = Drag_ID.scrollHeight;
   DragHead.onmouseover = function(e) {
    if(drag == "true"){DragHead.style.cursor = "move";}else{DragHead.style.cursor = "default";}
   };
   DragHead.onmousedown = function(e) {
   if(drag == "true"){moveable = true;}else{moveable = false;}
   e = window.event?window.event:e;
   var ol = Drag_ID.offsetLeft, ot = Drag_ID.offsetTop-moveTop;
   moveX = e.clientX-ol;
   moveY = e.clientY-ot;
   document.onmousemove = function(e) {
     if (moveable) {
     e = window.event?window.event:e;
     var x = e.clientX - moveX;
     var y = e.clientY - moveY;
      if ( x > 0 &&( x + sw < cw) && y > 0 && (y + sh < ch) ) {
       Drag_ID.style.left = x + "px";
       Drag_ID.style.top = parseInt(y+moveTop) + "px";
       Drag_ID.style.margin = "auto";
       }
      }
     }
   document.onmouseup = function () {moveable = false;};
   Drag_ID.onselectstart = function(e){return false;}
}
$("#windown-content").attr("class","windown-"+cssName);
var closeWindown = function() {
   $("#windownbg").remove();
   $("#windown-box").fadeOut("slow",function(){$(this).remove();});
}
if( time == "" || typeof(time) == "undefined") {
   $("#windown-close").click(function() {
    $("#windownbg").remove();
    $("#windown-box").fadeOut("slow",function(){$(this).remove();});
    /*显示select标记*/
    $("select").show();
   });
}else {
   setTimeout(closeWindown,time);
}
}
//tipswindown.css
#windownbg {
display: none;
position: absolute;
width: 100%;
height: 100%;
/*background: #000;body-bg*/
background:#B3B3B3;
top: 0;
left: 0;
}
#windown-box {
position: fixed;
_position: absolute;/*For IE 6.0*/
border: 5px solid #E9F3FD;
background: #FFF;
text-align: left;
}
#windown-title {
position: relative;
height: 30px;
border: 1px solid #A6C9E1;
overflow: hidden;
/*background: url(http://leotheme.cn/wp-content/themes/Dreamy/images/bg.png) 0 -330px repeat-x;*/
}
#windown-title h2 {
position: relative;
left: 10px;
top: 5px;
font-size: 14px;
color: #666;
}
#windown-close {
position: absolute;
right: 10px;
top: 8px;
width: 10px;
height: 16px;
text-indent: -10em;
overflow: hidden;
background: url(http://leotheme.cn/wp-content/themes/Dreamy/images/icon.png) -820px -720px no-repeat;
cursor: pointer;
}
#windown-content-border {
position: relative;
top: -1px;
border: 1px solid #A6C9E1;
padding: 5px 0 5px 5px;
background: url(http://leotheme.cn/wp-content/themes/Dreamy/images/bg.png) 0 -380px repeat-x;
}
#windown-content {
position: relative;
overflow: auto;
text-align: center;
}
#windown-content img,#windown-content iframe{
display: block;
}
#windown-content .loading {
position: absolute;
left: 50%;
top: 50%;
margin-left: -8px;
margin-top: -8px;
}
注意事项：
1.第一部分为html内容
2.第二部分为覆盖层的js文件
3.为显示层的样式
4.加jquery文件

分享到：