博客园_追梦流星

JQuery之拖拽插件

2011-04-14T12:05:00Z

一直以来，都对JS获取元素的位置感到非常的困惑：一会client、一会offset、一会scroll。

再加上各大浏览器之间的不兼容，唉，搞得哥晕晕乎乎的。

而很多页面效果都要用到这些位置。不得已，得练练，得记记。

下面就来说说这个基于 JQuery的简易拖拽插件吧。

按惯例，先说说拖拽的原理，以及搞这么一个东东的步骤：

那什么是拖拽呢？看名字就知道了：就是把一个东东拖来拽去的。放到我们的DOM上，就是改变它的位置。

它只有两个难点：1、如何知道是在拖？ 2、如何知道从哪拖，拖到哪？

其实，这也算不上难点，毕竟两者都是基础的东西，关键在于熟练。

换到js 中，我们搞一个拖拽效果，大致有如下步骤：

1、让元素捕获事件（一般情况下，无非就是mousedown、mousemove、mouseup)

2、在mousedown时，标记开始拖拽，并获取元素及鼠标的位置。

3、在mousemove时，不断的获取鼠标的新位置，并通过相应的位置算法，来重新定位元素位置。

4、在mouseup时，结束拖拽。。。然后周而复始。

这中间，个需要注意的地方：被拖拽的元素，至少需要相对或绝对定位，否则拖拽不会有效果。

OK，不多说，无代码，无真相。相应的解释都在其中了：

猛击下载：

<!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=utf-8"/>

<title>Jeremy  -  DragDrop Test !</title>

<meta name="keywords" content="Javascript自由拖拽类" />

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>



<script type="text/javascript">

(function($)

{

	$.extend({
		//获取鼠标当前坐标
            mouseCoords:function(ev){
		if(ev.pageX || ev.pageY){
		    return {x:ev.pageX, y:ev.pageY};}
		return {
			x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
			y:ev.clientY + document.body.scrollTop  - document.body.clientTop
		};
	    },
		//获取样式值
            getStyle:function(obj,styleName)
	    {
		return obj.currentStyle ? obj.currentStyle[styleName] : document.defaultView.getComputedStyle(obj,null)[styleName];
//                return obj.currentStyle ? obj.currentStyle[styleName] : document.defaultView.getComputedStyle(obj,null).getPropertyValue(styleName);
            }
       });  

	// 元素拖拽插件
        $.fn.dragDrop = function(options)
	{
		var opts = $.extend({},$.fn.dragDrop.defaults,options);
		return this.each(function(){
			//是否正在拖动
	                var bDraging = false;   
			//移动的元素
	                var moveEle = $(this);
			//点击哪个元素，以触发移动。
	                //该元素需要是被移动元素的子元素（比如标题等）
	                var focuEle = opts.focuEle ? $(opts.focuEle,moveEle) : moveEle ;
			if(!focuEle || focuEle.length<=0)
			{
				alert('focuEle is not found! the element must be a child of '+this.id);
				return false;
			}                

			// initDiffX|Y : 初始时，鼠标与被移动元素原点的距离
	                // moveX|Y : 移动时，被移动元素定位位置 (新鼠标位置与initDiffX|Y的差值)
	                // 如果定义了移动中的回调函数，该对象将以参数传入回调函数。
	                var dragParams = {initDiffX:'',initDiffY:'',moveX:'',moveY:''}; 
			//被移动元素，需要设置定位样式，否则拖拽效果将无效。
	                moveEle.css({'position':'absolute','left':'0','top':'0'});
			//点击时，记录鼠标位置
	                //DOM写法： getElementById('***').onmousedown= function(event);
	                focuEle.bind('mousedown',function(e){                
				//标记开始移动
	                    bDraging = true;
			        //改变鼠标形状
	                    moveEle.css({'cursor':'move'});
			        //捕获事件。（该用法，还有个好处，就是防止移动太快导致鼠标跑出被移动元素之外）
	                    if(moveEle.get(0).setCapture)
			    {  
				moveEle.get(0).setCapture();  
			     } 	

				//（实际上是鼠标当前位置相对于被移动元素原点的距离）
                   		 // DOM写法：(ev.clientX + document.body.scrollLeft - document.body.clientLeft) - document.getElementById('***').style.left;

                    		dragParams.initDiffX = $.mouseCoords(e).x - moveEle.position().left;
				dragParams.initDiffY = $.mouseCoords(e).y - moveEle.position().top;

			 });

			//移动过程
	                focuEle.bind('mousemove',function(e){
				if(bDraging)
				{    
					//被移动元素的新位置，实际上鼠标当前位置与原位置之差
		                        //实际上，被移动元素的新位置，也可以直接是鼠标位置，这也能体现拖拽，但是元素的位置就不会精确。
		                        dragParams.moveX = $.mouseCoords(e).x - dragParams.initDiffX;
					dragParams.moveY = $.mouseCoords(e).y - dragParams.initDiffY;
					//是否限定在某个区域中移动.
		                        //fixarea格式: [x轴最小值,x轴最大值,y轴最小值,y轴最大值]
		                        if(opts.fixarea)
					{	
						if(dragParams.moveX<opts.fixarea[0])
						{
							dragParams.moveX=opts.fixarea[0]
						}
						if(dragParams.moveX>opts.fixarea[1])
						{
							dragParams.moveX=opts.fixarea[1]
						}
						if(dragParams.moveY<opts.fixarea[2])
						{
							dragParams.moveY=opts.fixarea[2]
						}
						if(dragParams.moveY>opts.fixarea[3])
						{
							dragParams.moveY=opts.fixarea[3]
						}	
					}

					//移动方向：可以是不限定、垂直、水平。
		                        if(opts.dragDirection=='all')
					{
						//DOM写法： document.getElementById('***').style.left = '***px'; 
			                            moveEle.css({'left':dragParams.moveX,'top':dragParams.moveY});
					}
					else if (opts.dragDirection=='vertical')
					{
						moveEle.css({'top':dragParams.moveY});
					}
					else if(opts.dragDirection=='horizontal')
					{
						moveEle.css({'left':dragParams.moveX});
					}
					//如果有回调
		                        if(opts.callback)
					{
						//将dragParams作为参数传递
			                            opts.callback.call(opts.callback,dragParams);
					}
				}

			 });

			//鼠标弹起时，标记为取消移动
               		 focuEle.bind('mouseup',function(e){
				bDraging=false;
				moveEle.css({'cursor':'default'});
				if(moveEle.get(0).releaseCapture)
				{
					moveEle.get(0).releaseCapture();
				}
			});
		});
	};
	//默认配置
        $.fn.dragDrop.defaults = 
	{
		focuEle:null,            //点击哪个元素开始拖动,可为空。不为空时，需要为被拖动元素的子元素。
	        callback:null,            //拖动时触发的回调。
                dragDirection:'all',    //拖动方向：['all','vertical','horizontal']
                fixarea:null            //限制在哪个区域拖动,以数组形式提供[minX,maxX,minY,maxY]
        };
})(jQuery);   

