<!DOCTYPE html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="gb2312" />
<title>DragUI V1.3 (弹出层&拖动层) 演示与说明</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
background: #fff;
font: 12px/150% "Lucida Sans Unicode" , "Lucida Grande" , sans-serif;
}
a
{
color: #09c;
}
a:hover
{
color: #000;
text-decoration: none;
}
.f_l
{
float: left;
}
.f_r
{
float: right;
}
.header
{
background-image: url("bk.png");
background-repeat: repeat-x;
height: 60px;
border-bottom: 1px solid #e5e5e5;
width: 100%;
}
.header_box
{
width: 960px;
margin: 0 auto;
overflow: hidden;
line-height: 60px;
}
.header_box .logo
{
font-size: 24px;
font-weight: 400;
color: #333;
height: 30px;
line-height: 30px;
float: left;
border-right: 2px solid #c9c9c9;
margin-top: 15px;
padding-right: 20px;
}
.header_box .sub_tit
{
font-size: 22px;
font-weight: 400;
font-family: '宋体';
color: #666;
height: 30px;
line-height: 30px;
overflow: hidden;
margin-top: 15px;
float: left;
padding-left: 20px;
}
.header_box .f_r
{
font-size: 12px;
margin: 5px -10px 0 0;
}
.header_box .f_r a
{
margin-right: 10px;
}
.wrapper
{
width: 960px;
margin: 2% auto 0;
padding-bottom: 100px;
}
.wrapper h3
{
font-size: 14px;
font-weight: 700;
color: #333;
height: 30px;
line-height: 30px;
font-family: "Microsoft yahei" , Arial;
margin-bottom: 5px;
}
.code_box
{
width: 960px;
overflow: hidden;
border-bottom: 1px solid #e1e1e1;
padding-bottom: 20px;
margin-bottom: 40px;
}
.code_box pre
{
width: 340px;
background: #f5f5f5;
padding: 10px 20px;
font-family: "Consolas" , "Courier New" ,Courier,mono;
font-size: 13px;
line-height: 18px;
border: 1px solid #eee;
float: left;
color: #333;
}
.code_box .run
{
border: 1px solid;
border-radius: 2px;
cursor: pointer;
font-family: "Microsoft yahei" , Arial;
font-size: 12px;
width: 50px;
height: 22px;
line-height: 22px;
display: block;
text-align: center;
border-color: #c3c3c3;
background: #ececec;
color: #333;
background: -webkit-gradient(linear,center bottom,center top,from(#ececec),to(#f4f4f4));
background: -moz-linear-gradient(90deg,#ececec,#f4f4f4);
text-decoration: none;
}
.con_left
{
width: 558px;
float: left;
padding-left: 20px;
}
.con_right
{
width: 558px;
float: left;
padding-left: 20px;
}
.con_right p
{
font-size: 13px;
color: #515151;
margin-bottom: 10px;
line-height: 24px;
}
.param_tb
{
width: 960px;
border-collapse: collapse;
border-bottom: 1px solid #e1e1e1;
border-left: 1px solid #e1e1e1;
font-size: 13px;
color: #333;
}
.param_tb tr td
{
line-height: 20px;
padding: 5px 0;
text-align: center;
border-right: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
}
.param_tb tr .t_l
{
text-align: left;
padding: 5px 10px;
}
.param_tb .even td
{
background: #f5f5f5;
}
.param_tb th
{
background: #f5f5f5;
line-height: 40px;
border-right: 1px solid #e1e1e1;
font-family: "Microsoft yahei" , Arial;
font-size: 14px;
font-weight: 700;
border-top: 2px solid #B8DE6F;
}
.param_tb p
{
line-height: 20px;
padding: 5px 0;
}
.html_code
{
margin-top: 50px;
}
.html_code p
{
font-size: 13px;
margin-bottom: 10px;
}
.html_code pre
{
width: 918px;
background: #f5f5f5;
padding: 10px 20px;
font-family: "Consolas" , "Courier New" ,Courier,mono;
font-size: 13px;
line-height: 18px;
border: 1px solid #eee;
color: #333;
margin-bottom: 20px;
}
#imgBox
{
border: 1px solid #d3d3d3;
padding: 5px;
background: #fff;
width: 600px;
height: 375px;
}
</style>
<link rel="stylesheet" href="DragUI.css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="DragUI.min.js"></script>
</head>
<body>
<div class="header">
<div class="header_box">
<h1 class="logo">
DragUI V1.3 (弹出层&拖动层)
</h1>
<h2 class="sub_tit">
演示与说明</h2>
</div>
</div>
<div class="wrapper">
<h3>
控件说明</h3>
<table class="param_tb">
<colgroup>
<col style="width: 120px" />
<col style="width: 340px" />
<col style="width: 610px" />
</colgroup>
<thead>
<tr class="even">
<th>
方法说明
</th>
<th>
方法名
</th>
<th>
参数说明
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
弹出显示层
</td>
<td>
$(JQeuryObject).ShowDialog();
</td>
<td class="t_l">
<b>isOverlay：</b>是否需要遮盖效果，取值[true|false]，<b>默认值[true:显示遮盖效果]</b><br />
<b>closeTimer：</b>自动关闭时间(毫秒)，<b>默认值[0:即不自动关闭]</b><br />
<b>fadeInSpeed：</b>弹出层淡入效果，淡入显示速度(毫秒)，<b>默认值[500]</b><br />
<b>fadeOutSpeed：</b>弹出层淡出效果，淡出隐藏速度(毫秒)，<b>默认值[500]</b><br />
<b>css{}：</b>弹出的浮动层样式集合，<b>默认弹出浮动层居中显示</b><br />
<b>overlayCSS: {}：</b>遮盖层样式集合，<b>默认颜色backgroundColor：Gray，默认透明度opacity: 0.5</b>。
opacity取值[0(完全透明) - 1(不透明)]
【原创】jquery弹出层拖拽插件
4星 · 超过85%的资源 需积分: 3 102 浏览量
2013-10-14
17:59:16
上传
评论
收藏 99KB RAR 举报 
JDragUI V1.3.rar （5个子文件） 
JDragUI V1.3 
DragUI.min.js 7KB
bk.png 75KB
index.html 14KB DragUI.css 2KB jquery-1.3.2.min.js 56KB资源评论
wang93202014-04-19很好，有用，可以放到项目中
码农爱码码2013-12-11东西不错,有很好的参考价值- unfair7242297482013-10-15东西不错,有很好的参考价值
- sophie_xie8502112014-03-19很好用，调用也很简单，就是分数有点高了。。。
