CanleiSky Blog » JavaScript http://www.oioq.com 生活的理想是为了理想的生活. Sun, 30 May 2010 09:14:05 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 正则零宽断言之双单标签混合解析 http://www.oioq.com/weblog/20100108/%e6%ad%a3%e5%88%99%e9%9b%b6%e5%ae%bd%e6%96%ad%e8%a8%80%e4%b9%8b%e5%8f%8c%e5%8d%95%e6%a0%87%e7%ad%be%e6%b7%b7%e5%90%88%e8%a7%a3%e6%9e%90 http://www.oioq.com/weblog/20100108/%e6%ad%a3%e5%88%99%e9%9b%b6%e5%ae%bd%e6%96%ad%e8%a8%80%e4%b9%8b%e5%8f%8c%e5%8d%95%e6%a0%87%e7%ad%be%e6%b7%b7%e5%90%88%e8%a7%a3%e6%9e%90#comments Fri, 08 Jan 2010 12:39:25 +0000 eays http://www.oioq.com/?p=65 断言用来声明一个应该为真的事实。正则表达式中只有当断言为真时才会继续进行匹配。

正则表达式内容：
\{Tag:([a-zA-z0-9]*)\s([^}\/]*)\}(((?!\{\/Tag:)[\s\S])*?)\{/Tag:([a-zA-z0-9]*)\}

匹配字符串1：
{Tag:test param=”1″}test{/Tag:test}

和字符串2：
{Tag:test param=”1″}{Tag:test2 param=”2″/}{/Tag:test}

匹配字符串1非常简单，字符串2相对困难些，思考了一下午，看来只有零宽断言能解决，一时没体会到零宽断言的意思。

正则零宽断言部份：(((?!\{\/Tag:)[\s\S])*?)

中文说明：：(((?!排除的字符)匹配所有表达式)无限次但尽可能少重复)

?!    是 负向零宽先行断言标志，(((?!\{\/Tag:)[\s\S])*?) 的意思是 断言匹配内容为{/Tag:外的所有内容，后跟\s\S括号*表示当断言为真时匹配所有内容。

]]> http://www.oioq.com/weblog/20100108/%e6%ad%a3%e5%88%99%e9%9b%b6%e5%ae%bd%e6%96%ad%e8%a8%80%e4%b9%8b%e5%8f%8c%e5%8d%95%e6%a0%87%e7%ad%be%e6%b7%b7%e5%90%88%e8%a7%a3%e6%9e%90/feed 0 jquery UI dialog 挡住浮动层或iframe http://www.oioq.com/weblog/20091205/jquery-ui-dialog-%e6%8c%a1%e4%bd%8f%e6%b5%ae%e5%8a%a8%e5%b1%82%e6%88%96iframe http://www.oioq.com/weblog/20091205/jquery-ui-dialog-%e6%8c%a1%e4%bd%8f%e6%b5%ae%e5%8a%a8%e5%b1%82%e6%88%96iframe#comments Sat, 05 Dec 2009 04:39:54 +0000 CanleiSky http://www.oioq.com/?p=49 jquery UI dialog 老是挡住浮动的层，导致dialog弹出后浮动元素消失，这种情况只会在ie6下出现，解决办法是在浮动层的CSS样式里设置一下高度就可以了。

]]> http://www.oioq.com/weblog/20091205/jquery-ui-dialog-%e6%8c%a1%e4%bd%8f%e6%b5%ae%e5%8a%a8%e5%b1%82%e6%88%96iframe/feed 0 JavaScript stringToTime(字符转时间),dateDiff(时间相减) http://www.oioq.com/weblog/20090923/javascript-stringtotime%e5%ad%97%e7%ac%a6%e8%bd%ac%e6%97%b6%e9%97%b4datediff%e6%97%b6%e9%97%b4%e7%9b%b8%e5%87%8f http://www.oioq.com/weblog/20090923/javascript-stringtotime%e5%ad%97%e7%ac%a6%e8%bd%ac%e6%97%b6%e9%97%b4datediff%e6%97%b6%e9%97%b4%e7%9b%b8%e5%87%8f#comments Wed, 23 Sep 2009 12:55:44 +0000 CanleiSky http://www.oioq.com/?p=30
function stringToTime(string){
var f = string.split(' ', 2);
var d = (f[0] ? f[0] : '').split('-', 3);
var t = (f[1] ? f[1] : '').split(':', 3);

return (new Date(
parseInt(d[0], 10) || null,
(parseInt(d[1], 10) || 1)-1,
parseInt(d[2], 10) || null,
parseInt(t[0], 10) || null,
parseInt(t[1], 10) || null,
parseInt(t[2], 10) || null
)).getTime();

}