// test 

   $(function(){
//限定区域，有回调函数。
        $('#dragDiv').dragDrop({fixarea:[0,$('#dragContainer').width()-50,0,$('#dragContainer').height()-50],callback:function(params){
	$('#span1').text('X:'+params.moveX+' Y:'+params.moveY);
}});
//默认设置
        $('#dragDiv1').dragDrop();
});

</script>
</head>
<body>
<div id="dragContainer" style="position:relative;left:10px;top:10px;border:1px dashed blue;width:500px;height:500px;">
<div id="dragDiv" style="background-color:blue;height:50px;width:50px;">
</div>
<div id="dragDiv1" style="border:1px solid red;height:50px;width:50px;">
</div>
</div>
<span id="span1"></span></body>
</html>

本文链接

SQL中SET和SELECT赋值的区别

2011-03-30T02:19:00Z

最近的项目写的SQL比较多，经常会用到对变量赋值，而我使用SET和SELECT都会达到效果。

那就有些迷惑，这两者有什么区别呢？什么时候哪该哪个呢？

经过网上的查询，及个人练习，总结两者有以下几点主要区别：

假定有设定变量：

DECLARE @VAR1 VARCHAR(1)
DECLARE @VAR2 VARCHAR(2)

1、SELECT可以在一条语句里对多个变量同时赋值,而SET只能一次对一个变量赋值，如下：

SELECT @VAR1='Y',@VAR2='N'
-- 而SET要达到同样的效果，需要：
SET @VAR1='Y'
SET @VAR2='N'

/*
   说到这个，SQL内置的变量：@@ERROR 和 @@ROWCOUNT必须要在一句SQL语句中捕获。如果用set分两句来获取它们，将获取不完整，这时就应该用select来获取值。
*/

2、表达式返回多个值时，用SET将会出错，而SELECT将取最后一个值，如下：

----以下假定Permission表有多个IsRight记录
SELECT @VAR1 = IsRight FROM Permission   --将取最后一个值

SET @VAR1 = IsRight FROM Permission   --将报错

