首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

利用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>

源代码下载

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
围观tangram js库
Dec 28 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
avalonjs制作响应式瀑布流特效
May 06 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 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
天梯图(1) 德生G88(1) SLi Minor 2020(63) 纸巾盒(1) CPU(2) 爱尔兰购物网站(30) ICF-F10(1) 香港购物网站(84) AE3805(1) 德生1994(1)
You might like
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
php生成xml时添加CDATA标签的方法
2014/10/17 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
php递归函数怎么用才有效
2018/02/24 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
理解Javascript_03_javascript全局观
2010/10/11 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
学习Node.js模块机制
2016/10/17 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
Python随手笔记之标准类型内建函数
2015/12/02 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
在python中求分布函数相关的包实例
2020/04/15 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
银行实习生的自我评价
2014/01/13 职场文书
JAVA程序员自荐书
2014/01/30 职场文书
法人委托书范本
2014/04/04 职场文书
支部组织生活会方案
2014/06/10 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书
Golang日志包的使用
2022/04/20 Golang