function dateDiff(date1, date2){
var type1 = typeof date1, type2 = typeof date2;

if(type1 == 'string')
date1 = stringToTime(date1);
else if(date1.getTime)
date1 = date1.getTime();

if(type2 == 'string')
date2 = stringToTime(date2);
else if(date2.getTime)
date2 = date2.getTime();

return (date1 - date2) / 1000;//结果是毫秒
}

]]> http://www.oioq.com/weblog/20090923/javascript-stringtotime%e5%ad%97%e7%ac%a6%e8%bd%ac%e6%97%b6%e9%97%b4datediff%e6%97%b6%e9%97%b4%e7%9b%b8%e5%87%8f/feed 0 EDrag仿google ig拖曳层javascript类 http://www.oioq.com/weblog/20090922/edrag%e4%bb%bfgoogle-ig%e6%8b%96%e6%9b%b3%e5%b1%82javascript%e7%b1%bb http://www.oioq.com/weblog/20090922/edrag%e4%bb%bfgoogle-ig%e6%8b%96%e6%9b%b3%e5%b1%82javascript%e7%b1%bb#comments Tue, 22 Sep 2009 13:40:22 +0000 CanleiSky http://www.oioq.com/?p=24 本函数由本站原创，首发于蓝色经典论坛，加入onReady函数。

简单应用实例：
var dropArea = ["wrap","wrap2"];

EDrag.proxy(”drag1″,”h1″,["wrap"]);
EDrag.proxy(”drag2″,”h1″,dropArea);
EDrag.proxy(”drag3″,”h1″,dropArea);
EDrag.proxy(”drag4″,”h1″,dropArea);

EDrag.proxy(”drag5″,”h1″,["wrap2"]);
EDrag.proxy(”drag6″,”h1″,dropArea);
EDrag.proxy(”drag7″,”h1″,dropArea);
EDrag.proxy(”drag8″,”h1″,dropArea);

EF.onReady(function(){EDrag.init();});

完整的应用实例：

