博客园_精于心，简于形.

exeCommand

2010-09-25T10:12:00Z

document.execCommand()方法处理Html数据时常用语法格式如下:
复制内容到剪贴板
代码:
document.execCommand(sCommand[,交互方式, 动态参数])

其中：sCommand为指令参数（如下例中的”2D-Position”），交互方式参数如果是true的话将显示对话框，如果为false的话，则不显示对话框（下例中的”false”即表示不显示对话框），动态参数一般为一可用值或属性值（如下例中的”true”）。

document.execCommand(”2D-Position”,”false”,”true”);

调用execCommand()可以实现浏览器菜单的很多功能. 如保存文件,打开新文件,撤消、重做操作…等等. 有了这个方法,就可以很容易的实现网页中的文本编辑器.

如果灵活运用,可以很好的辅助我们完成各种项目.

使用的例子如下:

1、〖全选〗命令的实现
[格式]:document.execCommand(”selectAll”)
[说明]将选种网页中的全部内容！
[举例]在之间加入：
全选

2、〖打开〗命令的实现
[格式]:document.execCommand(”open”)
[说明]这跟VB等编程设计中的webbrowser控件中的命令有些相似，大家也可依此琢磨琢磨。
[举例]在之间加入：
打开

3、〖另存为〗命令的实现
[格式]:document.execCommand(”saveAs”)
[说明]将该网页保存到本地盘的其它目录！
[举例]在之间加入：
另存为

4、〖打印〗命令的实现
[格式]:document.execCommand(”print”)
[说明]当然，你必须装了打印机！
[举例]在之间加入：
打印

Js代码下面列出的是指令参数及意义

//相当于单击文件中的打开按钮
document.execCommand(”Open”);

//将当前页面另存为
document.execCommand(”SaveAs”);

//剪贴选中的文字到剪贴板;
document.execCommand(”Cut”,”false”,null);

//删除选中的文字;
document.execCommand(”Delete”,”false”,null);

//改变选中区域的字体;
document.execCommand(”FontName”,”false”,sFontName);

//改变选中区域的字体大小;
document.execCommand(”FontSize”,”false”,sSize|iSize);

//设置前景颜色;
document.execCommand(”ForeColor”,”false”,sColor);

//使绝对定位的对象可直接拖动;
document.execCommand(”2D-Position”,”false”,”true”);

//使对象定位变成绝对定位;
document.execCommand(”AbsolutePosition”,”false”,”true”);

//设置背景颜色;
document.execCommand(”BackColor”,”false”,sColor);

//使选中区域的文字加粗;
document.execCommand(”Bold”,”false”,null);

//复制选中的文字到剪贴板;
document.execCommand(”Copy”,”false”,null);

//设置指定锚点为书签;
document.execCommand(”CreateBookmark”,”false”,sAnchorName);

//将选中文本变成超连接,若第二个参数为true,会出现参数设置对话框;
document.execCommand(”CreateLink”,”false”,sLinkURL);

//设置当前块的标签名;
document.execCommand(”FormatBlock”,”false”,sTagName);

//相当于单击文件中的打开按钮
document.execCommand(”Open”);

//将当前页面另存为
document.execCommand(”SaveAs”);

//剪贴选中的文字到剪贴板;
document.execCommand(”Cut”,”false”,null);

//删除选中的文字;
document.execCommand(”Delete”,”false”,null);

//改变选中区域的字体;
document.execCommand(”FontName”,”false”,sFontName);

//改变选中区域的字体大小;
document.execCommand(”FontSize”,”false”,sSize|iSize);

//设置前景颜色;
document.execCommand(”ForeColor”,”false”,sColor);

//使绝对定位的对象可直接拖动;
document.execCommand(”2D-Position”,”false”,”true”);

//使对象定位变成绝对定位;
document.execCommand(”AbsolutePosition”,”false”,”true”);

//设置背景颜色;
document.execCommand(”BackColor”,”false”,sColor);

//使选中区域的文字加粗;
document.execCommand(”Bold”,”false”,null);

//复制选中的文字到剪贴板;
document.execCommand(”Copy”,”false”,null);

//设置指定锚点为书签;
document.execCommand(”CreateBookmark”,”false”,sAnchorName);

//将选中文本变成超连接,若第二个参数为true,会出现参数设置对话框;
document.execCommand(”CreateLink”,”false”,sLinkURL);

//设置当前块的标签名;
document.execCommand(”FormatBlock”,”false”,sTagName);

document对象execCommand通常在IE中在线处理Html数据时非常有用，它可以让你轻而易举实现文字的加粗、加颜色、加字体等一系列的命令。

