利用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 相关文章推荐
javascript+dom树型菜单类,希望朋友们一起进步
May 03 Javascript
textContent在Firefox下与innerText等效的属性
May 12 Javascript
javascript不同页面传值的改进版
Sep 30 Javascript
jQuery动画animate方法使用介绍
May 06 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
js 创建对象 经典模式全面了解
Aug 16 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
express express-session的使用小结
Dec 12 Javascript
Layui table field初始化加载时进行隐藏的方法
Sep 19 Javascript
Node.js API详解之 zlib模块用法分析
May 19 Javascript
vue中使用vue-pdf的方法详解
Sep 05 Javascript
el-table-column 内容不自动换行的解决方法
Aug 14 Vue.js
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
PHP实现图片简单上传
2006/10/09 PHP
php中实现记住密码自动登录的代码
2011/03/02 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
Javascript 读书笔记索引贴
2010/01/11 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
javascript生成大小写字母
2015/07/03 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
AngularJS自定义指令之复制指令实现方法
2017/05/18 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
python 爬取微信文章
2016/01/30 Python
Unicode和Python的中文处理
2017/03/19 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
Django logging配置及使用详解
2019/07/23 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
使用pytorch实现论文中的unet网络
2020/06/24 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
Python 实现微信自动回复的方法
2020/09/11 Python
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
初中生学习的自我评价
2013/11/14 职场文书
留学生如何写好自荐信
2013/12/27 职场文书
高一英语教学反思
2014/01/22 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
2014年双拥工作总结
2014/11/21 职场文书
公务员个人年终总结
2015/02/12 职场文书
Win11更新失败并提示0xc1900101
2022/04/19 数码科技