<!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>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>无标题文档</title>
<style type=”text/css”>
body{
margin:auto;
font-size:12px;
}
.normal {
width: 300px;
margin:13px auto 13px auto;
min-height: 200px;
padding: 2px;
border: 1px solid #666666;
background: #FFFFFF;
}
.normal h1 {
width: 300px;
height: 25px;
margin: 0px;
line-height: 25px;
font-size: 14px;
background-color: #CCC;
}
</style>
<script type=”text/javascript”>
/**
* eDrag 层拖曳javascript类
* eDrag.proxy(”拖曳层”,”标题”,”可以扔下的容器”);
* eDrag.init();
*
*
* @author Eays
* @version 1.0
*/
var EDrag = _EDrag = {
wraps: [],

titles: [],

target: [],

document: document.documentElement || document.body,

initialPosition: {x:0 ,y:0},

dragArea: null,

shadow: null,

dragAreaCopy: null,

dragParent: null,

mouseOffset: 0,

dragAreaId: null,

releaseTarget: null,

init: function()
{
this.style.loadStyle();
for (var i = 0 ; i < this.titles.length ; i++)
{
var title = EF.get(this.wraps[i] , this.titles[i]);

if(!title.releaseTarget)
title.releaseTarget = this.target[i];

title.onmousedown = this.down;
}
document.onmousemove = this.move;
document.onmouseup = this.up;
},

proxy : function(area , drag , target)
{
this.wraps.push(area);
this.titles.push(drag);
target = target == undefined ? null : target;
this.target.push(target);

},

down: function (e){
if(EDrag.shadow)
EDrag.up();

e = EF.event(e);
current = e.srcElement || e.target;

EDrag.dragArea = EF.get( EF.getDragArea(current) );

if(EDrag.dragArea){
//记录下拖拽对象原始位置
EDrag.initialPosition = EDrag.dragArea.position();
//创建一个原对象的影子
EDrag.shadow = EDrag.fun.createShadow(EDrag.dragArea);
// 用影子替换原有对象并清空对象
EDrag.dragArea = EDrag.dragArea.parentNode.replaceChild(EDrag.shadow , EDrag.dragArea);
EDrag.shadow.html(”");
// 将原对象设为绝对
EDrag.dragArea.setStyle(”position” , “absolute”);
EDrag.dragArea.setStyle(”zIndex” , “100″);
EDrag.dragArea.setStyle(”left” , EDrag.initialPosition.x + “px”);
EDrag.dragArea.setStyle(”top” , EDrag.initialPosition.y + “px”);

EDrag.dragAreaId = EDrag.dragArea.id;
EDrag.dragAreaCopy = EDrag.dragArea.copy();

EDrag.dragArea.setStyle(”filter” , “alpha(opacity=70)”);
EDrag.dragArea.setStyle(”opacity” , “0.7″);

EDrag.dragAreaCopy.hidden();
EDrag.dragAreaCopy.setStyle(”position” , “absolute”);

EDrag.dragArea.setStyle(”margin” , “auto”);
// 添加原对象在文档未尾
EDrag.document.lastChild.appendChild(EDrag.dragArea);
// 鼠标的相对位置
EDrag.mouseOffset = e.offset(EDrag.initialPosition);
//保存release目标
EDrag.releaseTarget = current.releaseTarget;
EDrag.move(e);
}
},

move: function(e)
{
if(!EDrag.dragArea)
return false;

e = EF.event(e);
var position = e.offset(EDrag.mouseOffset);
if(position.x >= 0 && position.x <= EDrag.document.offsetWidth – EDrag.dragArea.offsetWidth)
EDrag.dragArea.setStyle(”left” , position.x +”px”);

if(position.y >= 0)
EDrag.dragArea.setStyle(”top” , position.y +”px”);

//遍厉目标对象所有子节点，给出拖曳层的目标层
for(var i in EDrag.releaseTarget)
{
var releaseTarget = EF.get(EDrag.releaseTarget[i]);

var cover = releaseTarget.getCoverElement(EDrag.dragArea);

if(cover && (EDrag.dragParent.last() != cover))
{
cover.parentNode.insertBefore(EDrag.shadow , cover);
}else if(cover && EDrag.dragParent.last() == cover)
{
EDrag.dragParent.appendChild(EDrag.shadow);
}
}
},

up: function()
{
if(!EDrag.shadow && !EDrag.dragArea)
return false;

EDrag.dragArea.setStyle(”zIndex” , “0″);
try{
EDrag.dragArea.setStyle(”position” , “static”);
EDrag.dragArea.parentNode.removeChild(EDrag.dragArea);
EDrag.dragAreaCopy.id = EDrag.dragAreaId;
EDrag.dragAreaCopy.removeAttribute(”style”);
EDrag.dragAreaCopy.show();
EDrag.dragParent.replaceChild(EDrag.dragAreaCopy , EDrag.shadow);
EDrag.shadow = null;
EDrag.dragAreaCopy.setStyle(”position” , “static”);
EDrag.init();
}catch(e){

}

}
}
/**
* 自带的移动样式
*/
EDrag.style = _EDrag.prototype = {
defaultTitle: {
border: “1px dotted #000;”,
cursor: “move”
},

defaultDotted: {
border: “1px dotted #CCC”,
background: “#EEE”
},

loadStyle: function()
{
for(var i=0 ; i < EDrag.titles.length ; i++)
{
var title = EF.get(EDrag.wraps[i] , EDrag.titles[i]);
if(title != undefined)
{
title.setStyle(”cursor” , EDrag.style.defaultTitle.cursor);
} else {
continue;
}
}
},

setBorder: function(element){
element.setStyle(”border” , EDrag.style.defaultDotted.border);
},

setBackground: function(element)
{
element.setStyle(”background” , EDrag.style.defaultDotted.background);
}
}
EDrag.fun = EF =  _EDrag.prototype = {

eventExt: function(e)
{
e.position = function()
{
e = this;
if(e.pageX || e.pageY){
return {x:e.pageX, y:e.pageY};
}
return {
x:e.clientX + document.body.scrollLeft – document.body.clientLeft,
y:e.clientY + document.body.scrollTop  – document.body.clientTop
};
},

e.offset = function(position)
{
e = this;
var mouse  = e.position();
return {x:parseInt(mouse.x – position.x), y:parseInt(mouse.y – position.y)};
}

return e;
},

event: function(e)
{
var e = e || window.event;
return EF.eventExt(e);
},

getDragArea: function(current)
{
do{
var name = current.id || current.tagName || current.name;
if(EDrag.wraps.search(name))
return EF.ext(current);
}while(current = current.parentNode)
},
search: function(search , array)
{

var flag = false;
array = array || this;

array.sort(function(x , y){
for (var i = 0; i < arguments.length; i++)
{
if(arguments[i].toString() == search)
flag = true;

}
return -1;
});
return flag;
},

_get: function()
{
return document.getElementById(arguments[0])
|| document.getElementsByTagName(arguments[0])
|| document.getElementsByName(arguments[0]);
},

ext: function(object)
{

object.setStyle = function(type , value)
{
eval(”object.style.”+type+”=’”+value+”‘”);
}

object.position = function()
{
return EF.position(this);
}

object.html = function(value)
{
if(value != undefined)
return object.innerHTML = value;

return object.innerHTML;
}

object.nodes = function()
{
var nodes = [];

for(i = 0 ; i < this.childNodes.length ; i++)
{
var name = this.childNodes[i].toString();

if(name.indexOf(”Text”) == -1 && name.indexOf(”HTMLCollection”) == -1)
{
nodes.push(this.childNodes[i]);
}
}
return nodes;
}

object.last = function()
{
var nodes = this.nodes();
return nodes[ nodes.length - 1 ];
},

object.hidden = function()
{
this.setStyle(”display” , “none”);
},

object.show = function()
{
this.setStyle(”display” , “block”);
},

object.copy = function()
{
return EF.get(this.cloneNode(true));
},

object.getCoverElement= function(current)
{
if(this.childNodes == undefined)
return false;

var nodes = this.nodes();
for(i = 0 ; i < nodes.length ; i++)
{
var target = EF.get( nodes[i] );
var name = target.toString();

current = EF.ext(current);
current.position = current.position();
/**
* 相对的y坐标
*/
try{
var left = target.getTopArea().centerX – current.position.x;
var top = target.getTopArea().centerY – current.position.y ;

if((left < current.offsetWidth && left > 0 ) && (top -  target.offsetWidth / 4 < current.offsetHeight && top > 0))
{
EDrag.dragParent = this;
return target;
}else if((left < current.offsetWidth && left > 0 ) && (top < 0 && top >= 0 – target.offsetHeight / 6))
{
EDrag.dragParent = this;
return target;
}
}
catch(e){ }
}
return false;
}

object.getTopArea = EF.getTopArea;

return object;
},

get: function(element , sonElement)
{
var type = typeof element;

if (type.indexOf(”object”) != -1)
{
this.object = element;
this.ext(this.object);
return this.object;
}

if (arguments.length > 1)
{
if (this._get(element).length == undefined) {
this.object = this._get(element).getElementsByTagName(sonElement)[0];
this.ext(this.object);
return this.object;
} else {
this.object = this._get(element)[0].getElementsByTagName(sonElement)[0];
this.ext(this.object);
return this.object;
}
}
this.object = this._get(element) || this._get(element)[0];
this.ext(this.object);
return this.object;
},

position: function(e)
{
var p = {x:0 , y:0};
while (e.offsetParent)
{
p.x += e.offsetLeft;
p.y  += e.offsetTop;
e = e.offsetParent;
}

if (p.x != “” && p.y != “”)
{
return p;
}
},

createBox: function()
{
var box = document.createElement(”div”);
document.documentElement.lastChild.appendChild(box);
return EF.get(box);
},

createShadow: function(current)
{
if (oldShadow = document.getElementById(”EDragShadow”))
{
oldShadow.parentNode.removeChild(oldShadow);
}

current = EF.get(current);

var shadow = current.copy();
shadow = EF.get(shadow);
shadow.id = “EDragShadow”;
shadow.setStyle(”width” , current.offsetWidth – 6 + “px”);
shadow.setStyle(”height” , current.offsetHeight – 6 + “px”);
EDrag.style.setBorder(shadow);
EDrag.style.setBackground(shadow);
return shadow;
},
/**
* 获取单个对象顶部区域,x,y轴中心点
* @param {Object} element
*/
getTopArea: function(element)
{
try{
element = element || this;
element = EF.get(element);
/**
* 对象左边、顶部坐标
*/
var position = element.position();
/**
* 对象的宽和高度
*/
var offset = {x:element.offsetWidth , y:element.offsetHeight};

/**
* x轴中心点
*/
element.centerX = parseInt(position.x + offset.x / 2);
element.centerY = parseInt(position.y + offset.y / 2);

return element;
}catch(e){}

},

isGecko: function()
{
return navigator.userAgent.indexOf(”Gecko”) == -1 ? false :true;
},

isOpera: function()
{
return navigator.userAgent.indexOf(”Opera”) == -1 ? false :true;
},

isIE: function()
{
return document.all ?  true : false;
},

onReady: function(newFunction)
{
if(newFunction == undefined)
return false;

this.domReady = false;

if(functions == undefined)
var functions = [];

functions.push(newFunction);

var initial = function()
{
for(var i in functions)
{
functions[i]();
}
}

this.ready = function()
{
if(this.domReady)
initial();

if (EF.isGecko() || EF.isOpera()) {
try {
document.removeEventListener(’DOMContentLoaded’, initial);
}catch(e){}

document.addEventListener(’DOMContentLoaded’, initial, false);
this.domReady = true;
}
else if (EF.isIE()) {

var timer = window.setInterval(function()
{
try {
document.body.doScroll(”left”);
initial();
window.clearInterval(timer);
this.domReady = true;
}
catch (e) {}
}
, 5);
}
}
this.ready();

}
}
Array.prototype.search = EDrag.fun.search;
var dropArea = ["wrap","wrap2"];
EDrag.proxy(”drag1″,”h1″,["wrap"]);
EDrag.proxy(”drag2″,”h1″,dropArea);
EDrag.proxy(”drag3″,”h1″,dropArea);
EDrag.proxy(”drag4″,”h1″,dropArea);
EDrag.proxy(”drag5″,”h1″,["wrap2"]);
EDrag.proxy(”drag6″,”h1″,dropArea);
EDrag.proxy(”drag7″,”h1″,dropArea);
EDrag.proxy(”drag8″,”h1″,dropArea);
EF.onReady(function(){EDrag.init();});

</script>
</head>
<body>
<table width=”778″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td valign=”top”> <div  id=”wrap”>
<div id=”drag1″>
<h1>我不可以拖到右边</h1>
<p>
设置拖放对象以限制拖放区域
</p>
<p>
例：EDrag.proxy( wrap , title , releaseTarget );
</p>
<p>
releaseTarget 为拖放区域的id,tagName,name数组
</p>
</div>
<div id=”drag2″>
<h1>拖放对象说明</h1>
<p id=”msg4″>
拖放对象继承原对象的所有css特性
</p>
<p>
但似乎对float无效，比要的时候可以外加一个table
</p>
<p>
继承对象保证拖放后的对象和别原对象的一致性
</p>
</div>
<div id=”drag3″>
<h1>将一个层交给eDarg代理</h1>
<p>
EDrag.proxy( wrap , title , releaseTarget );
</p>
<p>
wrap 为可以拖动的层，推荐使用ID
</p>
<p>
title 标题，为鼠标放在上面可以拖动的对象,推荐使用tagName ,releaseTarget上面有说明
</p>
</div>
<div id=”drag4″>
<h1>初始化EDrag拖曳</h1>
<p>
EDrag.init();
</p>
<p>
说明：init() 需要在proxy()方法后面调用
</p>
<p>
这样的结构应该非常易用
</p>
</div>
</div>

</td>
<td  valign=”top”>
<div  id=”wrap2″>
<div id=”drag5″>
<h1>我不可以拖到左边</h1>
<p>
附带函数对象 EDrag.fun 简写EF
</p>
<p>
EF.get();可以支持两个参数,一个参数也可以
</p>
<p>
如：EF.get(”wrap” , “h1″); 表示在wrap元素内部的h1元素
</p>
</div>
<div id=”drag6″>
<h1>EF.get函数说明</h1>
<p>
凡是通过EF.get()函数获得的对象都是经过dom扩展的
</p>
<p>
具有一些基本的扩展功能
</p>
<p>
例如：EF.get(”wrap”).html(”demo”);
EF.get(”wrap”).setStyle(”margin” , “auto”);
</p>
</div>
<div id=”drag7″>
<h1>优势</h1>
<p>
拖曳后的节点上的对象和原对象完全相同，不会影响原排版
</p>
<p>
其它的没什么了，只是感觉比较易用
</p>
<p>

</p>
</div>
<div id=”drag8″>
<h1>新加入onReady函数</h1>
<p>
onReady类似jquery的ready ，使用onReady的优势在于可以在DOM加载完后运行多个函数，
而已运行速度比window.onload快得多
</p>
<p id=”msg”>

</p>
<p>

</p>
</div>
</div>

</td>
</tr>
</table>
</body>
</html>

]]> http://www.oioq.com/weblog/20090922/edrag%e4%bb%bfgoogle-ig%e6%8b%96%e6%9b%b3%e5%b1%82javascript%e7%b1%bb/feed 0