3、表达式无返回值时，用SET将置变量值为NULL,用SELECT交保持变量值，如下：

----以下假定Permission记录为空
SET @VAR1 = '初始值'


SELECT @VAR1 = IsRight FROM Permission   --此时@VAR1为'初始值'

SET  @VAR1 = (SELECT IsRight FROM Permission)   --此时@VAR1为NULL

4、使用标量子查询时，如果无返回值，SET和SELECT一样，都将置为NULL,如下：

----以下假定Permission记录为空
SET @VAR1 = '初始值'

SELECT @VAR1 =(SELECT IsRight FROM Permission )   --此时@VAR1为NULL

SET  @VAR1 = ( SELECT IsRight FROM Permission)   --此时@VAR1为NULL

附上两篇参考文章：

１、http://hi.baidu.com/lovebeast/blog/item/309fc95484581c52d10906b9.html

２、http://www.cnblogs.com/jiajinyi/archive/2009/02/17/1392420.html (着重提到了标量子查询)

本文链接

JS定时保存表单数据

2011-03-16T04:41:00Z

我相信有不少TX用过QQ或163的邮箱吧？
他们中有一个比较有用且有趣的功能，如果您在编写邮件，那在固定一个时间频率内，它会自动将您的邮件内容保存起来，以免丢失。
（忘记是不是两家邮箱都有这个功能）。
那这个功能是怎么做的呢？

定时，我们知道怎么弄，但保存呢？也许我们会通过隐藏域等手段来存放数据。但是，这个却有个缺点：那就是刷新页面后，数据将会丢失。
而此时，就该轮到我们很少关注，而且估计有不少人不知道的UserData 行为（userData Behavior）登场了：
而这个UserData是什么？怎么用？，我将在文章最后转载一篇介绍它的文章。
现在，我直接上例子，所谓无代码，无真相嘛：

<!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>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <script type="text/javascript">

	window.onload=function(){

		var txtObj = document.getElementById('txt1');
		var spanObj = document.getElementById('s1');

		//自动保存
		txtObj.addBehavior("#default#userData");

		var saveTimer= setInterval(function(){
			txtObj.setAttribute('OValue',txtObj.value);
			txtObj.save('SavedData');

			spanObj.innerText='数据保存于：'+(new Date());
			setTimeout(function(){
				spanObj.innerText='';
			},1000);

		},10000); //每分钟保存一次

		document.getElementById('btn1').attachEvent('onclick',function(){
			clearInterval(saveTimer); //取消保存
			txtObj.removeAttribute('OValue');
		});

		document.getElementById('btn2').attachEvent('onclick',function(){
			txtObj.load('SavedData');
			alert(txtObj.getAttribute('OValue'));
			//txtObj.value = txtObj.getAttribute('OValue');
		});
	};

  </script>
 </head>

 <body>   
     <span id="s1" style="color:red;"></span>
	 <p />
     <textarea height="500" style="height:500px;width:500px;" id="txt1">
	 </textarea>
	 <p />
	 <input type="button" id="btn1" value="停止保存" />
	 <input type="button" id="btn2" value="获取保存的值" />
 </body>
</html>

将这段html复制下来运行一下，你就会发现，其实这跟邮箱中的定时保存基本一致了，在润色一下就OK了。

----------------------------

下面是一篇描述、讲解UserData的文章，来自于：http://www.cnblogs.com/isoar/archive/2010/06/18/1759859.html?login=1#commentform

UserData 行为（userData Behavior）：

1、说明：

userData行为通过将数据写入一个UserData存储区（UserData store）来保存数据，userData可以将数据以XML格式保存在客户端计算机上，如果你用的是 Windows 2000 或者 Windows XP，是保存在C:\Documents and Settings\Liming\UserData\文件夹下（如果操作系统不是安装在C盘，那么C就应该是操作系统所在的分区）。

该数据将一直存在，除非你人为删除或者用脚本设置了该数据的失效期。

userData行为提供了一个比Cookie更具有动态性和更大容量的数据结构。每页的UserData存储区数据大小可以达到64 Kb，每个域名可以达到640 Kb。

userData行为通过sessions为每个对象分配UserData存储区。使用save和load方法将UserData存储区数据保存在缓存（cache）中。一旦UserData存储区保存以后，即使IE浏览器关闭或者刷新了，下一次进入该页面，数据也能够重新载入而不会丢失。

出于安全的考虑，相同协议使用同一个文件夹保存UserData存储区数据。

For security reasons, a UserData store is available only in the same directory and with the same protocol used to persist the store.

