利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值


Posted in Javascript onOctober 24, 2009

原来我们要写一个客户端的特效,要写一两天的JavaScript,然后再调试一两天,才可以看见端倪。现在我们只要使用JQuery和他的 plugin,就可以任意的实现我们脑海中的特效,感谢他们的编写者对人类的贡献(一百个西红柿砸过来。。。。。。。。。。。。。。)。

我今天实现的需求是一个需要从列表页面中选择要导出到word中的列,然后在将选中列的内容导出到word中,同时为了增加通用性,列的个数不是固定的,也就是说这张表格可能是4列,也可能是5列,待选择的列数目不固定。例如:有下面的一张表格,然后我们要打印除薪水外的其他列。

姓名 年龄 性别 薪水
张三 19 10000
张三 19 10000
张三 19 10000

 

      我的设计是先用后台代码循环这个表格的表头,组成下面的字符串

      1-Name--2-Age--3-Sex--4-Salary,将这个字符串存储在hiddenfield中,然后由JavaScript读取,动态在弹出Div中添加checkbox对应的html,

<利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值

 

利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值

 

     

利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值

 

 

利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值

然后在选择之后将选择的值组成对应的字符串,例如:选择Name、Age、Sex,就组成,1-Name--2-Age--3Sex,存放在另外的一个hiddenfield中,在后台代码读取这个选中的字符串,将表格中相应的列导出到word中。

同时为了使这个弹出页面可以拖动,使用了EasyDrag jQuery Plugin,可以从http://fromvega.com/wordpress/2007/07/14/easydrag-jquery-plugin/下载。

      这个插件很好用,也很简单,

         实现拖动效果.

$(document).ready( function() 
{ 
$("#divPanel").easydrag(); 
} 
);

Html 代码
<div id="divPanel" style="width:300px;height:300px;background:white;border:1px solid #000000;position:absolute;left:5px;top:50px" > 
<div id="divTitle" style="width:100%;height:25px;background:lavender"> 
 Title 
</div> 
<div style="width:100%"> 
</div> 
</div>

