利用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 相关文章推荐
不错的asp中显示新闻的功能
Oct 13 Javascript
use jscript Create a SQL Server database
Jun 16 Javascript
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
javascript 数组排序函数sort和reverse使用介绍
Nov 21 Javascript
javascript中的self和this用法小结
Feb 08 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
js获取字符串字节数方法小结
Jun 09 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 Javascript
JavaScript中的类型检查
Feb 03 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
php实现jQuery扩展函数
2009/10/30 PHP
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
PHP中数组的三种排序方法分享
2012/05/07 PHP
PHP信号量基本用法实例详解
2016/02/12 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
php如何获取Http请求
2020/04/30 PHP
js的逻辑运算符 ||
2010/05/31 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
2014/04/10 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
python文件操作之目录遍历实例分析
2015/05/20 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
python实现五子棋小程序
2019/06/18 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
python tkinter实现连连看游戏
2020/11/16 Python
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
Perfume’s Club法国站:购买香水和化妆品
2019/05/02 全球购物
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
摄影实习自我鉴定
2013/09/20 职场文书
高二美术教学反思
2014/01/14 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
校园活动宣传方案
2014/03/28 职场文书
分公司经理任命书
2014/06/05 职场文书
学校三节实施方案
2014/06/09 职场文书
离婚案件答辩状
2015/05/22 职场文书
python ansible自动化运维工具执行流程
2021/06/24 Python
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技