在HTML、HEAD、TITLE和STYLE标记上应用了userData行为后使用save和load方法将会出错。
Setting the userData behavior (proposed) class on the HTML, HEAD, TITLE, or STYLE object causes an error when the save or load method is called.

必须在行内或者文档的HEAD部分宣告如下样式：

<STYLE>
   .userData {behavior:url(#default#userdata);}
</STYLE>

userData行为可用于Microsoft? Win32?和Unix平台上的IE 5.0以上版本，不支持Netscape。

2、语法：

HTML    <ELEMENT STYLE="behavior:url('#default#userData')" ID=sID>

Script    object.style.behavior = "url('#default#userData')"

         object.addBehavior ("#default#userData")

注：sID参数是一个可以描述该标记的唯一id。ID是可选的，但如果有，可以在脚本中方便地对该标记加以控制。

3、成员：

expires

  设置或取得使用userData行为保存数据的失效日期。

脚本语法：对象ID.expires = 参数

参数是一个使用UTC（Universal Time Coordinate，世界调整时间）格式表示失效日期的字符串。该属性可以读写，没有默认值。浏览器会对比这个日期和当前日期，如果到期，该数据就自动失效。

getAttribute()
  取得指定的属性值。

load(存储区名)
  从UserData存储区载入存储的对象数据。

removeAttribute()
  从对象中删除指定的属性值。

save(存储区名)
  将对象数据存入一个UserData存储区。

setAttribute()
  设置指定的属性值。

XMLDocument
  取得存储该对象数据的XML DOM引用。

具体用法可以查看MSDN（http://msdn.microsoft.com）

本文链接

求解：AJAX轮询跨域WebService。

2011-03-14T02:38:00Z

目前有几个工作流系统，每个系统都通过webservice向外提供对工作数目的查询。

工作数目均有以下几种方式：在办、待办、已办。

也就是说，每个webservice都有至少3个对外提供的函数（所有系统的函数签名均一致）。

需求：

在.NET(2.0)环境下，编写一个web控件或webpart，来集中显示每个系统的工作数目。

布局如下：

说明：其中绿色部分，表示是拥有当前焦点的系统和工作项类型。

左边的三个小框显示的是工作项类型，上方的小框显示的是系统。

左边的工作项类型中的红色文字，显示的是所有系统在某个类型（比如在办）下的总数目和 ,比如，在办的（23），表示是的所有系统（5+7+11+0）的和。待办、已办同理。

右边的系统中的红色文字，显示的是当前系统在当前类型（即左边拥有当前焦点的类型）下的工作项数目。比如，系统2(7)，表示系统2拥有7项在办工作、系统3拥有11项在办工作。当点击切换左边的工作类型类型时，右边的所有系统的数目也会改变，比如，当点击待办时，右边的所有系统的数目均会变成各系统下拥有的待办数目。切换后的界面如下所示：

行为描述：

组件（控件）加载完成时，默认选中第一个系统，及第一个工作项类型（在办）。

点击左边的工作项类型时，右边的系统数目相应的改变，同时更新列表。

点击某个系统时，更新列表。

技术选用：

1、.NET : HttpWebRequest

2、JavaScript:Ajax

需要注意：

1、某个系统所在的服务器停止提供服务或服务器响应缓慢时，控件或组件不能阻塞页面响应。

2、所有的webservice与控件或组件所在的站点不为一个域（即所有的请求均是跨域）。而且webservice两两之间也不在同一个域。

----------------------

目前，我分别使用HttpWebRequest和JS两种方式进行了处理。存在以下问题：

使用HttpWebRequest时，当某个webserivce停止响应，或响应慢时，会导致使用控件或组件的页面被阻塞。

使用ajax时，会出现跨域问题。

因此，将这个需求和碰到的问题发到这里，请各位大牛们帮忙解决。。

本文链接

ASP.NET Request 与 Name（表单元素值）

2011-02-16T04:40:00Z

ASP.NET中，我们在后台获取页面表单元素中的值的方法通常有：
Request.Form (Post) 、Request.QueryString(GET)、Request.Params等几种。

当然，还可以直接使用Request本身的索引。

-----

有些时候，我们页面上的表单元素的值（比如下拉列表）是通过ajax(js)来动态改变的，那在后台再使用.Value这些就不能再获取到了。

这个时候怎么办呢？

一、可以使用一个隐藏控件来存放选中的值。然后在后台获取该隐藏控件的值。

二、我们应该知道，表单元素的值的传递是通过name属性来标识的（不管是Post还是Get)。

无论值怎么变，该元素的name还是不变的，那在ASP.NET中，就表示UniqueID是不变的，那我们就可以通过

Request[***.UniqueID]来获取元素值。

------

那如果页面上有多个具有相同name的元素时，我们怎么获取值呢？

通过Request及相关几个（对象）属性也是可以获取到的，默认情况下，获取到的值是以逗号分隔的。

但是：如果我们在表单元素中输入的值本身就包含逗号时，怎么办呢？

》》也许我们很少注意到，Request的几个（对象）属性都包含了一对方法（Get和GetValues)。它们其实就可以获取传递的元素值。