D-Position 允许通过拖曳移动绝对定位的对象。
AbsolutePosition 设定元素的 position 属性为“absolute”(绝对)。
BackColor 设置或获取当前选中区的背景颜色。
BlockDirLTR 目前尚未支持。
BlockDirRTL 目前尚未支持。
Bold 切换当前选中区的粗体显示与否。
BrowseMode 目前尚未支持。
Copy 将当前选中区复制到剪贴板。
CreateBookmark 创建一个书签锚或获取当前选中区或插入点的书签锚的名称。
CreateLink 在当前选中区上插入超级链接，或显示一个对话框允许用户指定要为当前选中区插入的超级链接的 URL。
Cut 将当前选中区复制到剪贴板并删除之。
Delete 删除当前选中区。
DirLTR 目前尚未支持。
DirRTL 目前尚未支持。
EditMode 目前尚未支持。
FontName 设置或获取当前选中区的字体。
FontSize 设置或获取当前选中区的字体大小。
ForeColor 设置或获取当前选中区的前景(文本)颜色。
FormatBlock 设置当前块格式化标签。
Indent 增加选中文本的缩进。
InlineDirLTR 目前尚未支持。
InlineDirRTL 目前尚未支持。
InsertButton 用按钮控件覆盖当前选中区。
InsertFieldset 用方框覆盖当前选中区。
InsertHorizontalRule 用水平线覆盖当前选中区。
InsertIFrame 用内嵌框架覆盖当前选中区。
InsertImage 用图像覆盖当前选中区。
InsertInputButton 用按钮控件覆盖当前选中区。
InsertInputCheckbox 用复选框控件覆盖当前选中区。
InsertInputFileUpload 用文件上载控件覆盖当前选中区。
InsertInputHidden 插入隐藏控件覆盖当前选中区。
InsertInputImage 用图像控件覆盖当前选中区。
InsertInputPassword 用密码控件覆盖当前选中区。
InsertInputRadio 用单选钮控件覆盖当前选中区。
InsertInputReset 用重置控件覆盖当前选中区。
InsertInputSubmit 用提交控件覆盖当前选中区。
InsertInputText 用文本控件覆盖当前选中区。
InsertMarquee 用空字幕覆盖当前选中区。
InsertOrderedList 切换当前选中区是编号列表还是常规格式化块。
InsertParagraph 用换行覆盖当前选中区。
InsertSelectDropdown 用下拉框控件覆盖当前选中区。
InsertSelectListbox 用列表框控件覆盖当前选中区。
InsertTextArea 用多行文本输入控件覆盖当前选中区。
InsertUnorderedList 切换当前选中区是项目符号列表还是常规格式化块。
Italic 切换当前选中区斜体显示与否。
JustifyCenter 将当前选中区在所在格式化块置中。
JustifyFull 目前尚未支持。
JustifyLeft 将当前选中区所在格式化块左对齐。
JustifyNone 目前尚未支持。
JustifyRight 将当前选中区所在格式化块右对齐。
LiveResize 迫使 MSHTML 编辑器在缩放或移动过程中持续更新元素外观，而不是只在移动或缩放完成后更新。
MultipleSelection 允许当用户按住 Shift 或 Ctrl 键时一次选中多于一个站点可选元素。
Open 目前尚未支持。
Outdent 减少选中区所在格式化块的缩进。
OverWrite 切换文本状态的插入和覆盖。
Paste 用剪贴板内容覆盖当前选中区。
PlayImage 目前尚未支持。
Print 打开打印对话框以便用户可以打印当前页。
Redo 目前尚未支持。
Refresh 刷新当前文档。
RemoveFormat 从当前选中区中删除格式化标签。
RemoveParaFormat 目前尚未支持。
SaveAs 将当前 Web 页面保存为文件。
SelectAll 选中整个文档。
SizeToControl 目前尚未支持。
SizeToControlHeight 目前尚未支持。
SizeToControlWidth 目前尚未支持。
Stop 目前尚未支持。
StopImage 目前尚未支持。
StrikeThrough 目前尚未支持。
Subscript 目前尚未支持。
Superscript 目前尚未支持。
UnBookmark 从当前选中区中删除全部书签。
Underline 切换当前选中区的下划线显示与否。
Undo 目前尚未支持。
Unlink 从当前选中区中删除全部超级链接。
Unselect 清除当前选中区的选中状态。

关于document.execCommand：
要执行编辑命令，可调用 document.execCommand，并传递对应于命令 ID 的字符串。另外还有可选的第二个参数，该参数指定如果可以应用的话是否显示此命令的用户界面。传递整数 1 将显示用户界面，整数 0 将跳过它。这个参数通常不用于编辑命令。因为默认值为 0，所以假如您没有使用第三个参数（在这种情况下，还必须为第二个参数传递值），一般可以不管它。第三个参数也是可选的，在可应用的情况下，使用它来将任何所需参数传递给该命令。

Pixy方法受到IE的cache bug影响会闪烁。其实并没有说清楚这个问题，但其实该bug是有条件的，即IE的cache设置为Every visit to the page，而不是默认的Automatically。基本上，只有开发者才会把cache设置为每次访问检查更新，所以这个bug其实不会影响真正的用户（根据在winxpsp2的ie6下测试，虽然可能仍然调用了一次网络存取的api，但是并没有发生实际的请求，症状就是鼠标有极短时间的抖动，但是图像不会闪烁）。此外有人发现了一个未公开的方法来让IE对背景图进行缓存：
document.execCommand(”BackgroundImageCache”,false,true)

用这种方法甚至避免了api调用，貌似是直接缓存在IE内存中。

IE6下设置背景图片是不会被真正cache住的，就算服务器做了cache，如果想cache住只能~~~

做过UI设计和开发的人一定知道，IE(不包括IE7)会经常从服务器端重新载入背景图片，好端端的UI界面在IE(不包括IE7)中就这样被折腾着……

Erik发现了一个简单的解决办法（针对IE7以下的IE有效，其实在IE7中已经修复了这个Bug）
程序代码程序代码

document.execCommand(”BackgroundImageCache”, false, true);

/**
* update@2007-04-02
*/
今天阅读Ext的源码时发现Jack Slocum已经考虑到了这一点，在Ext.js中给出了他的实现，在其它Ajax框架中应该还没有这种类似的代码，从这一个细节上就能看出Ext的全面～
程序代码程序代码

var isIE = ua.indexOf(”msie”) > -1, isIE7 = ua.indexOf(”msie 7″) > -1;
// remove css image flicker
if(isIE && !isIE7){
try{
document.execCommand(”BackgroundImageCache”, false, true);
}catch(e){}
}

/**
* update@2007-04-10
*/
今天阅读幻宇的dreamplayer播放器源码时发现幻宇也针对IE的背景缓存进行了修复，只是他并没考虑到IE7中已经不存在这个现象了，这是 evml.js中的一段相关代码～(顺便嘀咕两句：这家伙，写JS从来不加分号的，以前是这样，现在还是这样，这样的话怎么进行压缩呀，汗～下面的代码按照我的习惯都已加上分号，哪怕只有两三句而已～)
程序代码程序代码

