thomas0988
- 浏览: 484995 次
- 性别:
- 来自: 南阳
-
文章分类
最新评论
-
yuanhongb：
这么说来，感觉CGI和现在的JSP或ASP技术有点像啊
cgi -
draem0507：
放假了还这么勤啊
JXL操作Excel -
chenjun1634：
学习中！！
PHP/Java Bridge -
Jelen_123：
好文章，给了我好大帮助！多谢！
hadoop安装配置 ubuntu9.10 hadoop0.20.2 -
lancezhcj：
一直用job
Oracle存储过程定时执行2种方法(转)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<style type="text/css">
body {
width:100%;
max-height:100%;
padding:0px;
margin:0px;
text-align:center;
}
.cell {
float:left;
clear:right;
}
.row {
clear:both;
}
.r_nbsp {
width:20px;
}
.root {
width:868px;
margin: 0 auto;
}
.root * {
/*次属性FF的说*/
-moz-user-select:none;
}
.line {
width:202px;
line-height:20px;
height:20px;
overflow:hidden;
font-size:12px;
}
.move {
border:#CCCCCC 1px solid;
width:200px;
height:aotu;
}
.title {
height:24px;
cursor:move;
background:#0080C0;
font-size:12px;
font-weight:bold;
color:#FFFFFF;
line-height:24px;
text-align:center;
}
.content {
border-top:#CCCCCC 1px solid;
height:100px;
background-color:#F7F7F7;
}
.CDrag_temp_div {
border:#CCCCCC 1px dashed;
}
</style>
<script type="text/javascript">
var Class = {
//创建类
create: function () {
return function () {
this.initialize.apply(this, arguments);
};
}
};
var $A = function (a) {
//转换数组
return a ? Array.apply(null, a) : new Array;
};
var $ = function (id) {
//获取对象
return document.getElementById(id);
};
Object.extend = function (a, b) {
//追加方法
for (var i in b) a[i] = b[i];
return a;
};
Object.extend(Object, {
addEvent : function (a, b, c, d) {
//添加函数
if (a.attachEvent) a.attachEvent(b[0], c);
else a.addEventListener(b[1] || b[0].replace(/^on/, ""), c, d || false);
return c;
},
delEvent : function (a, b, c, d) {
if (a.detachEvent) a.detachEvent(b[0], c);
else a.removeEventListener(b[1] || b[0].replace(/^on/, ""), c, d || false);
return c;
},
reEvent : function () {
//获取Event
return window.event ? window.event : (function (o) {
do {
o = o.caller;
} while (o && !/^\[object[ A-Za-z]*Event\]$/.test(o.arguments[0]));
return o.arguments[0];
})(this.reEvent);
}
});
Function.prototype.bind = function () {
//绑定事件
var wc = this, a = $A(arguments), o = a.shift();
return function () {
wc.apply(o, a.concat($A(arguments)));
};
};
var Table = Class.create();
Table.prototype = {
initialize : function () {
//初始化
var wc = this;
wc.cols = new Array; //创建列
},
addCols : function (o) {
//添加列
var wc = this, cols = wc.cols, i = cols.length;
return cols[i] = {
id : i, div : o, rows : new Array, //创建行
addRow : wc.addRow, chRow : wc.chRow, inRow : wc.inRow, delRow : wc.delRow
};
},
addRow : function (o) {
//添加行
var wc = this, rows = wc.rows, i = rows.length;
return rows[i] = {
id : i, div : o, cols : wc
};
},
inRow : function (a, b) {
//插入行
var wc = b.cols = this, rows = wc.rows, i;
if (a < rows.length) {
for (i = a ; i < rows.length ; i ++) rows[i].id ++;
rows.splice(a, 0, b);
b.id = a;
return b;
} else {
b.id = rows.length;
return rows[b.id] = b;
}
},
delRow : function (a) {
//删除列
var wc = this, rows = wc.rows, i, r;
if (a >= rows.length) return;
r = rows[a];
rows.splice(a, 1);
for (i = a ; i < rows.length ; i ++) rows[i].id = i;
return r;
}
};
var CDrag = Class.create();
CDrag.IE = /MSIE/.test(window.navigator.userAgent);
CDrag.prototype = {
initialize : function () {
//初始化成员
var wc = this;
wc.table = new Table; //建立表格对象
wc.iFunc = wc.eFunc = null;
wc.obj = { on : { a : null, b : "" }, row : null, left : 0, top : 0 };
wc.temp = { row : null, div : document.createElement("div") };
wc.temp.div.setAttribute(CDrag.IE ? "className" : "class", "CDrag_temp_div");
wc.temp.div.innerHTML = " ";
},
reMouse : function (a) {
//获取鼠标位置
var e = Object.reEvent();
return {
x : document.documentElement.scrollLeft + e.clientX,
y : document.documentElement.scrollTop + e.clientY
};
},
rePosition : function (o) {
//获取元素绝对位置
var $x = $y = 0;
do {
$x += o.offsetLeft;
$y += o.offsetTop;
} while ((o = o.offsetParent) && o.tagName != "BODY");
return { x : $x, y : $y };
},
sMove : function (o) {
//当拖动开始时设置参数
var wc = this;
if (wc.iFunc || wc.eFinc) return;
var mouse = wc.reMouse(), obj = wc.obj, temp = wc.temp, div = o.div, position = wc.rePosition(div);
obj.row = o;
obj.on.b = "me";
obj.left = mouse.x - position.x;
obj.top = mouse.y - position.y;
temp.row = document.body.appendChild(div.cloneNode(true)); //复制预拖拽对象
with (temp.row.style) {
//设置复制对象
position = "absolute";
left = mouse.x - obj.left + "px";
top = mouse.y - obj.top + "px";
zIndex = 100;
opacity = "0.3";
filter = "alpha(opacity:30)";
}
with (temp.div.style) {
//设置站位对象
height = div.clientHeight + "px";
width = div.clientWidth + "px";
}
/*div.parentNode.insertBefore(temp.div, div);
div.style.display = "none"; //隐藏预拖拽对象*/
div.parentNode.replaceChild(temp.div, div);
wc.iFunc = Object.addEvent(document, ["onmousemove"], wc.iMove.bind(wc));
wc.eFunc = Object.addEvent(document, ["onmouseup"], wc.eMove.bind(wc));
document.onselectstart = new Function("return false");
},
iMove : function () {
//当鼠标移动时设置参数
var wc = this, cols = wc.table.cols, mouse = wc.reMouse(), obj = wc.obj, temp = wc.temp, row = obj.row, div = temp.row,
t_position, t_cols, t_rows, i, j;
with (div.style) {
left = mouse.x - obj.left + "px";
top = mouse.y - obj.top + "px";
}
for (i = 0 ; i < cols.length ; i ++) {
t_cols = cols[i];
t_position = wc.rePosition(t_cols.div);
if (t_position.x < mouse.x && t_position.x + t_cols.div.offsetWidth > mouse.x) {
if (t_cols.rows.length > 0) { //如果此列行数大于0
if (wc.rePosition(t_cols.rows[0].div).y + 20 > mouse.y) {
//如果鼠标位置大于第一行的位置即是最上。。
//向上
obj.on.a = t_cols.rows[0];
obj.on.b = "up";
obj.on.a.div.parentNode.insertBefore(temp.div, obj.on.a.div);
} else if (t_cols.rows.length > 1 && t_cols.rows[0] == row &&
wc.rePosition(t_cols.rows[1].div).y + 20 > mouse.y) {
//如果第一行是拖拽对象而第鼠标大于第二行位置则，没有动。。
//向上
obj.on.b = "me";
t_cols.rows[1].div.parentNode.insertBefore(temp.div, t_cols.rows[1].div);
} else {
for (j = t_cols.rows.length - 1 ; j > -1 ; j --) {
//重最下行向上查询
t_rows = t_cols.rows[j];
if (t_rows == obj.row) continue;
if (wc.rePosition(t_rows.div).y < mouse.y) {
//如果鼠标大于这行则在这行下面
if (t_rows.id + 1 < t_cols.rows.length && t_cols.rows[t_rows.id + 1] != obj.row) {
//如果这行有下一行则重这行下一行的上面插入
t_cols.rows[t_rows.id + 1].div.parentNode.
insertBefore(temp.div, t_cols.rows[t_rows.id + 1].div);
obj.on.a = t_rows;
obj.on.b = "down";
} else if (t_rows.id + 2 < t_cols.rows.length) {
//如果这行下一行是拖拽对象则插入到下两行，即拖拽对象返回原位
t_cols.rows[t_rows.id + 2].div.parentNode.
insertBefore(temp.div, t_cols.rows[t_rows.id + 2].div);
obj.on.b = "me";
} else {
//前面都没有满足则放在最低行
t_rows.div.parentNode.appendChild(temp.div);
obj.on.a = t_rows;
obj.on.b = "down";
}
return;
}
}
}
} else {
//此列无内容添加新行
t_cols.div.appendChild(temp.div);
obj.on.a = t_cols;
obj.on.b = "new";
}
}
}
},
eMove : function () {
//当鼠标释放时设置参数
var wc = this, obj = wc.obj, temp = wc.temp, row = obj.row, div = row.div, o_cols, n_cols;
if (obj.on.b == "up") {
//向最上添加
o_cols = obj.row.cols;
n_cols = obj.on.a.cols;
n_cols.inRow(0, o_cols.delRow(obj.row.id));
} else if (obj.on.b == "down") {
//相对向下添加
o_cols = obj.row.cols;
n_cols = obj.on.a.cols;
n_cols.inRow(obj.on.a.id + 1, o_cols.delRow(obj.row.id));
} else if (obj.on.b == "new") {
//向无内容列添加
o_cols = obj.row.cols;
n_cols = obj.on.a;
n_cols.inRow(0, o_cols.delRow(obj.row.id));
}
temp.div.parentNode.replaceChild(div, temp.div);
temp.row.parentNode.removeChild(temp.row);
delete temp.row;
Object.delEvent(document, ["onmousemove"], wc.iFunc);
Object.delEvent(document, ["onmouseup"], wc.eFunc);
document.onselectstart = wc.iFunc = wc.eFunc = null;
},
add : function (o) {
//添加对象
var wc = this;
Object.addEvent(o.div.childNodes[CDrag.IE ? 0 : 1], ["onmousedown"], wc.sMove.bind(wc, o));
},
parse : function (o) {
//初始化成员
var wc = this, table = wc.table, cols, i, j;
for (i = 0 ; i < o.length ; i ++) {
cols = table.addCols(o[i].cols);
for (j = 0 ; j < o[i].rows.length ; j ++)
wc.add(cols.addRow(o[i].rows[j]));
}
}
};
Object.addEvent(window, ["onload"], function () {
var wc = new CDrag;
wc.parse([
{
cols : $("m_1"), rows : [$("m_1_1"), $("m_1_2"), $("m_1_3"), $("m_1_4")]
},
{
cols : $("m_2"), rows : [$("m_2_1"), $("m_2_2"), $("m_2_3"), $("m_2_4")]
},
{
cols : $("m_3"), rows : [$("m_3_1"), $("m_3_2"), $("m_3_3"), $("m_3_4")]
},
{
cols : $("m_4"), rows : [$("m_4_1"), $("m_4_2"), $("m_4_3"), $("m_4_4")]
}
]);
});
</script>
</head><body><br />
<div class="root">
<div class="cell" id="m_1">
<div class="line">
第一列</div>
<div class="move" id="m_1_1">
<div class="title">
第一列的第一个的说</div>
<div class="content">
</div>
</div>
<div class="move" id="m_1_2">
<div class="title">
第一列的第二个的说</div>
<div class="content">
</div>
</div>
<div class="move" id="m_1_3">
<div class="title">
第一列的第三个的说</div>
<div class="content">
</div>
</div>
<div class="move" id="m_1_4">
<div class="title">
第一列的第四个的说</div>
<div class="content">
</div>
</div>
</div>
<div class="cell r_nbsp">
</div>
<div class="cell" id="m_2">
<div class="line">
第二列</div>
<div class="move" id="m_2_1">
<div class="title">
第二列的第一个的说</div>
<div class="content">
</div>
</div>
<div class="move" id="m_2_2">
<div class="title">
第二列的第二个的说</div>
<div class="content">
</div>
</div>
<div class="move" id="m_2_3">
<div class="title">
第二列的第三个的说</div>
<div class="content">
</div>
</div>
<div class="move" id="m_2_4">
<div class="title">
第二列的第四个的说</div>
<div class="content">
</div>
</div>
</div>
<div class="cell r_nbsp">
</div>
<div class="cell" id="m_3">
<div class="line">
第三列</div>
<div class="move" id="m_3_1">
<div class="title">
第三列的第一个的说</div>
<div class="content">
</div>
</div>
<div class="move" id="m_3_2">
<div class="title">
第三列的第二个的说</div>
<div class="content">
</div>
</div>
<div class="move" id="m_3_3">
<div class="title">
第三列的第三个的说</div>
<div class="content">
</div>
</div>
<div class="move" id="m_3_4">
<div class="title">
第三列的第四个的说</div>
<div class="content">
</div>
</div>
</div>
<div class="cell r_nbsp">
</div>
<div class="cell" id="m_4">
<div class="line">
第四列</div>
<div class="move" id="m_4_1">
<div class="title">
第四列的第一个的说</div>
<div class="content">
</div>
</div>
<div class="move" id="m_4_2">
<div class="title">
第四列的第二个的说</div>
<div class="content">
</div>
</div>
<div class="move" id="m_4_3">
<div class="title">
第四列的第三个的说</div>
<div class="content">
</div>
</div>
<div class="move" id="m_4_4">
<div class="title">
第四列的第四个的说</div>
<div class="content">
</div>
</div>
</div>
</div>
</body>
</html>
分享到：
发表评论
-
mysql 定时任务
2015-11-03 09:57 778定时任务 查看event是否开启: show variabl ... -
tomcat服务器大数量数据提交Post too large解决办法
2015-10-29 11:05 738tomcat默认设置能接收HTTP POST请求的大小最大 ... -
Tomcat启动内存设置
2015-10-20 15:40 696Tomcat的启动分为startupo.bat启动和注册为w ... -
Java串口包Javax.comm的安装
2015-10-12 16:32 698安装个java的串口包安装了半天，一直找不到串口，现在终于搞 ... -
在 Java 应用程序中访问 USB 设备
2015-10-10 17:49 961介绍 USB、jUSB 和 JSR- ... -
mysql定时器
2015-08-04 14:01 6065.1以后可以使用 ALTER EVENT `tes ... -
oracle安装成功后，更改字符集
2015-07-23 11:53 641看了网上的文章，乱码有以下几种可能 1. 操作系统的字符集 ... -
js iframe 打印 打印预览 页眉页脚的设立
2015-06-08 15:21 1187js iframe 打印 打印预览 页眉页脚的设置 1、 ... -
不同小图标的编码网页中的大于号，小于号，应该用编码来代替,HTML中特殊字符和与之对应的ASCII代码
2015-06-08 14:44 3275上面两个符号的HTML代 ... -
利用html5调用本地摄像头拍照上传图片
2015-05-18 09:36 2610测试只有PC上可以，手机上不行 <!DOCTYPE ... -
必须Mark！最佳HTML5应用开发工具推荐
2015-05-15 22:50 964摘要：HTML5自诞生以来，作为新一代的Web标准，越来 ... -
Mobl试用二
2015-05-13 14:28 648最近有空又看了一下Mobl的一些说语法，备忘一下： 1 ... -
Nginx安装部署
2015-05-08 19:59 481Nginx ("engine x") 是 ... -
Nginx配置文件详细说明
2015-05-08 19:58 616在此记录下Nginx服务器nginx.conf的配置文件说明 ... -
table中的超长字符串用省略号表示的css样式
2015-05-06 15:54 1344<style> table td{white- ... -
axis调用cxf
2015-04-23 13:51 5571、写address时不用加？wsdl Service s ... -
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2015-04-19 18:03 611<html> <head>< ... -
javascript:window.print() 打印
2015-04-17 17:03 6441.JavaScript打印<input id=&qu ... -
网页设置A4大小
2015-04-16 19:53 1224在公制长度单位与屏幕分辨率进行换算时，必须用到一个DPI(D ... -
表格设置边框 效果
2015-04-16 18:22 632第1种对表格设置边框 效果 站名 网址 说明 ...
相关推荐
通过添加按钮、链接、表单等交互元素，用户可以与页面进行更深层次的互动。例如，点击按钮可以触发动画或跳转至其他页面，滑动屏幕可以展示更多信息等。在木疙瘩中，设计者可以通过拖拽方式快速添加交互元素，并配置...
jQuery UI库提供了拖拽功能，它允许用户通过鼠标或触摸设备将元素在整个页面或某个限制区域内移动。要实现拖拽效果，首先需要在HTML中定义可拖动的元素，然后在jQuery中调用`.draggable()`方法： ```html 这是一...
- 在Vue.js中，可以监听`dragstart`、`dragover`、`drop`等事件，结合Vue的响应式系统来更新数据模型，从而实现拖拽效果。 4. **跨浏览器兼容性** - 虽然现代浏览器对HTML5 API的支持较好，但考虑到IE Edge和其他...
Material Design是一种视觉语言，强调清晰的层次结构、动画效果和触觉反馈，旨在提供一致、美观且易于理解的用户体验。谷歌样式的模态窗口会具有简洁、明快的外观，以及平滑的过渡和动画效果。 纯JavaScript实现的...
3. 布局设计：在前端页面中，合理布局各个图表，确保信息层次清晰，视觉效果良好。这可能涉及到CSS Grid或Flexbox布局，以及响应式设计，使得大屏在不同设备上都能有良好的显示效果。 4. 实时更新：如果数据需要...
在这种布局中，各部分宽度比例不一，可以创建出层次感丰富的页面。例如，“1:33:11”可能表示左侧栏占据1份宽度，中间栏占据33份，右侧栏占据11份，总共45份，适应不同内容展示的需求。 描述中的“功能模块设置：可...
在Web开发领域，jQuery是一个广泛使用的...实际应用中可能需要根据具体需求进行调整，例如增加节点的展开/折叠功能、优化拖拽效果、处理边界情况等。记得在开发过程中进行充分的测试，确保功能的稳定性和用户体验。
2. **多区域划分**：在网页的各个部分设置可拖放的区域，用户可以根据需要将元素拖放到指定的区域内，实现动态布局或者组织信息。 3. **样式自定义**：由于插件允许完全自定义样式，开发者可以按照自己的设计需求...
异步加载是zTree的核心特性之一，它允许在用户滚动或点击节点时按需加载子节点数据，减少了初始页面加载时的数据量，提高了页面响应速度。实现异步加载需要设置`async`参数，例如： ```javascript var setting = { ...
4. **3D效果（3D Transitions）**：对于追求更高层次视觉体验的开发者，可以尝试用JS实现旋转、缩放等3D转换效果。这需要利用到CSS3的3D转换属性和JavaScript的变换函数。 5. **动画弹出（Animated Popups）**：...
这种效果通常被用在应用的主页面或者图片浏览等场景，为用户提供流畅的界面交互体验。接下来，我们将深入探讨如何在Android中实现这样的功能。 1. **手势检测（Gesture Detection）** - Android提供了`...
在描述中提到的"jqueryUI组件列表拖拽"就是这个功能的应用，用户可以把列表中的项拖放到指定的模块中。 2. **jQuery UI Sortable**: 另一个关键组件是Sortable，它使得列表或网格中的元素可以被用户重新排序。当...
JavaScript 横向树是一种特殊的可视化数据结构，它在网页中呈现为水平排列的节点，通常用于展示层次结构清晰的信息，比如组织结构、文件系统或流程图。这种类型的树状结构相比传统的垂直树，更适应有限的空间，尤其...
7. **jQuery插件应用**：介绍jQuery UI插件，如autocomplete、拖拽、折叠面板、日历、Tab和模态对话框等，以及使用第三方插件如slidr制作幻灯片效果，增强网页功能和视觉效果。 课程推荐教材《jQuery实战从入门到...
3. **监听zTree节点拖放事件**：当节点被拖放到画布上时，利用 `jsPlumbToolkit` 添加新的节点。 4. **创建连线**：监听拖拽事件，当用户拖动鼠标在两个节点之间创建连接时，调用 `jsPlumbToolkit` 的方法创建连线。...
本篇文章将详细讲解标题和描述中提到的各种菜单效果，包括多级渐变菜单、经典树型菜单、三级关联菜单、收藏夹式树型菜单、拖拽菜单、五角型菜单以及软件型菜单。 首先，多级渐变菜单是一种视觉效果丰富的菜单设计，...
1. **引入依赖**：确保页面中已经包含了jQuery库以及TreeTable插件的JS和CSS文件。 2. **初始化表格**：使用jQuery选择器找到需要转换为TreeTable的元素，并调用初始化方法，如`$("#myTable").treeTable();` 3. **...
在JavaScript中，可以通过改变元素的`z-index`属性来控制其在层次结构中的位置，确保弹出层位于最前面。 6. **事件委托**：为了提高性能和减少事件监听器的数量，开发者可能会使用事件委托。例如，可以在父元素上...
开发者可以利用这些技术监听用户的触摸动作，通过计算手指移动的距离和速度来判断是否触发翻页，然后通过CSS3的transform属性实现平滑的动画效果，使页面在拖动后平滑过渡到下一个或上一个tab。 总的来说，“tab...