针对有多个相同name元素时：

Get获取到的值以逗号分隔，而不管元素值本身是否包含逗号。

GetValues会将获取到的元素值以数组方式存放，而不以逗号连接。

我们可以想像，Get是对GetValues的又一层包装(数组join方法连接)

因此，如果要获取多个相同name元素的值，可以使用GetValues..

本文链接

Js下的StringBuilder

2010-10-25T02:40:00Z

搞C#的应该都知道，C#中的StringBuilder效率远远高于String,那在JS中呢？

看看这篇文章的分析：http://www.cnblogs.com/matthew/archive/2008/08/15/1268843.html

通过这篇文章可以看出，在js中也存在同样的问题，

按照这两篇文章:

http://www.cnblogs.com/xeonwell/archive/2007/02/11/stringbuilder_javascript.html

http://www.cnblogs.com/hooyes/archive/2009/12/10/javascript_stringbuilder.html

的处理，我也搞了个js中的StringBuilder来用,在这里记录以来，以便要用的时候好拿：

  1 /*
  2   模拟 C#中的StringBuilder,提升JS中字符串拼接的效率及性能。
  3   Author : Jeremy
  4   Date   : 2010-10-25
  5 */
  6
  7 //对象定义（构造函数)
  8 //参数：所有参数须为字符串形式.
  9 //当参数长度为1时，参数值将是字符串之间连接的分隔符
10 //当参数长度大于1时，最后一位将是字符串之间的分隔符,其余的参数将是字符串值
11 //当不指定参数时，分隔符默认为空白
12 //也可以不指定分隔符，而在ToString中显式指定分隔符
13 //如：var str = new StringBuilder(',')；则在ToString时，将使用,号作为分隔符连接字符串
14 // var str = new StringBuilder('a','b','c',','); 则在ToString时，将输出 'a,b,c'
15 function StringBuilder()
16 {
17     this._buffers = [];
18     this._length=0;
19     this._splitChar = arguments.length>0 ? arguments[arguments.length-1] : '';
20
21     if(arguments.length>0)
22     {
23         for(var i=0,iLen=arguments.length-1;i<iLen;i++)
24         {
25             this.Append(arguments[i]);
26         }
27     }
28 }
29
30 //向对象中添加字符串
31 //参数：一个字符串值
32 StringBuilder.prototype.Append=function(str)
33 {
34     this._length += str.length;
35     this._buffers[this._buffers.length] = str;
36 }
37 StringBuilder.prototype.Add = StringBuilder.prototype.append;
38
39 //向对象附加格式化的字符串
40 //参数：参数一是预格式化的字符串，如：'{0} {1} {2}'
41 //格式参数可以是数组，或对应长度的arguments,
42 //参见示例
43 StringBuilder.prototype.AppendFormat=function()
44 {
45      if(arguments.length>1)
46      {
47         var TString=arguments[0];
48         if(arguments[1] instanceof Array)
49         {
50             for(var i=0,iLen=arguments[1].length;i<iLen;i++)
51             {
52                 var jIndex=i;
53                 var re=eval("/\\{"+jIndex+"\\}/g;");
54                 TString= TString.replace(re,arguments[1][i]);
55             }
56         }
57         else
58         {
59             for(var i=1,iLen=arguments.length;i<iLen;i++)
60             {
61                 var jIndex=i-1;
62                 var re=eval("/\\{"+jIndex+"\\}/g;");
63                 TString= TString.replace(re,arguments[i]);
64             }
65         }
66         this.Append(TString);
67      }
68      else if(arguments.length==1)
69      {
70         this.Append(arguments[0]);
71      }
72 }
73
74 //字符串长度（相当于ToString()后输出的字符串长度
75 StringBuilder.prototype.Length=function()
76 {
77     if(this._splitChar.length>0 && (!this.IsEmpty()))
78     {
79         return  this._length + ( this._splitChar.length * ( this._buffers.length-1 ) ) ;
80     }
81     else
82     {
83         return this._length;
84     }
85 }
86 //字符串是否为空
87 StringBuilder.prototype.IsEmpty=function()
88 {
89     return this._buffers.length <= 0;
90 }
91 //清空
92 StringBuilder.prototype.Clear = function()
93 {
94     this._buffers = [];
95     this._length=0;
96 }
97 //输出
98 //参数：可以指定一个字符串（或单个字符），作为字符串拼接的分隔符
99 StringBuilder.prototype.ToString = function()
100 {
101     if(arguments.length==1)
102     {
103         return this._buffers.join(arguments[1]);
104     }
105     else
106     {
107         return this._buffers.join(this._splitChar);
108     }
109 }
110
111 //示例：
112 /*
113 var sb = new StringBuilder('&&'); //指定&&为分隔符
114 alert(sb.Length());
115 sb.Append('hEllo');
116 sb.Append('wORLD');
117 alert(sb.ToString()); //将输出 hEllo&&wORLD
118 sb.Clear();
119 sb.AppendFormat("Hello! {0} {1} {2}",['a','b','c']);
120 sb.AppendFormat("Today is {0}",['周一']);
121 alert(sb.ToString());  //将输出 Hello! a b c&&Today is 周一
122 sb.Clear();
123 sb.AppendFormat("Hello! {0} {1} {2}",'a','b','c');
124 sb.Append('World');
125 alert(sb.ToString('__')); //将输出 Hello! a b c__World
126 */