window.isIE=navigator.appName.indexOf(”Microsoft”)==0;
if(isIE){
document.documentElement.addBehavior(”#default#userdata”);
document.execCommand(”BackgroundImageCache”,false,true);
本文链接

Ext 跨域请求解决方案

2010-07-17T10:14:00Z

默认情况下，不管是Ajax无法跨域请求的，但是通过一些方式比如代理，iframe，嵌入脚本等方式可以部分满足跨域的功能，Extjs提供了一个封装版本，使用方法也比较简单，但是如果不清楚用法的话还是很郁闷，我调试了好久才知道后台代码也需要做处理，现将用法记录下来以备忘。

前台代码：有两种方式请求：

1. 方法一：

ss = new Ext.data.ScriptTagProxy({
   url: 'http://xxx.xx.xx.xx',//跨域的Url地址
   callbackParam: "callback",
   headers: { 'Authorization': 'Basic YWRtaW46YWRtaW4xMjM='}
});
ss.load({'_out': 'json'},
         new Ext.data.JsonReader({root:"topics"},
                 [{name: 'name', mapping: 'name'},
                   {name: 'comment', mapping: 'comment'}]),
         function(recordsBlock, arg, isok) {
           alert(Ext.encode(recordsBlock));
           alert(Ext.encode(recordsBlock.records[0].data));
         });

2. 方法二：

（1）首先引入一个脚本文件CrossDomainAjax.js代码如下：

this.fireEvent("requestexception", this, response, options, {
                status: -1,
                statusText: 'communication failure'
            });
            Ext.callback(options.failure, options.scope, [response, options]);
            Ext.callback(options.callback, options.scope, [options, false, response]);
        },

// private
        destroyScriptTrans : function(trans, isLoaded){
            document.getElementsByTagName("head")[0].removeChild(document.getElementById(trans.scriptId));
            clearTimeout(trans.timeoutId);
            if(isLoaded){
                window[trans.cb] = undefined;
                try{
                    delete window[trans.cb];
                }catch(e){}
            }else{
                // if hasn't been loaded, wait for load to remove it to prevent script error
                window[trans.cb] = function(){
                    window[trans.cb] = undefined;
                    try{
                        delete window[trans.cb];
                    }catch(e){}
                };
            }
        }
    });
}

(2) 在需要跨域请求的页面引入该文件

并在Ready函数中执行SetCrossDomain();并添加一下代码：

SetCrossDomain();
Ext.Ajax.request({
   url: 'http://xxxx.xxx.xxx',//跨域地址
   scriptTag: true,
   success: function(req) {
     alert(req.responseText);
   },
   failure: function(req) {
     alert(req.responseText);
   },
   headers: { 'Authorization': 'Basic YWRtaW46YWRtaW4xMjM='},
   params: { _out: 'json' }
});

后台代码：

PHP：

$json = "xxxxxxxxxxxxxxxxxxxxxxx";//你的json数据

$callback_function = array_key_exists('callback',$_GET) ? $_GET['callback'] : null;
  if($callback_function != null)
  {
   $result = $callback_function ."(".$json).")";
  }

else

{

$result = $json;

}

echo $result;

ASP.NET:

string json = "...........................";//你的json数据
string response = json;

string callBack = Request.QueryString["call_back"] as string;
        if (callBack != null)
        {
            response = callBack + "(" + json + ")";
        }

Response.Write(response);
Response.Flush();

通过以上处理，在需要跨域请求时使用方法一的ScriptTagProxy或方法二的scriptTag: true会在请求加上callback参数，后台自动处理，如果没有跨域，后台也会自动识别。

在跨域请求中前台只能以Get方式，因为嵌入脚本代码是用Get方式请求的。

本文链接

阻止浏览器事件传递

2010-07-12T11:24:00Z

阻止jQuery事件冒泡

jQuery对DOM的事件触发具有冒泡特性。有时利用这一特性可以减少重复代码，但有时候我们又不希望事件冒泡。这个时候就要阻止 jQuery.Event冒泡。

在jQuery.Event 的文档中的开头得知，jQuery.Event对象是符合W3C标准的一个事件对象，同时jQuery.Event免去了检查兼容IE的步骤。

jQuery.Event提供了一个非常简单的方法来阻止事件冒泡：event.stopPropagation();

Js代码

$("p").click(function(event){

event.stopPropagation(); // do something

})