EasyDrag还可以指定可拖动的区域,比如只能通过标题拖动整个div,我们JS可以这样写
$(document).ready ( function() 
{ 
$("#divPanel").easydrag(); 
$("#divPanel").setHandler("divTitle"); 
} 
);

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>New Web Project</title> 
<style type="text/css"> .pop-box { 
z-index: 9999; 
margin-bottom:3px; 
display:none; 
position:absolute; 
background:#ffffff; 
border:solid 1px #6e8bde; 
} 
.pop-box h4{ 
color:#ffffff; 
cursor:default; 
height:18px; 
font-size:14px; 
font-weight:bold; 
text-align:left; 
padding-left:8px; 
padding-top:4px; 
padding-bottom:2px; 
} 
.pop-box-body{ 
clear:both; 
margin:4px; 
padding:2px; 
} 
</style> 
<script type="text/javascript" src="script/jquery.js"> 
</script> 
<script type="text/javascript" src="script/jquery.easydrag.js"></script> 
<script typ="text/javascript"> 
$(document).ready(function(){ 
var text = "1-Name--2-Age--3-Sex--4-Salary"; 
var tokenGroup = new Array(); 
tokenGroup = text.split("--"); 
$(".optionDiv").append("<fieldset class='fieldset1'><legend class='legend1'>???╄?瀵煎?哄??ord涓?????/legend></fieldset>"); 
var obj = new Object(); 
for (obj in tokenGroup) { 
//alert(obj); 
//alert(Number(obj)); 
var index = Number(obj) + 1; 
//alert(index); 
var token = new Object(); 
token.value = tokenGroup[obj].split("-")[0]; 
token.text = tokenGroup[obj].split("-")[1]; 
//alert("value:"+token.value+" text:"+token.text); 
if (index == 1) { 
$(".legend1").after("<input id='Checkbox" + 
index.toString() + 
"' value='" + 
token.value + 
"' type='checkbox' /><label for='Checkbox" + 
index.toString() + 
"'>" + 
token.text + 
"</label><br>"); 
} 
else { 
$(".fieldset1").append("<input id='Checkbox" + 
index.toString() + 
"' value='" + 
token.value + 
"' type='checkbox' /><label for='Checkbox" + 
index.toString() + 
"'>" + 
token.text + 
"</label><br>"); 
} 
} 
}); 
$(document).ready(function(){ 
$(".btnSelect").click(function(){ 
var select = ""; 
$(".fieldset1 input").each(function(i){ 
if (this.checked) { 
if (select == "") 
select = (i + 1).toString() + "-" + $(this).next().text(); 
else 
select += "--" + (i + 1).toString() + "-" + $(this).next().text(); 
} 
}); 
$(".selected").val(select); 
}); 
$("#btnClose").click(function(){ 
var select = ""; 
$(".fieldset1 input").each(function(i){ 
if (this.checked) { 
if (select == "") 
select = (i + 1).toString() + "-" + $(this).next().text(); 
else 
select += "--" + (i + 1).toString() + "-" + $(this).next().text(); 
} 
}); 
$(".selected").val(select); 
}); 
}); 
$(document).ready(function(){ 
$(".pop-box").easydrag(); 
}); 
function loadText(){ 
var text = $(".hiddenfield1").val(); 
var tokenGroup = new Array(); 
tokenGroup = text.split("--"); 
$(".pop-box-body").html(""); 
$(".pop-box-body").append("<fieldset class='fieldset1'><legend class='legend1'>???╄?瀵煎?哄??ord涓?????/legend></fieldset>"); 
var obj = new Object(); 
for (obj in tokenGroup) { 
//alert(obj); 
//alert(Number(obj)); 
var index = Number(obj) + 1; 
//alert(index); 
var token = new Object(); 
token.value = tokenGroup[obj].split("-")[0]; 
token.text = tokenGroup[obj].split("-")[1]; 
//alert("value:"+token.value+" text:"+token.text); 
if (index == 1) { 
$(".legend1").after("<input id='Checkbox" + 
index.toString() + 
"' value='" + 
token.value + 
"' type='checkbox' /><label for='Checkbox" + 
index.toString() + 
"'>" + 
token.text + 
"</label><br>"); 
} 
else { 
$(".fieldset1").append("<input id='Checkbox" + 
index.toString() + 
"' value='" + 
token.value + 
"' type='checkbox' /><label for='Checkbox" + 
index.toString() + 
"'>" + 
token.text + 
"</label><br>"); 
} 
} 
} 
function popupDiv(div_id){ 
var div_obj=$("#"+div_id); 
var windowWidth=document.documentElement.clientWidth; 
var windowHeight=document.documentElement.clientHeight; 
var popupHeight=div_obj.height(); 
var popupWidth=div_obj.width(); 
$("<div id='mask'></div>").addClass("mask").width(windowWidth*0.99) 
.height(windowHeight*0.99).click(function(){ 
hideDiv(div_id); 
}).appendTo("body").fadeIn(200); 
div_obj.css({"position":"absolute"}) 
.animate({left:windowWidth/2-popupWidth/2,top:windowHeight/2-popupHeight/2,opacity:"show"},"show"); 
loadText(); 
} 
function hideDiv(div_id){ 
$("#mask").remove(); 
$("#"+div_id).animate({left:0,top:0,opacity:"hide"},"slow"); 
} 
</script> 
</head> 
<body> 
<h1>New Web Project Page</h1> 
<input class="hiddenfield1" type="hidden" value="1-Name--2-Age--3-Sex--4-Salary"> 
<input type="button" id="btnPopup" name="btnPopup" onclick="popupDiv('pop-div')" class="btnPopup" value="PopupDiv"> 
<div class="pop-box" style="width:300px" id="pop-div"> 
<h4>Title</h4> 
<div class="pop-box-body"> 
<p></p> 
</div> 
<div class="butonPanel" style="text-align:right;"> 
<input value="Close" id="btnClose" onclick="hideDiv('pop-div');" type="button"> 
</div> 
</div> 
<!--<div class="optionDiv"></div>--> 
<fieldset> 
<legend> 
</legend> 
</fieldset> 
<input type="button" id="button1" name="button1" class="btnSelect" value="selected"> 
<br> 
<textarea class="selected" rows="5" cols="50"> 
</textarea> 
</body> 
</html>

源代码下载
Javascript 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
javascript同步Import,同步调用外部js的方法
Jul 08 Javascript
学习ExtJS border布局
Oct 08 Javascript
基于jQuery的为attr添加id title等效果的实现代码
Apr 20 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
Apr 07 Javascript
基于jquery实现省市联动效果
Nov 23 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
JS百度地图搜索悬浮窗功能
Jan 12 Javascript
Node 升级到最新稳定版的方法分享
May 17 Javascript
JS实现扫雷项目总结
May 19 Javascript
JS window.opener返回父页面的应用
Oct 24 #Javascript
JavaScript 动态添加表格行 使用模板、标记
Oct 24 #Javascript
javascript Keycode对照表
Oct 24 #Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 #Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 #Javascript
js文件中调用js的实现方法小结
Oct 23 #Javascript
struts2 jquery 打造无限层次的树
Oct 23 #Javascript
You might like
第十四节 命名空间 [14]
2006/10/09 PHP
5.PHP的其他功能
2006/10/09 PHP
解析strtr函数的效率问题
2013/06/26 PHP
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
vue 更改连接后台的api示例
2019/11/11 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
大学生志愿者感言
2014/01/15 职场文书
北体毕业生求职信
2014/02/28 职场文书
大学生创业计划书
2014/08/14 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
统计工作个人总结
2015/03/03 职场文书
原告离婚代理词
2015/05/23 职场文书
导游词之潮音寺
2019/09/26 职场文书
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL
一篇文章学会Vue中间件管道
2021/06/20 Vue.js