本文链接

SharePoint判断页面(或WebPart)是否处于编辑模式.

2010-07-04T09:36:00Z

相信大家经常进行编辑(配置)WebPart的属性等操作.

有些时候,在我们配置属性的时候,可能我们会希望这个时候,页面上的webpart区域显示其它内容或提示信息.

那我们如何判断我们是不是在编辑模式中呢?

可能大家知道这样一个小窍门:在URL中加上DisplayMode=Design就可以让当前页面进入设计模式.

那我们可以通过判断DisplayMode及其值来判断当前页面是否处于编辑模式中.

但是:如果我们通过点击"编辑页面"进入的话,将不会有这个查询参数存在在URL中.

----

不知道 SharePoint有没有提供相关的API给我们操作,反正我是没有找到.反而是找到几个相关的东东:
WebPart中有个事件处理方法:OnEditModeChanged,很可能的是,事件参数是EventArgs,并没有指明当前页面是否正处于编辑模式中?

而WebPartManage有两个方法:BeginWebPartEditing和EndWebPartEditing,同样很可惜,也没有直接指明是不是在编辑中.

没办法,走偏方:

每一个模式下,我们都可以发现HTML源码中,都有MSOSPWebPartManager_DisplayModeName这个隐藏域. 而在不同的模式下,其值是不一样的:

浏览:Browse 页面编辑:Design WebPart编辑:Edit

OK,足够了,这3个值再加上DisplayMode,足够我们折腾的了.

<---题外:在HTML源码中,还有不少值得我们研究的东东,也许一些感觉棘手的问题,答案就在其中-->

----

折腾完后,我搞出这样一个方法:

1         public bool CheckIsEditing()
2         {
3             //if (null == this.Page.Request["MSOLayout_InDesignMode"])
4             //    return false;
5             //string strMode = this.Page.Request["MSOLayout_InDesignMode"].ToLower().Trim();
6             //if (strMode == "1")
7             //    return true;
8             //return false;
9             if (!string.IsNullOrEmpty(Page.Request["DisplayMode"]) && Page.Request["DisplayMode"].ToLower().Trim() == "design")
10                 return true;
11             if (null == this.Page.Request["MSOSPWebPartManager_DisplayModeName"] )
12                 return false;
13             string strMode = this.Page.Request["MSOSPWebPartManager_DisplayModeName"].ToLower().Trim();
14             if (strMode == "browse")
15                 return false;
16             if (strMode == "design" || strMode=="edit")
17                 return true;
18             return false;
19
20         }

不知道些方法好不好用,先记录在些,权当记流水帐了.

----话说:深圳的天气真TMD热,而我等P民买不起空调,只有天天蒸桑拿!!!!

本文链接

有道JavaScript监听浏览器的问题(附一解决方案)

2010-06-22T01:26:00Z

相信大家在web项目中，经常会用到javascript的事件监听、事件冒泡这些东西。当然也包括window.opener,window.showModalDialog这些父子窗口的互操作。

但不知道大家有没遇到这样一种情况，新开的窗口是通过<a href="" />打开的，而不是window.opener或showModalDialog打开的。

尤其是需要注意的是：这个href指向的地址（页面）不是我们开发的，譬如，我们将href指向www.cnblogs.com。