$("p").click(function(event){ event.stopPropagation(); // do something })

但是这个方法对使用live 绑定的事件没有作用，需要一个更简单的方法阻止事件冒泡：return false;

Js代码

$("p").live("click", function(){

$(this).after("Another paragraph!");

return false;

});

$("p").live("click", function(){ $(this).after("Another paragraph!"); return false; });

另外 JavaScript 阻止冒泡

阻止冒泡事件的方法有两种，第一种是IE的方法，第二种是DOM方法，至于为什么要分为两种方法去讨论之，这里就不做讨论了，总之是浏览器一些蹩脚的问题，好了废话不说了，直接贴代码了：

Js代码

//阻止冒泡事件

function stopBubble(e) {

if (e && e.stopPropagation) {//非IE

　　e.stopPropagation();

}

else {//IE

window.event.cancelBubble = true;

}

//阻止冒泡事件 function stopBubble(e) { if (e && e.stopPropagation) {//非IE e.stopPropagation(); } else {//IE window.event.cancelBubble = true; } }

举个例子：就是谷歌首页的更多选项吧，不知道的可以去看看http://www.google.com/ 。
这里要应用两个点击事件，一个是div.onclick，另一个就是document.onclick，那么问题就出现了，在调用 div.onclick的时候，由于冒泡事件的存在，会自动的调用document.onclick，由于冒泡的顺序是从里向外的

（div->body->document->html）所以div.onclick事件就会被覆盖掉，也就不会执行了，解决的方案其实也是很简单的哦，就是在执行div.onclick的时候阻止冒泡事件就好了，那怎么阻止呢，就调用上面的函数就ok了！哈哈！
ps：在介绍一下阻止浏览器默认行为的方法，大同小异，这里就不再赘述了。

Js代码

function stopDefault(e) {

//阻止默认浏览器动作(W3C)

if (e && e.preventDefault)

e.preventDefault();

//IE中阻止函数器默认动作的方式

else

window.event.returnValue = false;

return false;

}

本文链接

Ext js Grouping 展开和折叠方法

2010-07-07T08:37:00Z

Ext.get('expand').on('click', function() {
　　grid.getView().expandAllGroups();
});

Ext.get('collapse').on('click', function() {
　　grid.getView().collapseAllGroups();
});

Ext.get('toggle').on('click', function() {
　　grid.getView().toggleAllGroups();
});

Ext.get('one').on('click', function() {
　　var view = grid.getView();
　　var groupId = view.getGroupId('female');
　　view.toggleGroup(groupId);
});

本文链接

JS获取上传文件的绝对路径，兼容IE和FF

2010-06-29T02:11:00Z

<html>
<head>
    <title>JS获取上传文件的绝对路径，兼容IE和FF</title>
    <script type="text/javascript">
function readFile(fileBrowser) {
    if (navigator.userAgent.indexOf("MSIE")!=-1)
        readFileIE(fileBrowser);
    else if (navigator.userAgent.indexOf("Firefox")!=-1 || navigator.userAgent.indexOf("Mozilla")!=-1)
        readFileFirefox(fileBrowser);
    else
        alert("Not IE or Firefox (userAgent=" + navigator.userAgent + ")");
}

function readFileFirefox(fileBrowser) {
    try {
        netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
    }
    catch (e) {
        alert('路径错误!');
        return;
    }

    var fileName=fileBrowser.value;
    var file = Components.classes["@mozilla.org/file/local;1"]
        .createInstance(Components.interfaces.nsILocalFile);
    try {
        file.initWithPath( fileName.replace(/\//g, "\\\\") );
    }
    catch(e) {
        if (e.result!=Components.results.NS_ERROR_FILE_UNRECOGNIZED_PATH) throw e;
        return;
    }

    if ( file.exists() == false ) {
        alert("File '" + fileName + "' not found.");
        return;
    }
    alert(file.path);
}

function readFileIE(fileBrowser) {
   alert(document.getElementById("fileBrowser").value);
}
    </script>

</head>
<body>
    <form name="form1">

    <input type="file" name="fileBrowser" size="50" onchange="readFile(this)" />
    </form>
</body>
</html>

本文链接

asp.net2.0中异步调用WebService

2010-06-24T15:08:00Z

由于asp2.0提供了异步页的支持使异步调用WebService的性能有了真正的提升。
  使用异步页，首先要设置Async="true"，异步页是在Prerender和PrerenderComplete事件间加入Begin，end异步方法实现的，Begin和End方法属于不同的线程。
  WS异步页的实现有两种方式：
  1、使用等待方法实现异步
  通用类，封装了WS
  /**//// <summary>
   /// 使用等待方法实现异步
   /// </summary>
   /// <param name="name"></param>
   /// <returns></returns>
   private Account account;
   private string username;
   public Account Account
   {
   get { return account; }
   set { account = value; }
   }
   public string Username
   {
   get { return username; }
   set { username = value; }
   }
   public IAsyncResult BeginAsyncGetAccount(object sender, EventArgs e, AsyncCallback cb, object state)
   {

   return vb.BeginGetAccountbyName(username,cb,state);
   }
   public void EndAsyncGetAccount(IAsyncResult ar)
   {
   account = vb.EndGetAccountbyName(ar);
   }

   /**//// <summary>
   /// 使用事件驱动的异步
   /// </summary>
   /// <param name="username"></param>
   public void GetAccountCompleted(Object source, VB.GetAccountbyNameCompletedEventArgs e)
   {
   account = e.Result;
   }
   public void AsGetAccount(string username)
   {
   vb.GetAccountbyNameCompleted += new GetAccountbyNameCompletedEventHandler(GetAccountCompleted);
   vb.GetAccountbyNameAsync(username）

   }调用方法
   protected void Page_Load(object sender, EventArgs e)
   {
   this.PreRenderComplete += new EventHandler(Page_PreRenderComplete);
   b.Username = "dinghao";

   AddOnPreRenderCompleteAsync(b.BeginAsyncGetAccount, b.EndAsyncGetAccount);
   }
   protected void Page_PreRenderComplete(object sender, EventArgs e)
   {
   //异步调用结束
   VB.Account a = b.Account;
   AccountIf ai = new AccountIf(a);
   ais[0] = ai;
   GridView1.DataSource = ais;
   GridView1.DataBind();
   }由于AddOnPreRenderCompleteAsync的两个委托都是Void类型，所以在通用类中要加入有返回值的属性如：Account供主调方法使用，另外委托中没有异步方法的参数信息，要加入参数的属性如：Username
  2、事件驱动的异步（2.0新增）
  调用方法：
  protected void Page_Load(object sender, EventArgs e)
   {
   this.PreRenderComplete += new EventHandler(Page_PreRenderComplete);
   b.AsGetAccount("dinghao");

   }
   protected void Page_PreRenderComplete(object sender, EventArgs e)
   {
   //异步调用结束
   VB.Account a = b.Account;
   AccountIf ai = new AccountIf(a);
   ais[0] = ai;
   GridView1.DataSource = ais;
   GridView1.DataBind();
   }这种调用方式，用的是*Completed事件，在*Async完成时触发，这种调用方式可以
  省去Account，Username属性，用起来比较简单

本文链接

ASP.Net的正则表达式（RegularExpression）

2010-06-24T15:07:00Z

正则表达式（RegularExpression）是一个正则表达式就是由普通字符（例如字符 a 到 z）以及特殊字符（称为元字符）组成的文字模式。该模式描述在查找文字主体时待匹配的一个或多个字符串。正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。
使用正则表达式，就可以：
1. 测试字符串的某个模式。例如，可以对一个输入字符串进行测试，看在该字符串是否存在一个电话号码模式或一个信用卡号码模式。这称为数据有效性验证。
2. 替换文本。可以在文档中使用一个正则表达式来标识特定文字，然后可以全部将其删除，或者替换为别的文字。
3. 根据模式匹配从字符串中提取一个子字符串。可以用来在文本或输入字段中查找特定文字。
例如，如果需要搜索整个 web 站点来删除某些过时的材料并替换某些HTML 格式化标记，则可以使用正则表达式对每个文件进行测试，看在该文件中是否存在所要查找的材料或 HTML 格式化标记。用这个方法，就可以将受影响的文件范围缩小到包含要删除或更改的材料的那些文件。然后可以使用正则表达式来删除过时的材料，最后，可以再次使用正则表达式来查找并替换那些需要替换的标记。
另一个说明正则表达式非常有用的示例是一种其字符串处理能力还不为人所知的语言。VBScript 是 Visual Basic 的一个子集，具有丰富的字符串处理功能。与 C 类似的 Visual Basic Scripting Edition 则没有这一能力。正则表达式给 Visual Basic Scripting Edition 的字符串处理能力带来了明显改善。不过，可能还是在 VBScript 中使用正则表达式的效率更高，它允许在单个表达式中执行多个字符串操作。
正是由于“正则表达式”的强大功能，才使得微软慢慢将正则表达式对象移植到了视窗系统上面。在书写正则表达式的模式时使用了特殊的字符和序列。下表描述了可以使用的字符和序列，并给出了实例。
字符描述： \：将下一个字符标记为特殊字符或字面值。例如"n"与字符"n"匹配。"\n"与换行符匹配。序列"\\"与"\"匹配，"$"与"("匹配。
^ ：匹配输入的开始位置。
$ ：匹配输入的结尾。
* ：匹配前一个字符零次或几次。例如，"zo*"可以匹配"z"、"zoo"。
+ ：匹配前一个字符一次或多次。例如，"zo+"可以匹配"zoo",但不匹配"z"。
? ：匹配前一个字符零次或一次。例如，"a?ve?"可以匹配"never"中的"ve"。
.：匹配换行符以外的任何字符。
(pattern) 与模式匹配并记住匹配。匹配的子字符串可以从作为结果的 Matches 集合中使用 Item [0]...[n]取得。如果要匹配括号字符(和 )，可使用"\(" 或 "$"。
x|y：匹配 x 或 y。例如 "z|food" 可匹配 "z" 或 "food"。"(z|f)ood" 匹配 "zoo" 或 "food"。
{n}：n 为非负的整数。匹配恰好n次。例如，"o{2}" 不能与 "Bob 中的 "o" 匹配，但是可以与"foooood"中的前两个o匹配。
{n,} ：n 为非负的整数。匹配至少n次。例如，"o{2,}"不匹配"Bob"中的"o"，但是匹配"foooood"中所有的o。"o{1,}"等价于"o+"。"o{0,}"等价于"o*"。
{n,m} ：m 和 n 为非负的整数。匹配至少 n 次，至多 m 次。例如，"o{1,3}" 匹配 "fooooood"中前三个o。"o{0,1}"等价于"o?"。
[xyz] ：一个字符集。与括号中字符的其中之一匹配。例如，"[abc]" 匹配"plain"中的"a"。
[^xyz] ：一个否定的字符集。匹配不在此括号中的任何字符。例如，"[^abc]" 可以匹配"plain"中的"p".
[a-z] ：表示某个范围内的字符。与指定区间内的任何字符匹配。例如，"[a-z]"匹配"a"与"z"之间的任何一个小写字母字符。
[^m-z] ：否定的字符区间。与不在指定区间内的字符匹配。例如，"[m-z]"与不在"m"到"z"之间的任何字符匹配。
\b ：与单词的边界匹配，即单词与空格之间的位置。例如，"er\b" 与"never"中的"er"匹配，但是不匹配"verb"中的"er"。
\B ：与非单词边界匹配。"ea*r\B"与"never early"中的"ear"匹配。
\d ：与一个数字字符匹配。等价于[0-9]。
\D ：与非数字的字符匹配。等价于[^0-9]。
\f ：与分页符匹配。
\n ：与换行符字符匹配。
\r ：与回车字符匹配。
\s ：与任何白字符匹配，包括空格、制表符、分页符等。等价于"[ \f\n\r\t\v]"。
\S ：与任何非空白的字符匹配。等价于"[^ \f\n\r\t\v]"。
\t ：与制表符匹配。
\v ：与垂直制表符匹配。
\w ：与任何单词字符匹配，包括下划线。等价于"[A-Za-z0-9_]"。
\W ：与任何非单词字符匹配。等价于"[^A-Za-z0-9_]"。
\num ：匹配 num个，其中 num 为一个正整数。引用回到记住的匹配。例如，"(.)\1"匹配两个连续的相同的字符。
\n：匹配 n，其中n 是一个八进制换码值。八进制换码值必须是 1, 2 或 3 个数字长。
例如，"\11" 和 "\011" 都与一个制表符匹配。"\0011"等价于"\001" 与 "1"。八进制换码值不得超过 256。否则，只有前两个字符被视为表达式的一部分。允许在正则表达式中使用ASCII码。
\xn：匹配n，其中n是一个十六进制的换码值。十六进制换码值必须恰好为两个数字长。例如，"\x41"匹配"A"。"\x041"等价于"\x04" 和 "1"。允许在正则表达式中使用 ASCII 码。
RegularExpressionValidator有两种主要的属性来进行有效性验证。ControlToValidate 包含了一个值进行验证。如取出文本框中的值。如ControlToValidate="TextBox1" ValidationExpression 包含了一个正则表达式进行验证。
好了，有了上面的叙述，我们就举个例子来说明正则表达式。比如，我们想要对用户输入的电子邮件进行校验，那么，什么样的数据才算是一个合法的电子邮件呢？我可以这样输入：test@yesky.com，当然我也会这样输入：xxx@yyy.com.cn,但是这样的输入就是非法的：xxx@@com.cn或者@xxx.com.cn，等等，所以我们得出一个合法的电子邮件地址至少应当满足以下几个条件：
1. 必须包含一个并且只有一个符号“@”
2. 第一个字符不得是“@”或者“.”
3. 不允许出现“@.”或者.@
4. 结尾不得是字符“@”或者“.”
所以根据以上的原则和上面表中的语法，我们很容易的就可以得到需要的模板如下："= "^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$"

本文链接

Extjs简介（二）

2010-05-25T05:34:00Z

除了我们已经讨论过的核心Javascrīpt库，现在的Ext亦包括了一系列的最前端的JavaScirptUI组件库。文本以一个最常用的widget为例子，作简单的介绍。

MessageBox

比起略为沉闷的“HelloWolrd”消息窗口，我们做少许变化，前面我们写的代码是，单击某个段落便会高亮显示，现在是单击段落，在消息窗口中显示段落内容出来。
在上面的paragraphClicked的function中，将这行代码：

1.Ext.get(e.target).highlight();

替换为：

1.var paragraph = Ext.get(e.target);

2.paragraph.highlight();

3.Ext.MessageBox.show({

4. title: 'Paragraph Clicked',

5. msg: paragraph.dom.innerHTML,

6. width:400,

7. buttons: Ext.MessageBox.OK,

8. animEl: paragraph});

这里有些新的概念讨论一下。在第一行中我们创建了一个局部变量（Local Variable）来保存某个元素的引用，即被单击的那个DOM节点（本例中，我们总是段落paragrah,事因我们已经定义该事件与<p>标签发生关联的了）。为什么要这样做呢？嗯...观察上面的代码，我们需要引用同一元素来高亮显示，在MessageBox中也是引用同一元素作为参数使用。
一般来说，多次重复使用同一值（Value）或对象，是一个不好的方式，所以，作为一个好的OOP开发者，应该是将其分配到一个局部变量中，反复使用这变量！

现在，观察MessageBox的调用，准备作为阐述新概念的演示用。乍一看，这像一连串的参数传入到方法中，但仔细看，这是一个非常特别的语法。实际上，传入到MessageBox.show的只有一个参数：一个Object literal,包含一组属性和属性值。在Javascrīpt中，Object Literal是动态的，你可在任何时候用{和}创建一个典型的对象(object)。其中的字符由一系列的name/value组成的属性，属性的格式是[property name]:[property value]。在整个Ext中，你将会经常遇到这种模式的语法，因此你应该消耗掉这知识！
使用Object Literal的原因是什么呢？主要的原因是“韧性（flexibility）"，随时可新增、删除属性，亦可不管顺序地插入。而方法不需要改变。这也是多个参数的情况下，为最终开发者带来不少的方便（本例中的MessageBox.show())。例如，我们说这儿的foo.action方法，有四个参数，而只有一个是你必须传入的。本例中，你想像中的代码可能会是这样的foo.action(null, null, null, 'hello').,若果那方法用Object Literal来写，却是这样， foo.action({ param4: 'hello' })，这更易用和易读。

Gird

Gird是Ext中人们最想先睹为快的Widgets之一，也是最流行之一。好，让我们看看怎么轻松地创建一个Gird并运行。用下列代码替换ExtStart.js中全部语句：

01.Ext.onReady(function() {

02. var myData = [

03. ['Apple',29.89,0.24,0.81,'9/1 12:00am'],

04. ['Ext',83.81,0.28,0.34,'9/12 12:00am'],

05. ['Google',71.72,0.02,0.03,'10/1 12:00am'],

06. ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],

07. ['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']

08. ];

09.var ds = new Ext.data.Store({

10. proxy: new Ext.data.MemoryProxy(myData),

11. reader: new Ext.data.ArrayReader({id: 0}, [

12. {name: 'company'},

13. {name: 'price', type: 'float'},

14. {name: 'change', type: 'float'},

15. {name: 'pctChange', type: 'float'},

16. {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}

17. ])

18. });

19. ds.load();

20. var colModel = new Ext.grid.ColumnModel([

21. {header: "Company", width: 120, sortable: true, dataIndex: 'company'},

22. {header: "Price", width: 90, sortable: true, dataIndex: 'price'},

23. {header: "Change", width: 90, sortable: true, dataIndex: 'change'},

24. {header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},

25. {header: "Last Updated", width: 120, sortable: true,

26. renderer: Ext.util.Format.dateRenderer('m/d/Y'),

27. dataIndex: 'lastChange'}

28. ]);

29. var grid = new Ext.grid.Grid('grid-example', {ds: ds, cm: colModel});

30. grid.render();

31. grid.getSelectionModel().selectFirstRow();

32. });

这看上去很复杂，但实际上加起来，只有七行代码。第一行创建数组并作为数据源。实际案例中，你很可能从数据库、或者WebService那里得到动态的数据。接着，我们创建并加载data store， data store将会告诉Ext的底层库接手处理和格式化这些数据。接着，我们定义一个column模型，用来轻松地调配Gird的每一列参数。最后我们生成这个Gird,传入data store和column模型两个对象，进行渲染并选好第一行。不是太困难吧？如果一切顺利，搞掂之后你会看到像这样的：

当然，你可能对这段代码的某些细节，并不完全掌握其中的含义（像MemoryProxy究竟是什么？）但先不要紧，这个例子的目的是告诉你，用少量的代码，创建一个富界面的多功能的UI组件而已——这是完全可能的，更多细节的内容，留给读者你自己学习吧。这儿有许多学习Grid的资源。Ext Grid教程、交叉Gird演示和Gird API文档。

还有更多的..

这只是冰山一角。还有一打的UI Widgets可以供调用，如 layouts, tabs, menus, toolbars, dialogs, tree view等等。请参阅API文档中范例演示。

使用Ajax

在弄好一些页面后，你已经懂得在页面和脚本之间的控制原理（interact）。接下来，你想知道的是，怎样与后台服务器（remote server）交换数据，常见的是从数据库加载数据（load）或是保存数据（save）到数据库中。通过Javascrīpt异步无刷新交换数据的这种方式，就是所谓的Ajax。Ext内建卓越的Ajax支持，例如，一个普遍的用户操作就是，异步发送一些东西到服务器，然后，UI元素根据回应（Response）作出更新。这是一个包含text input的表单，一个div用于显示消息（注意，你可以在ExtStart.html中加入下列代码，但这必须要访问服务器）：

1.<DIV id=msg style="VISIBILITY: hidden"></DIV>

2. Name: <INPUT id=name>

3.<BR>

4.<INPUT id=oKButton type=button value=OK>

接着，我们加入这些处理交换数据的Javascrīpt代码到文件ExtStart.js中(用下面的代码覆盖)：

01.Ext.onReady(function(){

02. Ext.get('oKButton').on('click', function(){

03. var msg = Ext.get("msg");

04. msg.load({

05. url: [server url], //换成你的URL

06. params: "name=" + Ext.get('name').dom.value,

07. text: "Updating..."

08. });

09. msg.show();

10. });});

这种模式看起来已经比较熟悉了吧！先获取按钮元素，加入单击事件的监听。在事件处理器中（event handler），我们使用一个负责处理Ajax请求、接受响应（Response）和更新另一个元素的Ext内建类，称作UpdateManager。UpdateManager可以直接使用，或者和我们现在的做法一样，通过Element的load方法来访问（本例中该元素是“msg“的div）。当使用Element.load方法，请求（request)会被加工处理后发送，等待服务器的响应（Response），来自动替换元素的innerHTML。简单传入服务器url地址，加上字符串参数，便可以处理这个请求（本例中，参数值来自“name”元素的value),而text值就是请求发送时提示的文本，完毕后显示那个msg的div（因为开始时默认隐藏）。当然，和大多数Ext组件一样，UpdateManager有许多的参数可选，不同的Ajax请求有不同的方案。而这里仅演示最简单的那种。

PHP

1.<? if(isset($_GET['name'])) { echo 'From Server: '.$_GET['name']; } ?>

ASP.Net

1.protected void Page_Load(object sender, EventArgs e)

2.{

3.if (Request["name"] != null)

4.{

5.Response.Write("From Server: " + Request["name"]);

6.Response.End();

7.}

8.}

Cold Fusion

1.<cfif StructKeyExists(url, "name")>

2.<cfoutput>From Server: #url.name#</cfoutput>

3.</cfif>

最后一个关于Ajax的谜题就是，服务器实际处理请求和返回（Resposne）的具体过程。这个过程会是一个服务端页面，一个Servlet，一个Http处理器，一个WebService,甚至是Perl或CGI脚本，即任何一个服务器都可以处理http请求。无法预料的是，服务器返回什么是服务器的事情，无法给一个标准的例子来覆盖所有的可能性。(这段代码输出刚才我们传入'name'的那个值到客户端，即发送什么，返回什么）。

使用Ajax的真正挑战，是需经过适当处理过的手工代码，并相应格式化为服务端可用接受的数据结构。有几种格式供人们选择（最常用为JSON/XML)。正因Ext是一种与服务器中立的语言，使得其它特定语言的库亦可用于Ext处理Ajax服务。只要页面接受到结果是合适的数据格式，Ext绝不会过问服务器的事情！要全面讨论这个问题，已超出本文的范围。推荐正在使用Ajax的您，深入阅读Ext Ajax教程。

译者姓名：Frank
译者博客：http://www.ajaxjs.com/blog/

本文链接

Extjs框架简介(一)

2010-05-25T05:32:00Z

无论你是Ext库的新手，抑或是想了解Ext的人，本篇文章的内容都适合你。本文将简单地介绍Ext的几个基本概念，和如何快速地做出一个动态的页面并运行起来，假设读者已具备了一些JavaScript经验和初级了解HTML Dom。否则的话，请从阅读初学JavaScript资源开始。

下载Ext

如果你未曾下载过，那应从这里下载最新版本的Ext http://extjs.com/downloads。

针对你的下载需求，有几个不同的弹性选项。通常地，最稳定的版本，是较多人的选择。下载解包后，那个example文件夹便是一个探索Ext的好地方！

开始！

我们将使用Ext，来完成一些JavaScript任务。

第一步要做的是，下载本教程的示例文件。Zip文件包括三个文件：ExtStart.html, ExtStart.js和ExtStart.css。解包这三个文件到Ext的安装目录中（例如，Ext是在“C:\code\Ext\v1.0”中，那应该在"v1.0"里面新建目录“tutorial”。双击ExtStart.htm，接着你的浏览器打开启动页面，应该会有一条消息告诉你配置已完毕。如果是一个Javascript错误，请按照页面上的指引操作。

在你常用的IDE中或文本编辑器中，打开ExtStart.js看看：

Ext.onReady可能是你接触的第一个方法。这个方法是指当前DOM加载完毕后，保证页面内的所有元素能被Script引用（reference）。你可删除alert()那行，加入一些实际用途的代码试试：

Ext.onReady(function() {alert("Congratulations!  You have Ext configured correctly!");});

Element：Ext的核心

大多数的JavaScript操作都需要获取页面上的某个元素（reference）,好让你来做有趣的事情。传统的JavaScript方法，是通过ID获取Dom节点的：

var myDiv = document.getElementById('myDiv');

这毫无问题，不过这样单单返回一个对象（DOM节点），用起来并不是太强大和好用。为了要用那节点干点事情，你将会要写不少自定义的代码；另外，对于不同类型浏览器之间的差异，要你处理起来可真头大了。

进入Ext.element对象。元素（element）的的确确是Ext的心脏地带，--无论是访问元素（elements）还是完成一些动作，都要涉及它。Element的API是整个Ext库的基础，如果你时间不多，只想了解Ext中的一个类的话，Element一定是首选！

由ID获取一个Ext Element如下（首页ExtStart.htm包含一个div，ID名字为“myDiv”，然后，在ExtStart.js中加入下列语句）：

Ext.onReady(function() {var myDiv = Ext.get('myDiv');});

再回头看看Element对象，发现什么有趣的东东呢？

Element包含了常见的DOM方法和属性，提供一个快捷的、统一的、跨浏览器的接口（若使用Element.dom的话，就可以直接访问底层DOM的节点。）；
Element.get()方法内置缓存处理（Cache)，多次访问同一对象效率上有极大优势；
内置常用的DOM节点的动作，并且是跨浏览器的定位的位置、大小、动画、拖放等等（add/remove CSS classes, add/remove event handlers, positioning, sizing, animation, drag/drop）。

这意味着你可用最小的代码来做各种各样的事情，这里仅仅是一个简单的例子（完整的列表在ElementAPI中）。

继续在ExtStart.js中，在刚才我们获取好myDiv的位置中加入：

myDiv.highlight(); //黄色高亮显示然后渐退
myDiv.addClass('red'); // 添加自定义CSS类 (在ExtStart.css定义)
myDiv.center(); //在视图中将元素居中
myDiv.setOpacity(.25); // 使元素半透明

1.myDiv.highlight(); //黄色高亮显示然后渐退

2.myDiv.addClass('red'); // 添加自定义CSS类 (在ExtStart.css定义)

3.myDiv.center(); //在视图中将元素居中

4.myDiv.setOpacity(.25); // 使元素半透明

获取多个DOM的节点

通常情况下，不能由ID获取多个DOM的节点，有可能因为没设置ID,或者你不知道ID,又或者直接用ID方式引用有太多元素了。这种情况下，你会不用ID来作为获取元素的依据，可能会用属性（attribute）或CSS Classname代替。基于以上的原因，Ext引入了一个功能异常强大的Dom Selector库，叫做DomQuery。

DomQuery可作为单独的库使用，但常用于Ext，你可以在上下文环境中（Context）获取多个元素，然后通过Element接口调用。幸运的是，Element对象本身便有Element.selcect的方法来实现查询，即内部调用DomQuery选取元素。这个简单的例子中，ExtStart.htm包含若干段落（

标签），没有一个是有ID的，而你想轻松地通过一次操作马上获取每一段，全体执行它们的动作，可以这样做：

// 每段高亮显示Ext.select('p').highlight();

DomQuery的选取参数是一段较长的数组，其中包括W3C CSS3 Dom选取器、基本XPath、HTML属性和更多，请参阅DomQuery API文档以了解这功能强大的库的细节。

响应事件

到这范例为止，我们所写的代码都是放在onReady中，即当页面加载后总会立即执行，功能较单一——这样的话，你便知道，如何响应某个动作或事件来执行你希望做的事情，做法是，先分配一个function，再定义一个event handler事件处理器来响应。我们由这个简单的范例开始，打开ExtStart.htm，编辑下列的代码：

Ext.onReady(function() {
Ext.get('myButton').on('click', function(){
alert("You clicked the button");});});

加载好页面，代码依然会执行，不过区别是，包含alert()的function是已定义好的，但它不会立即地被执行，是分配到按钮的单击事件中。用浅显的文字解释，就是：获取ID为'myDottom'元素的引用，监听任何发生元素被单击的情况，并分配一个function,以准备任何单击元素的情况。

正路来说，Element.select也能做同样的事情，即作用在获取一组元素上。下一例中，演示了页面中的某一段落被单击后，便有弹出窗口：

1.Ext.onReady(function() {

2.Ext.select('p').on('click', function() {

3.alert("You clicked a paragraph");});});

这两个例子中，事件处理的function均是简单几句，没有函数的名称，这种类型函数称为“匿名函数（anonymous function）”，即是没有名的的函数。你也可以分配一个有名字的event handler,这对于代码的重用或多个事件很有用。下一例等效于上一例：

1.Ext.onReady(function() {

2.var paragraphClicked = function() {

3. alert("You clicked a paragraph");}

4.Ext.select('p').on('click', paragraphClicked);});

到目前为止，我们已经知道如何执行某个动作。但当事件触发时，我们如何得知这个event handler执行时是作用在哪一个特定的元素上呢？要明确这一点非常简单，Element.on方法传入到even handler的function中（我们这里先讨论第一个参数，不过你应该浏览API文档以了解even handler更多的细节）。在我们之前的例子中，function是忽略这些参数的，到这里可有少许的改变，——我们在功能上提供了更深层次的控制。必须先说明的是，这实际上是Ext的事件对象（event object）,一个跨浏览器和拥有更多控制的事件。例如，可以用下列的语句，恢复这个事件的指定的DOM节点：

1.Ext.onReady(function() {

2.var paragraphClicked = function(e)

3.{Ext.get(e.target).highlight();}

4.Ext.select('p').on('click', paragraphClicked);});

注意指定的是DOM节点，所以我们首先将其恢复成为适当的元素，然后执行欲完成的事件，这个例子中，我们看见段落是高亮显示的。

本文链接

ASP.NET 压缩和解压缩

2010-04-25T13:35:00Z

        /// <summary>
        /// 压缩文件
        /// </summary>
        /// <param name="DFilePath">需要压缩的文件夹或者单个文件</param>
        /// <param name="DRARName">生成压缩文件的文件名</param>
        /// <param name="DRARPath">生成压缩文件保存路径</param>
        /// <returns></returns>
        protected bool RAR(string DFilePath, string DRARName, string DRARPath)
        {
            String the_rar;
            RegistryKey the_Reg;
            Object the_Obj;
            String the_Info;
            ProcessStartInfo the_StartInfo;
            Process the_Process;
            try
            {
                the_Reg = Registry.ClassesRoot.OpenSubKey(@"Applications\WinRAR.exe\Shell\Open\Command");
                the_Obj = the_Reg.GetValue("");
                the_rar = the_Obj.ToString();
                the_Reg.Close();
                the_rar = the_rar.Substring(1, the_rar.Length - 7);
                the_Info = " a    " + " " + DRARName + " " + DFilePath; //命令 + 压缩后文件名 + 被压缩的文件或者路径
                the_StartInfo = new ProcessStartInfo();
                the_StartInfo.FileName = the_rar;
                the_StartInfo.Arguments = the_Info;
                the_StartInfo.WindowStyle = ProcessWindowStyle.Hidden;
                the_StartInfo.WorkingDirectory = DRARPath; //RaR文件的存放目录。
                the_Process = new Process();
                the_Process.StartInfo = the_StartInfo;
                the_Process.Start();
                return true;
            }
            catch (Exception ex)
            {
                Response.Write(ex.Message);
                return false;
            }
        }

/// <summary>
        /// 解压缩到指定文件夹
        /// </summary>
        /// <param name="RARFilePath">压缩文件存在的目录 </param>
        /// <param name="RARFileName">压缩文件名称 </param>
        /// <param name="UnRARFilePath">解压到文件夹</param>
        /// <returns></returns>
        protected bool UnRAR(string RARFilePath, string RARFileName, string UnRARFilePath)
        {
            //解压缩
            String the_rar;
            RegistryKey the_Reg;
            Object the_Obj;
            String the_Info;
            ProcessStartInfo the_StartInfo;
            Process the_Process;
            try
            {
                the_Reg = Registry.ClassesRoot.OpenSubKey(@"Applications\WinRar.exe\Shell\Open\Command");
                the_Obj = the_Reg.GetValue("");
                the_rar = the_Obj.ToString();
                the_Reg.Close();
                the_rar = the_rar.Substring(1, the_rar.Length - 7);
                the_Info = @" X " + " " + RARFilePath + RARFileName + " " + UnRARFilePath;
                the_StartInfo = new ProcessStartInfo();
                the_StartInfo.FileName = the_rar;
                the_StartInfo.Arguments = the_Info;
                the_StartInfo.WindowStyle = ProcessWindowStyle.Hidden;
                the_Process = new Process();
                the_Process.StartInfo = the_StartInfo;
                the_Process.Start();
                return true;
            }
            catch (Exception ex)
            {
                Response.Write(ex.Message);
                return false;
            }
        }

本文链接