OK，问题来了：假如我们在a 所在的页面有个按钮，可以触发点击事件并进行一些操作。而这个点击事件需要在href打开的IE窗口关闭后触发。。。

这个时候，我们如何监视href打开的窗口呢？（通过javascript，不要说什么进程啥的东东）.

假设有a.html如下：

2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4  <head>
5   <title> a.html </title>
6   <meta name="generator" content="editplus" />
7   <meta name="author" content="" />
8   <meta name="keywords" content="" />
9   <meta name="description" content="" />
10  </head>
11
12  <body>
13    <input type="button" id="btnParent" onclick="alert('a');" value="Click !" />
14    <a href="http://www.cnblogs.com" target="_blank">Link to B.HTML</a>
15  </body>
16 </html>

现在的要求就是：点击 "Link to B.HTML" 打开http://www.cnblogs.com。

打开的新窗口关闭后，触发a.html中的 btnParent 的点击事件~~~~

---

我相信很少有人做过这样的应用，或碰到这样的问题。而我现在刚好碰到这样一个需求。

因此将问题发到这里来，让大家帮忙给揣摩揣摩。

虽然文章内容很少，但我想，这样一个问题还是值得上首页的。~~~^_^

-------------------------------

终于有高人提到了用window.closed这个属性来判断新开的窗口是否关闭（并用setInterval来实现监听的效果）。而且window.closed是可以跨域的。

（个人认为:打开的新窗口返回的window对象与窗口中的window对象是两个东西，读取后者会存在跨域问题，而前者是本地的东西）

当然，要使用window.closed这个东西，我们还得先获取window对象，由于需要是新开窗口，因此我们可以用window.open。下面是具体实现代码：

( 可以移步keyapril同学的回复处查看)

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <script type="text/javascript">
7 var $=function()
8 {
9     if(!arguments || arguments.length!=1)
10     {
11         throw new Error('the arguments is needed');
12     }
13     if(typeof arguments[0] === 'string' )
14     {
15       return document.getElementById(arguments[0]);
16     }
17     if(typeof arguments[0] === 'function' )
18     {
19         if(window.addEventListener)
20         {
21             window.addEventListener('load',arguments[0],false);
22         }
23         if(window.attachEvent)
24         {
25             window.attachEvent('onload',arguments[0]);
26         }
27     }
28 }
29 $(function(){
30     $('a1').onclick=function(event)
31     {
32         var e = event || window.event;
33         var newW=window.open(this.href);
34         var inter=window.setInterval(function(){
35             if(newW.closed){
36                 window.clearInterval(inter);
37                 $('btn1').click();
38             }
39         },100);
40
41         return false;
42     }
43     $('btn1').onclick=function(event)
44     {
45         var e=event || window.event;
46         alert('the window is closed!');
47     }
48 });
49 </script>
50 </head>
51
52 <body>
53 <input type="button" id="btn1" value="Click" />
54 <a id="a1" href="http://www.cnblogs.com">link </a>
55 </body>
56 </html>
57

-------------------------------

本文链接

Javascript监视变量变化

2010-06-18T08:13:00Z

大家应该知道，在C#中对于属性、文件等的更改监视非常简单，因为有委托（事件）、FileSystemWatcher等好东东扶持。

那么在JavaScript中，如何对变量的更改进行监视呢？首先，我仿照c#的属性来对JS进行操作，写出了如下的示例：

1       function Class1()
2       {
3          var oldValue='';
4          var name='xu';
5          var id='1';
6          this.setName=function(n)
7          {
8             oldValue=name;
9             name=n;
10             this.propertyChange('name',oldValue,n);
11          }
12          this.setID=function(n)
13          {
14              oldValue=id;
15              id=n;
16              this.propertyChange('id',oldValue,n);
17          }
18          this.display=function()
19          {
20             alert(name+'\'s id is :'+id);
21          }
22       }
23       Class1.prototype={
24          propertyChange:function(propertyName,oldValue,newValue)
25          {
26             alert(propertyName+'\'s value changed from '+oldValue+' to '+newValue);
27          }
28       };
29
30       var c=new Class1();
31       c.setName('xu22');
32       c.setID('5');
33       c.display();

将对对象内部变量（私有变量）的赋值操作提取到了方法中，而在该方法中触发相应的变量值更改回调方法。

按说这样搞就能监视变量的更改了，但是在FireFox的官方网站上有一个叫Object.watch(unwatch)的东东，可以用来监视变量的变更。

非常可惜的是，这个方法在IE等浏览器下不能正常运行。俺到网上搜了一番，在

http://stackoverflow.com/questions/1269633/javascript-watch-for-object-properties-changes

中找到如下东东：

1 if (!Object.prototype.watch)
2 {
3     Object.prototype.watch = function (prop, handler)
4     {
5         var oldval = this[prop], newval = oldval,
6         getter = function ()
7         {
8             return newval;
9         },
10         setter = function (val)
11         {
12             oldval = newval;
13             return newval = handler.call(this, prop, oldval, val);
14         };
15         if (delete this[prop])
16         {
17             if (Object.defineProperty) // ECMAScript 5
18             {
19                  Object.defineProperty(this, prop, {get: getter,set: setter});
20             }
21             else if (Object.prototype.__defineGetter__ && Object.prototype.__defineSetter__)
22             {
23                  Object.prototype.__defineGetter__.call(this, prop, getter);
24                  Object.prototype.__defineSetter__.call(this, prop, setter);
25             }
26         }
27     };
28 }
29
30 if (!Object.prototype.unwatch)
31 {
32     Object.prototype.unwatch = function (prop)
33     {
34         var val = this[prop];
35         delete this[prop];
36         this[prop] = val;
37     };
38 }

通过__defineSetter__来对赋值操作监听~~~

OK，好东西。收藏。

本文链接

关于ICallbackEventHandler的疑问

2010-06-18T01:12:00Z

近日，由于需要，我写了一个webcontrol,并在实现了ICallbackEventHandler,目的是根据传进来的参数进行逻辑处理，然后返回值。

我下面的例子目的是从1到5调用异步函数，然后在回调函数将1到5这几个数值相加。但是，由于调用异步函数的过程没有被阻塞，因此值一直为0.

特别注意：我在使用this.Page.ClientScript.GetCallbackEventReference(this, "argument", "callbackFunc", "context",false)的时候，最后一个参数的true或false都测试过（也就是同步异步都不行）。

由于比较急，且个人弄了很久，没个头绪，因此斗胆发到首页来，请各位高人们帮忙参谋参谋。。。拜谢先。

猛击这里下载源码->/Files/McJeremy/AjaxCountTest.rar

源码是用vs2005+sp1创建的（ASP.NET 网站类型）

下面是代码：

1 namespace Test
2 {
3     /// <summary>
4     /// AjaxControl 的摘要说明
5     /// </summary>
6     public class AjaxControl : WebControl, ICallbackEventHandler
7     {
8         public AjaxControl()
9         {
10         }
11
12         protected override void Render(HtmlTextWriter writer)
13         {
14             writer.Write("Test tttt");
15             writer.Write(GetAjaxFunction());
16         }
17        //生成异步函数
18         private string GetAjaxFunction()
19         {
20             System.Text.StringBuilder sb = new System.Text.StringBuilder();
21             sb.Append("<script type=\"text/javascript\">");
22             sb.Append("function callServer(argument,context){");
23             sb.Append(this.Page.ClientScript.GetCallbackEventReference(this, "argument", "callbackFunc", "context",false));
24             sb.Append("}</script>");
25             return sb.ToString();
26         }
27
28         #region ICallbackEventHandler 成员
29
30         private string rValue;
31
32         public string GetCallbackResult()
33         {
34             return rValue;
35         }
36
37         public void RaiseCallbackEvent(string eventArgument)
38         {
39             //此处不作处理，直接返回
40             rValue = eventArgument;
41         }
42
43         #endregion
44     }
45 }

JS文件

1 var envir={count:0};
2 function callbackFunc(data,context)
3 {
4    envir.count+=parseInt(data,10);
5 }
6
7 window.onload=function()
8 {
9    //循环调用异步函数
10     for(var i=1;i<5;i++)
11     {
12         callServer(i,'');
13     }
14
15         //此处不等callServer执行完成后，就执行了。导致envir.count为0
16         //而按设想，envir.count的值应该是1+2+3+4 = 10
17     alert(envir.count);
18 }

最终调用的default.aspx:

1 <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
2
3 <%@ Register Assembly="ClassLibrary" Namespace="Test" TagPrefix="cc1" %>
4
5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6
7 <html xmlns="http://www.w3.org/1999/xhtml" >
8 <head runat="server">
9     <title>无标题页</title>
10     <script type="text/javascript" src="JScript.js">
11
12     </script>
13 </head>
14 <body>
15     <form id="form1" runat="server">
16     <div>
17         <cc1:AjaxControl ID="AjaxControl1" runat="server" />
18     </div>
19     </form>
20 </body>
21 </html>
22

本文链接