BlogJava-把永恒在一刹那间收藏-文章分类-javascript

[转]jQuery对象与dom对象相互转换

黎夕 — Sat, 31 Mar 2012 02:10:00 GMT

什么是jQuery对象？

---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法。

比如：

$("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法

这段代码等同于用DOM实现代码：

document.getElementById("id").innerHTML;

虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错。比如：$("#test").innerHTML、document.getElementById("id").html()之类的写法都是错误的。

还有一个要注意的是：用#id作为选择符取得的是jQuery对象与document.getElementById("id")得到的DOM对象，这两者并不等价。请参看如下说的两者间的转换。

既然jQuery有区别但也有联系，那么jQuery对象与DOM对象也可以相互转换。在再两者转换前首先我们给一个约定：如果一个获取的是 jQuery对象，那么我们在变量前面加上$，如：var $variab = jQuery对象；如果获取的是DOM对象，则与习惯普通一样：var variab = DOM对象；这么约定只是便于讲解与区别，实际使用中并不规定。

jQuery对象转成DOM对象：

两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);

(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。

如：var $v =$("#v") ; //jQuery对象

var v=$v[0]; //DOM对象

alert(v.checked) //检测这个checkbox是否被选中

(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象

如：var $v=$("#v"); //jQuery对象

var v=$v.get(0); //DOM对象

alert(v.checked) //检测这个checkbox是否被选中

DOM对象转成jQuery对象:

对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)

如：var v=document.getElementById("v"); //DOM对象

var $v=$(v); //jQuery对象

转换后，就可以任意使用jQuery的方法了。

通过以上方法，可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是：DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法。

黎夕 2012-03-31 10:10 发表评论

常用的js验证数字，电话号码，传真，邮箱，手机号码，邮编，日期

黎夕 — Fri, 04 Jun 2010 05:16:00 GMT

1、数字
function testisNum(object)
{
var s =document.getElementById(object.id).value;
if(s!="")
{
      if(isNaN(s))
      {
      alert("请输入数字");
      object.value="";
      object.focus();
      }
}
}

2、电话号码，传真

//校验普通电话、传真号码：可以“+”开头，除数字外，可含有“-”
function isTel(object)
{
//国家代码(2到3位)-区号(2到3位)-电话号码(7到8位)-分机号(3位)"
var s =document.getElementById(object.id).value;
var pattern =/^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/;
//var pattern =/(^[0-9]{3,4}\-[0-9]{7,8}$)|(^[0-9]{7,8}$)|(^$[0-9]{3,4}$[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/;
   if(s!="")
   {
      if(!pattern.exec(s))
      {
      alert('请输入正确的电话号码:电话号码格式为国家代码(2到3位)-区号(2到3位)-电话号码(7到8位)-分机号(3位)"');
      object.value="";
      object.focus();
      }
   }
}

3、邮箱
function Check(object)
{
var s =document.getElementById(object.id).value;
var pattern =/^[a-zA-Z0-9_\-]{1,}@[a-zA-Z0-9_\-]{1,}\.[a-zA-Z0-9_\-.]{1,}$/;
   if(s!="")
   {
         if(!pattern.exec(s))
         {
         alert('请输入正确的邮箱地址');
         object.value="";
         object.focus();
         }
   }

}

4、手机号码

//校验手机号码：必须以数字开头，除数字外，可含有“-”
function isMobile(object)
{
  var s =document.getElementById(object.id).value;
  var reg0 = /^13\d{5,9}$/;
  var reg1 = /^153\d{4,8}$/;
  var reg2 = /^159\d{4,8}$/;
  var reg3 = /^0\d{10,11}$/;
  var my = false;
  if (reg0.test(s))my=true;
  if (reg1.test(s))my=true;
  if (reg2.test(s))my=true;
  if (reg3.test(s))my=true;
if(s!="")
{
      if (!my)
      {
         alert('请输入正确的手机号码');
         object.value="";
         object.focus();
      }
}
}

//校验日期
function isdate(object)
{
var s =document.getElementById(object.id).value;
var pattern =/^((\d{2}(([02468][048])|([13579][26]))[\-\/\s]?((((0?[13578])|(1[02]))[\-\/\s]?((0?[1-9])|([1-2][0-9])|(3[01])))|(((0?[469])|(11))[\-\/\s]?((0?[1-9])|([1-2][0-9])|(30)))|(0?2[\-\/\s]?((0?[1-9])|([1-2][0-9])))))|(\d{2}(([02468][1235679])|([13579][01345789]))[\-\/\s]?((((0?[13578])|(1[02]))[\-\/\s]?((0?[1-9])|([1-2][0-9])|(3[01])))|(((0?[469])|(11))[\-\/\s]?((0?[1-9])|([1-2][0-9])|(30)))|(0?2[\-\/\s]?((0?[1-9])|(1[0-9])|(2[0-8]))))))(\s(((0?[0-9])|([1-2][0-3]))\[0-5]?[0-9])((\s)|(\[0-5]?[0-9])))))?$/;
   if(s!="")
   {
      if(!pattern.exec(s))
      {
      alert('请输入正确的日期');
      object.value="";
      object.focus();
      }
   }
}
5、邮编

//校验(国内)邮政编码
function isPostalCode(object)
{
var s =document.getElementById(object.id).value;
var pattern =/^[0-9]{6}$/;
   if(s!="")
   {
      if(!pattern.exec(s))
      {
      alert('请输入正确的邮政编码');
      object.value="";
      object.focus();
      }
   }
}

6、日期
//校验日期
function isdate(object)
{
var s =document.getElementById(object.id).value;
var pattern =/^((\d{2}(([02468][048])|([13579][26]))[\-\/\s]?((((0?[13578])|(1[02]))[\-\/\s]?((0?[1-9])|([1-2][0-9])|(3[01])))|(((0?[469])|(11))[\-\/\s]?((0?[1-9])|([1-2][0-9])|(30)))|(0?2[\-\/\s]?((0?[1-9])|([1-2][0-9])))))|(\d{2}(([02468][1235679])|([13579][01345789]))[\-\/\s]?((((0?[13578])|(1[02]))[\-\/\s]?((0?[1-9])|([1-2][0-9])|(3[01])))|(((0?[469])|(11))[\-\/\s]?((0?[1-9])|([1-2][0-9])|(30)))|(0?2[\-\/\s]?((0?[1-9])|(1[0-9])|(2[0-8]))))))(\s(((0?[0-9])|([1-2][0-3]))\[0-5]?[0-9])((\s)|(\:([0-5]?[0-9])))))?$/;
   if(s!="")
   {
      if(!pattern.exec(s))
      {
      alert('请输入正确的日期');
      object.value="";
      object.focus();
      }
   }
}

一、清除空格
String.prototype.trim = function()//去除空格
{
               return this.replace(/(^[\s]*)|([\s]*$)/g, "");
}

二、检查一个字符串是否包含特殊字符
/*
功能：检查传入的字符串中是否包含特殊字符
参数：str-要检查的字符串
输出："1"表示字符串不包含特殊字符，验证成功；否则返回"0"
相关说明：空字符串可通过验证
*/
function CheckSpecialString(str)
{
StringFilter = new Array ("'" ,"\\", ".", ",", ";", "/","<","}","%","*");//可以向StringFilter中添加要过滤的字符
i=StringFilter.length;
j=str.length;
for (k=0;k {
            for (m=0;m             {
            temp1=str.charAt(m);
            temp2=StringFilter[k];
            if (temp1==temp2)
            {
               return 0;
            }
            }
}
return 1;
}

1）  "^\\d+$"　　//非负整数（正整数 + 0）
  "^[0-9]*[1-9][0-9]*$"　　//正整数
  "^((-\\d+)|(0+))$"　　//非正整数（负整数 + 0）
  "^-[0-9]*[1-9][0-9]*$"　　//负整数
  "^-?\\d+$"　　　　//整数
  "^\\d+(\\.\\d+)?$"　　//非负浮点数（正浮点数 + 0）
  "^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$" //正浮点数
  "^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$"　　//非正浮点数（负浮点数 + 0）
  "^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$" //负浮点数
  "^(-?\\d+)(\\.\\d+)?$"　　//浮点数

测试：

黎夕 2010-06-04 13:16 发表评论

[引用]apply/call/caller/callee/bi

黎夕 — Mon, 10 May 2010 02:51:00 GMT

一、call 方法
调用一个对象的一个方法，以另一个对象替换当前对象(其实就是更改对象的内部指针，即改变对象的this指向的内容)。
Js代码
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数
thisObj
可选项。将被用作当前对象的对象。
arg1, arg2, , argN
可选项。将被传递方法参数序列。
说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。
Js代码

复制代码代码如下:

Code
function Obj(){this.value="对象！";}
var value="global 变量";
function Fun1(){alert(this.value);}
window.Fun1(); //global 变量
Fun1.call(window); //global 变量
Fun1.call(document.getElementById('myText')); //input text
Fun1.call(new Obj()); //对象！

Js代码
Code

复制代码代码如下:

 
var first_object = { 

num: 42 

};

var second_object = { 

num: 24 

}; 

function
multiply(mult) { 

return this.num * mult; 

} 

multiply.call(first_object,
5); // returns 42 * 5 

multiply.call(second_object, 5); // returns
24 * 5

二、apply方法
apply方法的第一个参数也是要传入给当前对象的对象，即函数内部的this。后面的参数都是传递给当前对象的参数。
对于apply和call两者在作用上是相同的，但两者在参数上有区别的。对于第一个参数意义都一样，但对第二个参数：apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为 call的参数传入（从第二个参数开始）。
如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1, [var1,var2,var3])同时使用apply的好处是可以直接将当前函数的arguments对象作为apply的第二个参数传入。
Js 代码

复制代码代码如下:

 
var func=new
function(){this.a="func"} 

var myfunc=function(x,y){ 

var
a="myfunc"; 

alert(this.a); 

alert(x + y); 

} 

myfunc.call(func,"var","
fun");// "func" "var fun" 

myfunc.apply(func,["var"," fun"]);//
"func" "var fun"

三、caller 属性
返回一个对函数的引用，即调用了当前函数的函数体。
functionName.caller :functionName 对象是所执行函数的名称。
说明:
对于函数来说，caller 属性只有在函数执行时才有定义。如果函数是由 JScript 程序的顶层调用的，那么 caller 包含的就是 null 。如果在字符串上下文中使用 caller 属性，那么结果和 functionName.toString 一样，也就是说，显示的是函数的反编译文本。
Js代码

复制代码代码如下:

 
function
CallLevel(){ 

if (CallLevel.caller == null) 

alert("CallLevel was
called from the top level."); 

else 

alert("CallLevel was called
by another function:
"+CallLevel.caller); 

} 

function funCaller(){ 

CallLevel(); 

}

CallLevel(); 

funCaller()

四、callee属性
返回正被执行的 Function 对象，也就是所指定的 Function 对象的正文。
[function.]arguments.callee: 可选项 function 参数是当前正在执行的 Function 对象的名称。
说明:
callee 属性的初始值就是正被执行的 Function 对象。
callee 属性是 arguments 对象的一个成员，它表示对函数对象本身的引用，这有利于匿
函数的递归或者保证函数的封装性，例如下边示例的递归计算1到n的自然数之和。而该属性
仅当相关函数正在执行时才可用。还有需要注意的是 callee拥有length属性，这个属性有时
用于验证还是比较好的。arguments.length是实参长度，arguments.callee.length是
形参长度，由此可以判断调用时形参长度是否和实参长度一致。
Js代码

复制代码代码如下:

 
//callee可以打印其本身 

function
calleeDemo() { 

alert(arguments.callee); 

} 

//用于验证参数 

function
calleeLengthDemo(arg1, arg2) { 

if
(arguments.length==arguments.callee.length) { 

window.alert("验证形参和实参长
度正确！"); 

return; 

} else { 

alert("实参长度：" +arguments.length); 

alert("
形参长度： " +arguments.callee.length); 

} 

} 

//递归计算 

var sum =
function(n){ 

if (n <= 0) 

return 1; 

else 

return n
＋arguments.callee(n - 1) 

}

五、bind
Js 代码

复制代码代码如下:

 
var first_object = { 

num: 42 

};

var second_object = { 

num: 24 

}; 

function
multiply(mult) { 

return this.num * mult; 

} 

Function.prototype.bind
= function(obj) { 

var method = this, 

temp = function() { 

return
method.apply(obj, arguments); 

}; 

return temp; 

} 

var
first_multiply = multiply.bind(first_object); 

first_multiply(5); //
returns 42 * 5 

var second_multiply = multiply.bind(second_object); 

second_multiply(5);
// returns 24 * 5

六、JS闭包(Closure)
所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
关于闭包，最简单的描述就是 ECMAScript 允许使用内部函数－－即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。也就是说，内部函数会在外部函数返回后被执行。而当这个内部函数执行时，它仍然必需访问其外部函数的局部变量、参数以及其他内部函数。这些局部变量、参数和函数声明（最初时）的值是外部函数返回时的值，但也会受到内部函数的影响。
简而言之，闭包的作用就是在out function执行完并返回后，闭包使得Javascript的垃圾回收机制GC不会收回out function所占用的资源，因为out function的内部函数inner function的执行需要依赖out function中的变量。
闭包的两个特点：
1、作为一个函数变量的一个引用 - 当函数返回时，其处于激活状态。
2、一个闭包就是当一个函数返回时，一个没有释放资源的栈区。
例1：
Html代码

复制代码代码如下:

例2：
Html代码

复制代码代码如下:

例3：
Js代码

复制代码代码如下:

说明：其中的关键技巧在于通过执行一个单行（in-line）函数表达式创建一个额外的执行环境，而将该函数表达式返回的内部函数作为在外部代码中使用的函数。此时，缓冲数组被定义为函数表达式的一个局部变量。这个函数表达式只需执行一次，而数组也只需创建一次，就可以供依赖它的函数重复使用。
七、原型链
ECMAScript 为 Object 类型定义了一个内部 [[prototype]] 属性。这个属性不能通过脚本直接访问，但在属性访问器解析过程中，则需要用到这个内部[[prototype]] 属性所引用的对象链－－即原型链。可以通过一个公共的 prototype 属性，来对与内部的 [[prototype]] 属性对应的原型对象进行赋值或定义。
例1：
Js代码

复制代码代码如下:

黎夕 2010-05-10 10:51 发表评论

【引用】 ExtJS--数据存储与传输

黎夕 — Thu, 18 Mar 2010 06:03:00 GMT

Ext.data在命名空间中定义了一系列store、reader和proxy。Grid和ComboxBox都是以Ext.data为媒介获取数据的，它包含异步加载、类型转换、分页等功能。EXT默认支持Array、JSON、XML等数据格式，可以通过Memory、HTTP、 ScriptTag等方式获得这些格式的数据。如果要实现新的协议和新的数据结构，只需要扩展reader和proxy即可。本章主要介绍EXT中的数据存储与传输。

一、Ext.data.Connection

Ext.data.Connection主要用于在Ext.data.HttpProxy和Ext.data.ScriptTagProxy中执行与后台交互的任务，它会从指定的URL获得数据,并把后台返回的数据交给HttpProxy或ScriptTagProxy处理，Ext.data.Connection的使用方式如下面所示：

(1) 首先创建一个新的Ext.data.Connection实例。

view plain copy to clipboard print ?

var conn=new Ext.data.Connection({
autoAbort:false,
defaultHeaders:{
referer:'http://www.sina.com.cn'
},
disableCaching:false,
extraParams:{
name:'name'
},
method:'GET',
timeout:300,
url:'01-01.txt'
});

(2) 在创建conn之后，可以调用request()函数发送请求，处理返回的结果。

view plain copy to clipboard print ?

conn.request({
success:function(response){
Ext.Msg.alert('info',response.responseText);
},
failure:function(){
Ext.Msg.alert('warn','failure');
}
});

(3) Ext.data.Connection还提供了abort([Number transactionId])函数，当同时有多个请求发生时，根据指定的事务id放弃其中的某一个请求，如果不指定id,则会放弃最后一个请求。

二、Ext.data.Record

Ext.data.Record就是一个设定了内部数据类型的对象，它是Ext.data.Store的最基本组成部分。 Ext.data.Record的主要功能是保存数据，并且在内部数据发生改变时记录修改的状态，它还可以保留修改之前的原始值。

(1) 我们使用Ext.data.Record时，通常都是由create()函数开始,首先用create()函数创建一个自定义的Recore类型，如下所示：

view plain copy to clipboard print ?

var PersonRecord=Ext.data.Record.create([
{name:'name',type:'string'},
{name:'sex',type:'int'}
]);

(2) PersonRecord就是我们定义的新类型，然后我们使用new关键字创建PersonRecord的实例：

view plain copy to clipboard print ?

var boy=new PersonRecord({
name:'boy',
sex:0
});

(3) 现在，我们得到了PersonRecord的实例boy，如何得到它的属性值？以下有三种方法：

view plain copy to clipboard print ?

alert(boy.data.name);
alert(boy.data['name']);
alert(boy.get['name']);

三、Ext.data.Store

Ext.data.Store是EXT中用来进行数据交换和数据交互的标准中间件，无论是Grid还是ComBox，都是通过它实现数据读取、类型转换、排序分列和搜索等操作。Ext.data.Store中有一个Ext.data.Record数组，所有数据都存放在这些 Ext.data.Record实例中，为后面的读取和修改操作做准备。

(1) 在使用之前，首先要创建一个Ext.data.Store的实例，如下面代码：

view plain copy to clipboard print ?

var data=[
['boy',0],
['girl',1]
];
var store=new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},PersonRecord)
});
store.load();

(2) 每个store最少需要两个组件的支持，分别是proxy和reader，proxy是用于从某个途径读取原始数据，reader用于将原始数据转换成 Record实例。

四、小结

本章主要详细介绍了Ext.data.Record和Ext.data.Store的功能和基本使用方法，这两个类结合起来形成了Ext.data 中的主体数据模型，很多组件都是建立在它们之上的，至于其他的常用的proxy,reader,store:SimpleStore和JsonStore 则在后面学习中给出详细介绍。

黎夕 2010-03-18 14:03 发表评论

【引用】ExtJS的--工具栏和菜单

黎夕 — Thu, 18 Mar 2010 06:02:00 GMT

菜单的种类很多，包括下拉菜单、分组菜单、右键菜单等等，右键菜单与Window桌面上单击右键弹出的菜单效果一样，只是样式不同，菜单上的内容包括文字、单选框、按钮等。对于EXT来说，这些菜单的实现都非常简单。

我们可以在一个面板的顶端或底端放置一横排功能按钮，按下不同的按钮时会执行不同的操作。我们把这个横条称为工具条，放在工具条上的按钮称为菜单。本章将详细介绍EXT中工具栏和菜单的使用方法。

一、简单菜单

创建一个简单工具条的方法如下，注意的一点是HTML代码必须要有：

过程大致包括：先创建一个工具条，用工具条的render()函数把它渲染在DIV上，然后调用Toolbar的add函数，向Toolbar添加 4个按钮，同时还可以添加单击处理事件。

view plain copy to clipboard print ?

Ext.onReady(function(){
var tb=new Ext.Toolbar();
tb.render('toolbar');
tb.add({
text:"新建N",
handler:function(){
Ext.Msg.alert('提示','新建');
}
},{
text:"修改C"
},{
text:"删除"
},{
text:"显示"
});
});

效果如图1所示：

图1 简单的工具条

二、向菜单中添加分隔线

分隔线显示就是一条水平线，可以使用它将菜单中不同类型的菜单项分隔显示，Ext中向菜单中添加分隔线的方式有两种。

1、使用连字符或'separator'作为参数，如下面的代码所示：

view plain copy to clipboard print ?

var menu1=new Ext.menu.Menu({
items:[
{text:'菜单一'},
{text:'菜单二'}
]
});
//menu1.add('-');
menu1.add('separator');
var tb=new Ext.Toolbar();
tb.render('toolbar');
tb.add({
text:'新建',
menu:menu1
});

2、用Ext.menu.Separator的实例作为参数，如下面的代码所示：

view plain copy to clipboard print ?

menu1.add(new Ext.menu.Separator());

具体效果如图2所示：

图2.1 无分隔线效果

图2.2 具有分隔线效果

三、多级菜单

下拉菜单可以嵌套，而且嵌套的层数似乎任意的，我们先来看一个两层结构的菜单，实现方法很简单，只要在下拉菜单中再加一个menu菜单参数并指定对应的下级菜单即可，如下面代码所示：

view plain copy to clipboard print ?

var menuHistory=new Ext.menu.Menu({
items:[
{text:'今天'},
{text:'昨天'},
{text:'一周'},
{text:'一年'}
]
});
var menuFile=new Ext.menu.Menu({
items:[{
text:'新建'
},{
text:'打开'
},{
text:'保存'
},{
text:'历史',menu:menuHistory
},{
text:'关闭'
}]
});
var tb=new Ext.Toolbar();
tb.render('toolbar');
tb.add({
text:'文件',
menu:menuFile
});

实现效果图如下所示：

图3 两层结构的嵌套菜单

在上面的实例中，我们可以直接使用menu参数指定在菜单的哪个部分加上子菜单。利用这些方法，我们就可以轻易实现自己想要的功能菜单了。

四、高级菜单

除了上面提到的最基本的菜单按钮，EXT还为我们提供了一些功能比较复杂的菜单控件，供我们直接调用，本节将详细介绍这些高级菜单的使用方法和实例。

4.1 多选菜单和单选菜单

我们使用Ext.menu.CheckItem来创建多选菜单,text参数表示菜单上显示的文字，checked参数表示当前菜单项是否被选中.checkHandler用来指定选中菜单时执行的处理菜单.单选菜单也基本类似，具体使用代码如下：

view plain copy to clipboard print ?

var menuCheckbox=new Ext.menu.Menu({
items:[
new Ext.menu.CheckItem({
text:'粗体',
checked:true,
checkHandler:function(item,checked){
Ext.Msg.alert('多选',(checked?'选中':'取消')+'粗体');
}
}),
new Ext.menu.CheckItem({
text:'斜体 ',
checked:true,
checkHandler:function(item,checked){
Ext.Msg.alert('多选',(checked?'选中':'取消')+'斜体');
}
})
]
})
var tb=new Ext.Toolbar();
tb.render('toolbar');
tb.add({
text:'字体',
menu:menuCheckbox
});

效果图如图4所示

图4 多选菜单

4.2 时间菜单

EXT为我们提供了选择日期的菜单Ext.menu.DateMenu，它可以让我们直接把日期选择功能加入到菜单中，实现的代码如下：

view plain copy to clipboard print ?

tb.add({
text:'日期',
menu:new Ext.menu.DateMenu({
handler:function(dp,date){
Ext.Msg.alert('选择日期','你选择的日期是 {0}.',date.format('Y年m月d日'));
}
})
});

注意，这时Ext.menu.DateMenu时一个Menu而不是MenuItem,使用时应该用menu参数将它设置成上级菜单的子菜单。实现的效果图如图5所示。

图5 日期菜单

4.3 颜色菜单

EXT为我们提供了选择颜色的功能菜单Ext.menu.ColorMenu,效果图如图6所示。

图6 颜色菜单

颜色选择菜单虽然不常用，但它的效果十分绚丽，它的用法与日期菜单相似，也有特定的handler，如下面代码所示：

view plain copy to clipboard print ?

tb.add({
text:'颜色',
menu:new Ext.menu.ColorMenu({
handler:function(cm,color){
if(typeof color=='string'){
Ext.Msg.alert('选择颜色','选择的颜色是'+color);
}
}
})
});

五、小结

本章主要介绍如何创建工具条和菜单，以及如何使用下拉菜单和分级菜单对我们需要的功能按钮进行分组显示，除此之外，还关于高级菜单进行了分析。至于分页控件Ext.PagingToolbar的使用方法在后面的章节会给出介绍。

黎夕 2010-03-18 14:02 发表评论

【引用】 ExtJS--布局

黎夕 — Thu, 18 Mar 2010 06:01:00 GMT

所谓布局，简单来说就是决定把什么东西放到什么位置上，对于管理软件来说，一般都是首部放标题，左边放菜单栏，空余的右下方用来显示具体的内容。本章将详细介绍EXT中布局的用法。

一、传统的布局方式

我们可以用Ext.Viewport类对整个页面进行整体布局，具体使用方法如下：

view plain copy to clipboard print ?

var viewport=new Ext.Viewport({
layout:'border',
items:[{
region:'north',
height:40,
html:'
薛敬明专栏
'
},{
region:'west',
width:100,
html:'
菜单一
菜单二
'
},{
region:'center',
html:'主要内容'
}]
});

效果图如图1所示：

图1 传统的布局形式

二、最常用的边框布局BorderLayout

Ext.layout.BorderLayout布局把整个布局区域分成东、西、南、北、中5个部分，除了中间区域以外，其他的区域又都是可以省略的，因此我们可以利用它制作出更复杂、更灵活的布局。具体代码如下：

view plain copy to clipboard print ?

var viewport2=new Ext.Viewport({
layout:'border',
items:[{
region:'north',html:'north'
},{
region:'south',html:'south'
},{
region:'east',html:'east'
},{
region:'west',html:'west'
},{
region:'center',html:'center'
}]
});

效果图如图2所示。

图2 使用BorderLayout的布局

注意：center是绝对不能省略的，如果items中缺少了region:'center'就会报错，会造成程序中断。

2.1 设置子区域的大小

我们仅仅需要添加width和height参数，这样就可以指定每个子区域的大小了。但是，north和south两个区域只能指定高度值，宽度值由BorderLayout自动计算；east和west只能指定宽度值，高度值由BorderLayout自动计算；center区域的大小由其他4个部分决定。设置的代码如下所示：

view plain copy to clipboard print ?

var viewport2=new Ext.Viewport({
layout:'border',
items:[{
region:'north',html:'north',height:120
},{
region:'south',html:'south'
},{
region:'east',html:'east'
},{
region:'west',html:'west',width:40
},{
region:'center',html:'center'
}]
});

2.2 使用split并限制它的范围

使用split后，我们可以允许用户自动拖放以改变某一个区域的大小，实现的方式只要设置split:true参数即可实现，具体代码如下。

实现效果图如图3所示。

view plain copy to clipboard print ?

var viewport=new Ext.Viewport({
layout:'border',
items:[{
region:'north',
height:40,
html:'
薛敬明专栏
'
},{
region:'west',
html:'
菜单一
菜单二
',
width:100,
split:true
},{
region:'center',
html:'主要内容'
}]
});

图3 设置split:true后的效果图

2.3 子区域的展开和折叠

该功能可以让一个区域展开和折叠(相当于隐藏)，实现的方式只需要配置几个参数即可，具体代码如下，主要配置参数是 collapsible:true，这个参数激活了某个区域的折叠功能，而且前面的title参数也是必须设置的。实现代码和效果图如下所示。

view plain copy to clipboard print ?

var viewport=new Ext.Viewport({
layout:'border',
items:[{
region:'north',
height:40,
html:'
薛敬明专栏
'
},{
region:'west',
html:'
菜单一
菜单二
',
title:'west',
width:100,
//split:true
collapsible:true
},{
region:'center',
html:'主要内容'
}]
});

图4 带有折叠效果的布局

三、制作伸缩菜单的布局——Accordion

Accordion是EXT中默认布局的一部分，如果想用它，直接将区域加上layout:'accordion'即可，其他部分基本无需改动。我们利用ViewPort制作出只有west和center两个区域的BorderLayout，在west部分放上Accordion，实现方式如下面代码所示。

view plain copy to clipboard print ?

var viewport=new Ext.Viewport({
layout:'border',
items:[{
region:'west',
width:200,
layout:'accordion',
layoutConfig:{
titleCollapse:true,
animate:true,
activeOnTop:false
},
items:[{
title:'第一栏',
html:'第一栏'
},{
title:'第二栏',
html:'第二栏'
},{
title:'第三栏',
html:'第三栏'
}]
},{
region:'center',
split:true,
border:true
}]
});

效果图如图5所示。

图5 使用了Accordion的示例

设置了layout:'accordion'后，再使用items添加3个元素，记得每个子元素里都要加上title参数，accordion没有提供默认的标题，不设置标题是一定会出错的。与布局有关的配置项都写到layoutConfig里。

黎夕 2010-03-18 14:01 发表评论

【引用】 ExtJS的--树形结构

黎夕 — Thu, 18 Mar 2010 05:58:00 GMT

在应用程序中，我们经常需要显示或处理树状结构的对象信息，比如部门信息和地区信息，树是一种非常典型的数据结构，这些信息都可以用树来表示。对于传统的HTML页面来说，完全依靠手动编码来实现树是比较困难的，因为需要写很多的JS代码，对基于AJAX异步加载来说尤其如此，不但涉及AJAX数据异步加载，还需要考虑跨浏览器支持，处理起来非常麻烦，EXT中提供了现成的树控件，通过这些控件，可以在B/S应用中快速开发出包含树形信息结构的应用。

本文就是详细介绍树形结构的使用过程和实例。

一、创建一棵树

树控件由Ext.tree.TreePanel类定义，控件的名称为TreePanel，TreePanel类继承自Panel面板，在EXT中使用树控件非常简单，我们先来看一下代码（包含配置信息）。

view plain copy to clipboard print ?

"http://www.w3.org/1999/xhtml" >
"Head1" runat="server">
简单的树形
"stylesheet" type="text/css" href="../resources/css/ext-all.css"/>
"text/javascript" src="../adapter/ext/ext-base.js"
"text/javascript" src="../ext-all.js">
"text/javascript">

3、注意HTML中无需定义太多东西，只需要定义个div id='div1'就可以实现，初始配置显然变得更紧凑，利用items和buttons指定包含的控件和按钮。具体实现效果如图1所示。

图1 简单的表单

二、FormPanel和BasicForm详解

如上面的实例所示，我们需要定义一个Ext.form.FormPanel,然后在里面设置field,引入Ext.form.FormPanel 的最大好处就是利于布局，Ext.form.FormPanel继承了Ext.Panel,作为一个Panel,我们可以把 Ext.form.FormPanel放到Ext.Viewport中作为整个页面布局的一部分，同时也可以利用items指定 Ext.form.FormPanel内部的子组件。如其他的Panel一样，我们可以通过xtype来指定每个子组件的类型，而不必手工创建它们。

三、EXT支持的控件

EXT提供了TextField、TextArea、CheckBox、Radio、ComboBox、DateField、HtmlEditor 这些通用控件，以及Ext 2.0新增的Hidden和TimeField.

3.1 文本输入控件Ext.form.TextField

直接继承Ext.form.Field，这是一个专门用来输入文本数据的输入控件，最常用的功能就是可以检测内部输入的数据是否为空，还可以控制输入数据的内容以及最大最小长度，如下面的代码所示：

view plain copy to clipboard print ?

Ext.onReady(function(){
var form=new Ext.form.TextField({
fieldLabel:'输入',
allowBlank:false,
emptyText:'请输入…',
maxLenght:50,
minLength:10
});
form.render("div1");
});

3.2 多行文本输入控件Ext.form.TextArea

Ext.form.TextArea也是用来输入文本的输入控件，与Ext.form.TextField不同之处在于它可以输入多行文本，除此以外，两者的用法都是相同的。如下面代码所示,preventScrollbars是用于防止出现滚动条的。

view plain copy to clipboard print ?

Ext.onReady(function(){
var form=new Ext.form.TextArea({
width:200,
grow:true,
preventScrollbars:true,
fieldLabel:'empty',
allowBank:false,
emptyText:'空',
maxLength:50,
minLength:10
});
form.render("div1");
});

3.3 日期输入控件Ext.form.DateField

Ext.form.DateField是平时经常用到的日期选择控件，除了弹出日历选择日期的功能之外，还支持所有Ext.form.Field以及Ext.form.TextField中定义的功能，如下面代码所示，format表示如何保存显示选中的日期，我们可以采用任意的模式显示选中的日期，disableDays的参数值是一个数组，内部可以包括0至7的整数，它可以禁止用户选择一周内的指定日期。效果图如图2所示。

view plain copy to clipboard print ?

Ext.onReady(function(){
var form=new Ext.form.DateField({
fieldLabel:'日期',
emptyText:'请选择',
format:'Y-m-d',
disabledDays:[0,6]
});
form.render("div1");
});

图2 日期输入控件(禁止选择每周的周六和周日)

3.4 时间输入控件Ext.form.TimeField

Ext.form.TimeField是用来选择时间的输入控件，它可以通过制定一天中的起始时间、结束时间以及时间间隔的方式来为用户提供可供选择的时间，如下面的代码所示,我们将起始时间设置为上午10点，结束时间设置为下午14点，时间间隔为30分钟。

view plain copy to clipboard print ?

Ext.onReady(function(){
var form=new Ext.form.TimeField({
fieldLabel:'时间',
emptyText:'请选择',
minValue:'10:00 AM',
maxValue:'14:00 PM',
increment:30
});
form.render("div1");
});

3.5 在线编辑器Ext.form.HtmlEditor

Ext.form.HtmlEditor是一个简易的在线编辑器，能对文本进行各项设置。Ext.form.HtmlEditor的页面显示样式如图3所示。

图3 使用在线编辑器编辑文本样式

Ext.form.HtmlEditor的使用方法如下面的代码所示：

view plain copy to clipboard print ?

Ext.onReady(function(){
var form=new Ext.form.HtmlEditor({
fieldLabel:'在线编辑器',
enableAlignments:true,
enableColors:true,
enableFont:true,
enableFontSize:true,
enableFormat:true,
enableLinks:true,
enableLists:true,
enableSourceEdit:true
});
form.render("div1");
});

3.6 隐藏域Ext.form.Hidden

Ext.form.Hidden直接继承自Ext.form.Field，我们可以通过它的setValue()和getValue()函数对它执行赋值和取值操作，但它不会显示在页面上。具体代码如下：

view plain copy to clipboard print ?

var field=new Ext.form.Hidden({
name:'hiddenId'
});
field.setValue('some thing');
var value=filed.getValue();

3.7 下拉输入框Ext.form.TriggerField

Ext.form.TriggerField是ComboBox、DateField和TimeField的父类，它既可以手工录入数据，也可以通过选择录入数据，为了显示下拉选择的功能，我们需要覆写它的onTriggerClick()函数以实现弹出窗口，如下面的代码所示：

view plain copy to clipboard print ?

Ext.onReady(function(){
var form=new Ext.form.TriggerField({
fieldLabel:'选择',
name:'name',
onSelect:function(record){
},
onTriggerClick:function(){
if(this.menu==null){
this.menu=selectMenu;
}
this.menu.show(this.el,'tl-bl?');
}
});
form.render("div1");
});

四、数据校验

数据校验非常有必要，因为用户输入的数据有时候是不可靠的，EXT把验证封装到了表单的控件中，下面详细介绍如何使用它们。

4.1 输入不能为空

最基本的验证就是文本框或者其他控件中必须输入值，如下面的代码，allowBlank默认值为true，也就是说可以不输入数据，将它改成 false,文本框如果没有输入值就会出现红线。

view plain copy to clipboard print ?

Ext.onReady(function(){
var form=new Ext.form.TextField({
name:'text',
fieldLabel:'文本框',
allowBlank:false
});
form.render("div1");
});

4.2 最大长度和最小长度

限制输入的最大长度和最小长度是一种常见的校验方式，数据库只容许输入255个字符，当用户输入的数据超出最大长度时就会引起错误。如下面代码所示，我们设置最大长度不能超过10个字符，最小长度不能小于5个字符。效果图如图4所示。

view plain copy to clipboard print ?

Ext.onReady(function(){
var form=new Ext.form.TextField({
name:'text',
fieldLabel:'文本框',
maxLength:10,
minLenght:5
});
form.render("div1");
});

图4 最大长度校验

4.3 借助vtype

EXT提供了一套默认的校验方案，其实就是一系列输入规则和错误提示。如果使用它们，就不需要再去背那一长串正则表达式，只要记住vtype的值即可，然后配置在空间中即可，如下面代码所示,这里我们给vtype设置的是E-mail，限制text只能使用邮箱地址的格式，非常简单。

view plain copy to clipboard print ?

Ext.onReady(function(){
var form=new Ext.form.TextField({
name:'text',
fieldLabel:'文本框',
vtype:'email'
});
form.render("div1");
});

默认情况下，vtype一共有4种验证信息：alpha:只能输入英文字母;alphanum:只能输入字母和数字;email:电子邮箱;url:网址

4.4 自定义校验规则

其实自定义校验规则就是允许自定义正则表达式，可以编写一个regex对输入数据进行校验，这样一来，无论是何种形式的数据，都能对其进行判断，如下面代码所示，我们使用regex验证只能输入汉字的情况。

view plain copy to clipboard print ?

Ext.onReady(function(){
var form=new Ext.form.TextField({
name:'text',
fieldLabel:'文本框',
regex: /^[\u4E00-\u9FA5]+$/,
regexText:'只能输入汉字'
});
form.render("div1");
});

黎夕 2010-03-18 13:56 发表评论

[引]ExtJS-配置和表格控件使用

黎夕 — Thu, 18 Mar 2010 05:48:00 GMT

摘要: ExtJS时一套AJAX控件,本人认为它是目前我见过最好最美的JS控件库，所以非常有学习和使用价值，如果你还没有接触过ExtJS或者压根对其不感兴趣，那么没有必要看下去了,ExtJS是一套完整的RIA解决方案，也因为功能完整造成了ext-all.js有400多k,由于是基于JS和 CSS的功能实现，对客户端机器性能也有一定的要求，即不支持IE6以下的版本。如果您的项目对网页响应时间有严格的限制，或... 阅读全文

黎夕 2010-03-18 13:48 发表评论

[引用]ExtJs-拖放以及弹出窗口

黎夕 — Thu, 18 Mar 2010 05:29:00 GMT

本章主要简单介绍下拖放以及弹出窗口的简单应用。

一、拖放

拖放在EXT的组件体系中占有很重要的地位，很多组件内部都封装了对拖放功能的实现，本节主要讨论拖放的组件结构和范例，重点是单独使用 Ext.dd包实现拖放功能，而不是与其他的组件相结合。

1.1 使用范围

(1) 可以拖放表格里的行，让他们按照指定的方式排列

(2) 可以拖放树里的节点，把节点从一个枝干拖向另外一个枝干

(3) 在表格和树之间也可以进行拖放

(4) 布局的split也是一种拖放

(5) resize也算是拖放，改变大小。

1.2 简单应用

对于B/S系统而言，拖放一直是一项很少用到的功能，我们一直认为实现拖放功能很复杂，其实在EXT中只要很少的代码即可实现，如下面代码所示：

view plain copy to clipboard print ?

Ext.onReady(function(){
new Ext.dd.DDProxy('block');
});

Ext.onReady(function(){ new Ext.dd.DDProxy('block'); });

对应的HTML部分的代码如下：

view plain copy to clipboard print ?

"block" style="background:red;" mce_style="background:red;">

1.3 另外一个实例

我们先查看一下详细的代码：

view plain copy to clipboard print ?

"http://www.w3.org/1999/xhtml" >
"Head1" runat="server">
拖放效果
"stylesheet" type="text/css" href="../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
"text/javascript" src="../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js">
"text/javascript" src="../ext-all.js" mce_src="ext-all.js">
"text/javascript">
"proxy">item

"target">

(1) 首先是定义拖放的部分，具体代码为：

view plain copy to clipboard print ?

var proxy=new Ext.dd.DragSource('proxy',{group:'dd'});

var proxy=new Ext.dd.DragSource('proxy',{group:'dd'});

(2) target告诉我们可以把上面的proxy防盗哪些地方，如下面的代码：

view plain copy to clipboard print ?

var target=new Ext.dd.DDTarget('target','dd');

var target=new Ext.dd.DDTarget('target','dd');

(3) 注意：两者之间有相同的'dd'，这是分组标志，用来限制拖放的目的地，只有相同的组名的目的地才可以接收它。

(4) 不过，这仅仅只能实现拖放功能，没有任何效果，下面的代码可以实现，将proxy拖放到指定的区域，并且停留在该区域，如下面所示：

view plain copy to clipboard print ?

proxy.afterDragDrop=function(target,e,id){
var destEl=Ext.get(id);
var srcEl=Ext.get(proxy.getEl());
srcEl.insertBefore(destEl);
};

proxy.afterDragDrop=function(target,e,id){ var destEl=Ext.get(id); var srcEl=Ext.get(proxy.getEl()); srcEl.insertBefore(destEl); };

二、弹出窗口

从外观上来讲，浏览器自带的alert、confirm、prompt等对话框并不好看，而且配置也不灵活。诸如按钮的添加、删除、以及修改按下按钮所触发的事件等操作都非常难以执行，而在EXT的msgbox里都能实现，而且外观相当漂亮，本节将详细介绍EXT中的弹出窗口。

2.1 Ext.MessageBox的使用方法

Ext.MessageBox为我们提供了弹出提示框的简单方法，使用它提供的alert、confirm、prompt等对话框完全可以代替浏览器原生的alert、confirm、prompt邓对话框，除此之外，Ext.MessageBox还提供了诸如进度条等更多的功能。

1、Ext.MessageBox.alert()的使用方法和效果图(图1所示)

view plain copy to clipboard print ?

Ext.MessageBox.alert('标题','内容',function(btn){
alert('你刚刚点击了'+btn);
});

Ext.MessageBox.alert('标题','内容',function(btn){ alert('你刚刚点击了'+btn); });

图1 alert效果图

2、Ext.MessageBox.confirm()的使用方法和效果图(如图2所示)

view plain copy to clipboard print ?

Ext.MessageBox.confirm('选择框','你到底选择Yes 还是No?',function(btn){
alert('您刚刚选择了'+btn);
});

Ext.MessageBox.confirm(' 选择框','你到底选择Yes还是No?',function(btn){ alert('您刚刚选择了'+btn); });

图2 confirm效果图

3、Ext.MessageBox.prompt()的使用方法和效果图(如图3所示)

view plain copy to clipboard print ?

Ext.MessageBox.prompt('输入框','随便输入一些东西 ',function(btn,text){
alert('你刚刚点击了'+btn+", 刚刚输入了"+text);
});

Ext.MessageBox.prompt('输入框','随便输入一些东西',function(btn,text){ alert('你刚刚点击了'+btn+", 刚刚输入了"+text); });

图3 prompt效果图

2.2 对话框的更多配置

1、可以输入多行的输入框

首先，我们修改原来的prompt函数，将原来只能接收单行字符串数据的文本框修改成可以支持多行文字的形式，相关代码以及效果图如下所示。

view plain copy to clipboard print ?

Ext.MessageBox.show({
title:'多行输入框',
msg:'可以输入多行:',
width:300,
buttons:Ext.MessageBox.OKCANCEL,
multiline:true,
fn:function(btn,text){
alert('你刚刚点击了 ',btn+",刚刚输入了 "+text);
}
});

Ext.MessageBox.show({ title:'多行输入框', msg:'可以输入多行:', width:300, buttons:Ext.MessageBox.OKCANCEL, multiline:true, fn:function(btn,text){ alert('你刚刚点击了 ',btn+",刚刚输入了 "+text); } });

图4 多行输入效果图

2、自定义对话框的按钮

我们可以使用Ext.Message.show()设置对话框中按钮的样式，如下面的代码所示。

view plain copy to clipboard print ?

Ext.MessageBox.show({
title:'自定义对话框的按钮',
msg:'从三个按钮中选择一个',
buttons:Ext.MessageBox.YESNOCANCEL,
fn:function(btn){
alert('您刚刚点击了 '+btn);
}
});

Ext.MessageBox.show({ title:'自定义对话框的按钮', msg:'从三个按钮中选择一个', buttons:Ext.MessageBox.YESNOCANCEL, fn:function(btn){ alert('您刚刚点击了 '+btn); } });

图5 自定义按钮

3、进度条

进度条经常用于需要用户等待某一操作完成的场景，当执行一些十分耗时的操作时，我们需要用它来提示用户耐心等待，Ext.MessageBox为我们提供了默认的进度条，只要将progress参数设置为true，对话框中就会出现进度条，如下面的代码所示：

view plain copy to clipboard print ?

Ext.MessageBox.show({
title:'请等待',
msg:'读取数据中……',
width:240,
progress:true,
closable:false
});

Ext.MessageBox.show({ title:'请等待', msg:'读取数据中……', width:240, progress:true, closable:false });

图6 普通进度条

上面我们虽然已经得到了进度条，但是它的进度状态不会发生变化，我们需要调用Ext.MessageBox.updateProgree()函数让进度条状态发生变化，通常，我们会使用closable:false来隐藏对话框右上角的关闭按钮，从而禁止用户关掉进度条。

现在，我们为上面添加更新进度条的功能，我们使用timeout定时器对进度条进行修改，进度条的状态会随着时间而变化，10秒后整个进度条对话框将隐藏。关键代码如下：

view plain copy to clipboard print ?

Ext.MessageBox.show({
title:'请等待',
msg:'读取数据中……',
width:240,
progress:true,
closable:false
});
var f=function(v){
return function(){
if(v==11){
Ext.MessageBox.hide();
}else{
Ext.MessageBox.updateProgress(v/10,'正在读取第 '+v+' 个，一共10个。');
}
};
};
for(var i=1;i<12;i++)
{
setTimeout(f(i),i*1000);
}

Ext.MessageBox.show({ title:'请等待', msg:'读取数据中……', width:240, progress:true, closable:false }); var f=function(v){ return function(){ if(v==11){ Ext.MessageBox.hide(); }else{ Ext.MessageBox.updateProgress(v/10,'正在读取第 '+v+' 个，一共10个。'); } }; }; for(var i=1;i<12;i++) { setTimeout(f(i),i*1000); }

图7 带有更新功能的进度条

除了这种可以精确控制进度的进度条，我们还可以使用一种自动变化的进度条提示框，这时只要使用Ext.MessageBox.wait()即可，这时弹出的对话框中的进度条就会自动向前推进了，不过我们无法对进度条的值进行精确控制。

view plain copy to clipboard print ?

Ext.MessageBox.show({
title:'请等待',
msg:'读取数据中……',
width:240,
progress:true,
closable:false
});
Ext.MessageBox.wait();

Ext.MessageBox.show({ title:'请等待', msg:'读取数据中……', width:240, progress:true, closable:false }); Ext.MessageBox.wait();

4、动画效果

我们可以为对话框设置弹出和关闭的动画效果，使用animEl参数指定一个HTML元素，对话框就会依据制定的HTML元素播放弹出和关闭的动画。我们修改前面的代码，加入animEl参数实现动画效果,如下面的代码所示：

view plain copy to clipboard print ?

Ext.MessageBox.show({
title:'自定义对话框的按钮',
msg:'从三个按钮中选择一个',
buttons:Ext.MessageBox.YESNOCANCEL,
fn:function(btn){
alert('您刚刚点击了 '+btn);
},
animEl:'dialog'
});

Ext.MessageBox.show({ title:'自定义对话框的按钮', msg:'从三个按钮中选择一个', buttons:Ext.MessageBox.YESNOCANCEL, fn:function(btn){ alert('您刚刚点击了 '+btn); }, animEl:'dialog' });

animEl参数的值是一个字符串，它与HTML中的一个元素的id相对应，例如

。依据这个元素的id，我们创建的对话框才知道根据哪个元素播放弹出和关闭的动画。

除了Ext.MessageBox的基本应用，实际使用时还需要注意一下几点：

(1) 为了简化调用，我们可以把Ext.MessageBox直接写成Ext.Msg

(2) 我们使用Ext.MessageBox弹出的对话框都是基于同一个内部Ext.Window实例的，因此我们不能使用Ext.MessageBox弹出多个对话框，这样操作的结果是页面只会显示最后一个窗口

黎夕 2010-03-18 13:29 发表评论

jQuery Validation范例

黎夕 — Mon, 18 Jan 2010 02:34:00 GMT

摘要: 验证操作类formValidatorClass.js Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> 1/**//** 2 * @autho... 阅读全文

黎夕 2010-01-18 10:34 发表评论

window.print打印指定div

黎夕 — Wed, 11 Nov 2009 07:55:00 GMT

window.print可以打印网页，但有时候我们只希望打印特定控件或内容，怎么办呢？

首先我们可以把要打印的内容放在div中，然后用下面的代码进行打印。

<html>
<head>
<script language="javascript">
function printdiv(printpage)
{
var headstr = "<html><head><title>title>head><body>";
var footstr = "body>";
var newstr = document.all.item(printpage).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr+footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}
script>
<title>div printtitle>
head>

<body>
//HTML Page
//Other content you wouldn't like to print
<input name="b_print" type="button" class="ipt" onClick="printdiv('div_print');" value=" Print ">

<div id="div_print">

<h1 style="Color:Red">The Div content which you want to printh1>

div>
//Other content you wouldn't like to print
//Other content you wouldn't like to print
body>

html>

黎夕 2009-11-11 15:55 发表评论

【引】javascript 作用域

黎夕 — Tue, 04 Aug 2009 09:35:00 GMT

1. javascript无块级作用域，变量在函数内部可见。

function func_scope(){
var x=1;
if (true) {
var x=2;
if (true) {
var x=3;
alert(x);
}
alert(x);
}
alert(x);
}
func_scope();

这个地方具体是一个x变量，还是3个真不清楚？其实也没人有毛病这样定义变量

输出：
3
3
3
2. 对象初始化可以对自身的属性执行修改，可以修改全局变量的值。

function foo(){
foo.abc = function(){alert('def')};
this.abc = function(){alert('xyz')};
abc = function(){alert('@@@@@')};
var abc = function(){alert('$$$$$$')};
}
foo.prototype.abc = function(){alert('456');}
foo.abc = function(){alert('123');}
var f = new foo();
f.abc();
foo.abc();
abc();

输出：
xyz
def
错误： abc is not defined （相应解释在第3个例子中）
3. 函数内，只要变量名前面出现var则该变量为局部变量。

var myVar = "GLOBAL";
function foo() {
// myVar已经在下面声明，但是在此之前却没有定义
alert("myVar evaluates to '"+myVar+"'");
// 这个myVar其实是局部变量
myVar = "NEW_GLOBAL_VALUE";
alert("myVar evaluates to '"+myVar+"'");
// window.myVar指向全局的myVar
alert("myVar evaluates to '"+window.myVar+"'");
// 声明一个局部变量myVar，去掉这个则输出结果就完全不同
var myVar = "LOCAL";
alert("myVar evaluates to '"+myVar+"'");
}
foo();
alert("myVar evaluates to '"+myVar+"'");

输出：
myVar evaluates to ‘undefined’
myVar evaluates to ‘NEW_GLOBAL_VALUE’
myVar evaluates to ‘GLOBAL’
myVar evaluates to ‘LOCAL’
myVar evaluates to ‘GLOBAL’

对应第2个例子，foo中的abc（abc = function(){alert(’@@@@@’)};）为局部变量，全局变量中没有定义过abc所以会报undefine的错误。

结论：
* 1.只要在函数内部声明变量使用了var，不管是if(false){var aa}, 他都是局部变量；反之，是全局变量；
* 2.声明所有的变量都应该加上var，防止产生歧义；
* 3.尽量避免引入全局变量。

黎夕 2009-08-04 17:35 发表评论

[转]解剖JavaScript中的null和undefined

黎夕 — Thu, 16 Apr 2009 03:00:00 GMT

http://www.cnblogs.com/leadzen/archive/2009/02/18/1387750.html

在JavaScript开发中，被人问到：null与undefined到底有啥区别？

一时间不好回答，特别是undefined，因为这涉及到undefined的实现原理。于是，细想之后，写下本文，请各位大侠拍砖。

总所周知：null == undefined

但是：null !== undefined

那么这两者到底有啥区别呢？

请听俺娓娓道来...

null

这是一个对象，但是为空。因为是对象，所以 typeof null 返回 'object' 。

null 是 JavaScript 保留关键字。

null 参与数值运算时其值会自动转换为 0 ，因此，下列表达式计算后会得到正确的数值：

　　　　表达式：123 + null　　　　结果值：123

　　　　表达式：123 * null　　　　结果值：0

undefined

　　undefined是全局对象（window）的一个特殊属性，其值是未定义的。但 typeof undefined 返回 'undefined' 。

虽然undefined是有特殊含义的，但它确实是一个属性，而且是全局对象（window）的属性。请看下面的代码：

    alert('undefined' in window);   //输出：true

     var anObj = {};
     alert('undefined' in anObj);    //输出：false

从中可以看出，undefined是window对象的一个属性，但却不是anObj对象的一个属性。

　　注意：尽管undefined是有特殊含义的属性，但却不是JavaScript的保留关键字。

　　undefined参与任何数值计算时，其结果一定是NaN。

　　随便说一下，NaN是全局对象（window）的另一个特殊属性，Infinity也是。这些特殊属性都不是JavaScript的保留关键字！

提高undefined性能

　　当我们在程序中使用undefined值时，实际上使用的是window对象的undefined属性。

　　同样，当我们定义一个变量但未赋予其初始值，例如：

　　　　var aValue;

　　这时，JavaScript在所谓的预编译时会将其初始值设置为对window.undefined属性的引用，

　　于是，当我们将一个变量或值与undefined比较时，实际上是与window对象的undefined属性比较。这个比较过程中，JavaScript会搜索window对象名叫‘undefined'的属性，然后再比较两个操作数的引用指针是否相同。

　　由于window对象的属性值是非常多的，在每一次与undefined的比较中，搜索window对象的undefined属性都会花费时间。在需要频繁与undefined进行比较的函数中，这可能会是一个性能问题点。因此，在这种情况下，我们可以自行定义一个局部的undefined变量，来加快对undefined的比较速度。例如：

    function anyFunc()
    {
        var undefined;          //自定义局部undefined变量

        if(x == undefined)      //作用域上的引用比较


        while(y != undefined)   //作用域上的引用比较

    };

　　其中，定义undefined局部变量时，其初始值会是对window.undefined属性值的引用。新定义的局部undefined变量存在与该函数的作用域上。在随后的比较操作中，JavaScript代码的书写方式没有任何的改变，但比较速度却很快。因为作用域上的变量数量会远远少于window对象的属性，搜索变量的速度会极大提高。

　　这就是许多前端JS框架为什么常常要自己定义一个局部undefined变量的原因！

原著：李战(leadzen).杭州-阿里软件 2009-2-18
原址：http://blog.csdn.net/leadzen/archive/2009/02/17/3899392.aspx

黎夕 2009-04-16 11:00 发表评论

[转]悟透JavaScript

黎夕 — Wed, 15 Apr 2009 17:19:00 GMT

摘要: 悟透JavaScript [size=small]关于javascript入门文章，说的比较透彻：原文地址： http://www.cnblogs.com/leadzen/archive/2008/02/25/1073404.html 引子编程世界里只存在两种基本元素，一个是数据，一个是代码... 阅读全文

黎夕 2009-04-16 01:19 发表评论

无刷新文件上传系统

黎夕 — Mon, 13 Apr 2009 09:44:00 GMT

仿163网盘无刷新文件上传系统

上传文件

添加文件：

文件路径

温馨提示：最多可同时上传个文件，只允许上传文件。

黎夕 2009-04-13 17:44 发表评论

Ajax技术

黎夕 — Mon, 02 Feb 2009 10:31:00 GMT

引语

　　毫无疑问，Ajax作为当前最火爆的技术之一，其优秀的框架层出不穷。Prototype、Dwr、Dojo、JQuery、YUi…… 都是非常出色的产品。本专题为您介绍了目前十大流行的Ajax框架及各自特性，供您在开发过程中参阅。
　　您当前正在使用的Ajax框架是什么？哪一个又是您心目中最优秀的呢？欢迎您发表评论，与他人分享您的观点。[发表评论]　

十大Ajax框架(排名不分先后)

No1—Prototype

　　特点：一个非常优雅的JS库，定义了JS的面向对象扩展，DOM操作API，事件等等，之上还有rico/script.aculo.us实现一些JS组件功能和效果(尚不够完善)，以prototype为核心，形成了一个外围的各种各样的JS扩展库，是相当有前途的JS底层框架，突出特点就是非常易学易用，门槛很低，常常是一两行JS代码就可以搞定一个相关的功能。同时它也是RoR集成的AJAX JS库。

Prototype官方站点

No2—Dojo

　　特点：Dojo包括了Javascript本身的语言扩展，以及各个方面的工具类库，和比较完善的UI组件库；Dojo设计的包加载机制(Package System)和模块化(Libraries)的结构，能保持更好的扩展性，提高执行性能，减轻了用户开发的工作量，并保持一定的灵活性(用户可以自己编写扩展)；Dojo官方网站有着丰富的学习资源；专业的开发团队，可以保证更新速度及质量。

Dojo官方站点

No3—Mootools

　　特点：小巧高效，完整下载36k；模块化设计，合理规范，优雅的OOP风格；创新的下载过程，可以跟据自己的需要勾选相应的模块下载，Build Your Own Framework；Effects模块(moo.fx)轻量高效,可以实现优雅、可定制、easing的动画；完整的API文档，丰富的范例。

Mootools官方站点

No4—JQuery

　　特点：短小精悍(19k)，接口设计得精妙(自然语言的风格)，与程序思路配合精密。极大限度地体现了javascript的特性；支持xpath查询，dom1-3，轻松选择需要的元素；css支持；简单的动画实现，支持自定义动画；支持插件开发，现有插件多；完整的api文档以及范例，易学；拥有官方UI程序供使用，效果好。

JQuery官方站点

No5—Dwr

　　特点：把java类转化为javascript类由dwr自动完成，只需简单的配置；应用起来极其简单。开发者不要该服务器代码就可以集成；容易测试。和webwork一样，隐藏的http协议；强扩展性。例如与spring集成，只需修改一点代码；性能。就与jason等简单比较，dwr性能可能是最好的。

Dwr实用技术汇总

No6—Buffalo

　　特点：国人开发的Ajax框架。定义了Web远程调用的传输基础，并且将远程调用对象完整的序列化到了本地，成为可以被JavaScript编程触及的对象。Buffalo中的重要组件-BuffaloBinding，提供了将JavaScript对象绑定到HTML元素的能力。这种绑定将是无侵入的，只需要在HTML元素中加入若干个不影响排版的属性，即可将数据与界面绑定。

Buffalo实用技术汇总

No7—Yui

　　特点：Yahoo发布的AJAX组件库，是一个包含了各个方面，从工具类库到通讯，到UI组件的综合性JS库。YUL的最大优势在于文档非常齐全，而且有Yahoo的支持，缺点是库目前还不全，功能也不强大。

Yui官方站点

No8—Ext

　　特点：Ext来自于对YUI的扩展，扩展後功能和界面都有了很大的提高。初期仅仅是对YUI的对话框扩展，后来逐渐有了自己的特色，深受网友的喜爱。

Ext官方站点

No9—Qooxdoo

　　特点：不通过常规的HTML来构造页面，完全使用JS以类似VB/Delphi风格的编程方式构造Web GUI界面，比较适合内网面向C/S风格的web应用，而不适合面向Internet的界面多变风格的应用。

Qooxdoo实用技术汇总

No10—Spry

　　特点：设计规范，功能全面，文档丰富,面向设计人员而不是开发人员。与其它一些Ajax框架相比，它的服务器端的技术不是很可靠。它依赖于XML，XML可以很容易被Spry组件接受。

Spry实用技术汇总

框架比较

◆ jquery和prototype比较，以及冲突解决

　　初次试用jQuery，到底是prototype好还是jquery好？之前的项目已经使用了prototype，现加入jquery后，立刻罢工，搜了一下，虽然后来解决了，但最后我还是抛弃prototype，开始使用jquery了。

◆Buffalo和Dwr的比较

　　本文简单比较一下Buffalo和DWR，两者的思路基本类似，有很多共性的东西。总的看来，Buffalo能满足基本的需要，但DWR已经在整体系统结构上有了更多优势。框架的生命周期是有限的，如果不能与时俱进，将迟早面临被淘汰的局面。

更多信息>>>

黎夕 2009-02-02 18:31 发表评论

prototype.js　1.4版开发者手册

黎夕 — Mon, 05 Jan 2009 04:20:00 GMT

摘要: 【引用】http://www.cnblogs.com/thinhunan/archive/2006/04/01/DeveloperNotesForPrototype.html prototype.js是一个非常优雅的javascript基础类库，对javascript做了大量的扩展，而且很好的支持Ajax，国外有多个基于此类库实现的效果库，也做得很棒。 pr... 阅读全文

黎夕 2009-01-05 12:20 发表评论

一个特牛的日期时间判断正则表达式

黎夕 — Wed, 24 Dec 2008 08:23:00 GMT

这里是判断yyyy-mm-dd这种格式的，基本上把闰年和2月等的情况都考虑进去了，不过我已经忘了在哪里找到的。

^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))$

下面的是加了时间验证的

^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-)) (20|21|22|23|[0-1]?\d):[0-5]?\d:[0-5]?\d$

黎夕 2008-12-24 16:23 发表评论

关于checkbox

黎夕 — Mon, 08 Dec 2008 01:12:00 GMT

js里没有两维数组,但Array对象是个Object,里面可以放任何东西,
js里的两维数组是,Array套Array

你可以选择用两个数组来做

1 a

1 b

1 c

1 d

1 e

1 f

var familyMembers = document.getElementsByName("chkBox");

   for(var i=0; i     for(var j=0; j      if(familyMemberArray[i] == familyMembers[j].value) {
      familyMembers[j].checked = true;
      break;
     }
    }
   }

黎夕 2008-12-08 09:12 发表评论

AJAX原理和XmlHttpRequest对象

黎夕 — Tue, 04 Nov 2008 03:56:00 GMT

ajax原理和XmlHttpRequest对象

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。

XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

所以我们先从XMLHttpRequest讲起，来看看它的工作原理。

首先，我们先来看看XMLHttpRequest这个对象的属性。

0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）

1 (初始化) 对象已建立，尚未调用send方法

2 (发送数据) send方法已调用，但是当前的状态及http头未知

3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，

4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

但是，由于各浏览器之间存在差异，所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。下面是一个比较标准的创建XMLHttpRequest对象的方法。

function CreateXmlHttp()

{

if(window.XmlHttpRequest) //非IE浏览器创建XmlHttpRequest对象

{

xmlhttp=new XmlHttpRequest();

}

if(window.ActiveXObject) //IE浏览器创建XmlHttpRequest对象

{

try

{

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

catch(e)

{

try{

xmlhttp=new ActiveXObject("msxml2.XMLHTTP");

}

catch(ex){}

} } }

function Ustbwuyi()

{

var data=document.getElementById("username").value;

CreateXmlHttp();

if(!xmlhttp)

{

alert("创建xmlhttp对象异常！");

return false;

}

xmlhttp.open("POST",url,false);

xmlhttp.onreadystatechange=function()

{

if(xmlhttp.readyState==4)

{

document.getElementById("user1").innerHTML="数据正在加载...";

if(xmlhttp.status==200)

{

document.write(xmlhttp.responseText);

} } }

xmlhttp.send();

}

如上所示，函数首先检查XMLHttpRequest的整体状态并且保证它已经完成（readyStatus=4），即数据已经发送完毕。然后根据服务器的设定询问请求状态，如果一切已经就绪（status=200），那么就执行下面需要的操作。

对于XmlHttpRequest的两个方法，open和send，其中open方法指定了：

a、向服务器提交数据的类型，即post还是get。

b、请求的url地址和传递的参数。

c、传输方式，false为同步，true为异步。默认为true。如果是异步通信方式(true)，客户机就不等待服务器的响应；如果是同步方式(false)，客户机就要等到服务器返回消息后才去执行其他操作。我们需要根据实际需要来指定同步方式，在某些页面中，可能会发出多个请求，甚至是有组织有计划有队形大规模的高强度的request，而后一个是会覆盖前一个的，这个时候当然要指定同步方式。

Send方法用来发送请求。

知道了XMLHttpRequest的工作流程，我们可以看出，XMLHttpRequest是完全用来向服务器发出一个请求的，它的作用也局限于此，但它的作用是整个ajax实现的关键，因为ajax无非是两个过程，发出请求和响应请求。并且它完全是一种客户端的技术。而XMLHttpRequest正是处理了服务器端和客户端通信的问题所以才会如此的重要。

现在，我们对ajax的原理大概可以有一个了解了。我们可以把服务器端看成一个数据接口，它返回的是一个纯文本流，当然，这个文本流可以是XML格式，可以是Html，可以是Javascript代码，也可以只是一个字符串。这时候，XMLHttpRequest向服务器端请求这个页面，服务器端将文本的结果写入页面，这和普通的web开发流程是一样的，不同的是，客户端在异步获取这个结果后，不是直接显示在页面，而是先由javascript来处理，然后再显示在页面。至于现在流行的很多ajax控件，比如magicajax等，可以返回DataSet等其它数据类型，只是将这个过程封装了的结果，本质上他们并没有什么太大的区别。

黎夕 2008-11-04 11:56 发表评论

奇妙的Scriptaculous

黎夕 — Sat, 30 Dec 2006 06:49:00 GMT

1. 概述

官方主页：http://script.aculo.us/
官方WIKI：http://wiki.script.aculo.us/scriptaculous/show/Usage

Scriptaculous是基于Prototype.js框架的JS效果。

1.1 下载&安装：

Scriptaculous包含了6个.js，scriptaculous.js是主文件。

把这6个文件放于同一个目录下，引入scriptaculous.js，会默认把其他5个都都引入了(原理见本文最后)

中引入如下：

如果只需要引入其中一部分，可以通过以下方式：

2.Effective

Scriptaculous的Effective效果，显示操作成功与失败的信息
Effective 是 scriptaculous 最主要的功能之一, 可以直接以html 的 element_id为参数调用API, 比如：

也可以通过事件机制

---- 层的开关效果：

"new Effect.SwitchOff(this)">
    Click here if you've seen enough.

---- 帘幕上拉效果

"new Effect.BlindUp(this, {duration: 16})">
    Click here if you want this to go slooooow.

通过 duration（持续事件）,fps（每秒帧数）,delay（岩石）之类的参数，可以实现更多效果。

更多Demo查看scriptaculous wiki上的Demos

Dom Builder

与语法超简洁的Builder相比，W3c的Dom Builder语法简直是噩梦。html片断不复杂时如果用JSTemplate有点大炮打蚊子，用Builder就够了。

Builder很有Ruby的风格，请看下面一句

foo= Builder.node('a', {href:"foo.jsp"},categorys[i].name)

第1个参数是element类型，第2个是可选的attribbute，第3个是节点内的子节点。

如果要换成W3c的Dom函数写法，善哉善哉。

下面这段更明显直接照元素的页面顺序来生成对象，而不是像W3C Dom Builder很逻辑抽象的，先生成对象，然后append到父元素。

div = Builder.node('div',{className:linkDiv},[
             Builder.node('a', {href:"foo.jsp"}, categorys[i].name)
       ]);

当然了，还是没有JS Template清晰，所以Builder只作为html片断非常短时使用。

黎夕 2006-12-30 14:49 发表评论

免费AJAX,Javascript IDE

黎夕 — Tue, 26 Dec 2006 05:20:00 GMT

暴强的免费AJAX,Javascript IDE，还有eclipse插件

www.aptana.com

黎夕 2006-12-26 13:20 发表评论

javascript 赏析

黎夕 — Tue, 12 Dec 2006 02:57:00 GMT

1、一行代码暴出网页源代码
s=document.documentElement.outerHTML;
document.write('');
document.body.innerText=s;

2、

3、
function jump(url){
    var e = document.createElement("a");
    e.href = url;
    document.body.appendChild(e);
    e.click();
}

function flexisum(a) {
var total = 0;
for(var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (!element) continue;  // Ignore null and undefined arguments
// Try to convert the argument to a number n,
// based on its type
var n;
switch(typeof element) {
case "number":
n = element;                  // No conversion needed here
break;
case "object":
if (element instanceof Array) // Recurse for arrays
n = flexisum.apply(this, element);
else n = element.valueOf();   // valueOf method for other objects
break;
case "function":
n = element();                // Try to invoke functions
break;
case "string":
n = parseFloat(element);      // Try to parse strings
break;
case "boolean":
n = NaN;                      // Can't convert boolean values
break;
}
// If we got a valid number, add it to the total.
if (typeof n == "number" && !isNaN(n)) total += n;
// Otherwise report an error
else throw new Error("sum(): can't convert " + element + " to number");
}
return total;
}

黎夕 2006-12-12 10:57 发表评论

疯狂的Lightbox

黎夕 — Wed, 06 Dec 2006 02:48:00 GMT

疯狂的Lightbox

原文：http://particletree.com/features/lightbox-gone-wild/

1.Lightbox简介：

LightBox是一个很棒的模组窗口Javascript包，用它展示信息，要比新开个窗口，或者强制弹出一个页面都来的要好.

SpringSide2中在书店前台用户登录里引入了LightBox。

2.LightBox使用

2.1 所需文件

springside将lightbox文件都放在了widgets/lightbox目录里，要注意的是，必须要有激发LightBox效果的语句，才好引用lightbox.js，否则会js出错。



"${ctx}/widgets/lightbox/lightbox.css" type="text/css" rel="stylesheet">

2.2 激发LightBox效果

仅仅通过 class="lbOn"即可完成这个效果，会用lightbox打开login.jsp

"login.jsp"  class="lbOn">SignUp

2.3 退出LightBox效果

也是仅仅使用class="lbAction" rel="deactivate"

"#" class="lbAction" rel="deactivate">Cancel

2.4 在LightBox内部连接至另外一个页面：

直接使用a href连接过去即可，class仍然使用 class="lbAction" ,rel="insert";

"confirm.html" class="lbAction" rel="insert">Go to Another Lightbox

2.5 遮盖效果配置

修改lightbox.css

#overlay {
 display: none;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 5000;
 background-color: #000;
 -moz-opacity: 0.5;
 opacity: .50;
 filter: alpha( opacity = 50 );
}

3. LightBox工作原理：

当用户点击了class="lbOn"样式的a href连接，一个透明层会覆盖页面顶层，并且在第一次载入的调入下面这些：

"overlay">
"lightbox">
    "lbLoadMessage">
        Loading

如果想改变载入事的消息，只需要修改

html中的bug探询

黎夕 — Mon, 09 Oct 2006 02:11:00 GMT

1.form 中的嵌套
问题:不认识第一个form,抛出缺少对象。

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

无标题文档

黎夕 2006-10-09 10:11 发表评论

关于模式窗口showModalDialog的用法

黎夕 — Fri, 15 Sep 2006 02:35:00 GMT

模式窗口showModalDialog的用法总结

1。打开窗口：

Code:

var handle = window.showModalDialog(url, objects, feathers);

其中：objects可以为参数（包括数组），也可以是对象。
通常的用法 objects = {window} ，把父窗体的对象共享给子窗体。

2。关闭子窗口：

Code:

window.close();

3。从子窗体传参数给父窗体：

Code:

window.returnVal = string;

3。清除缓存，防止模式窗口页面不更新的情况：

Code:

HTML

ASP
<%
Response.Expires = -1
Response.ExpiresAbsolute = Now() - 1
Response.cachecontrol = "no-cache"
%>
PHP
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
JSP
response.setHeader("Pragma","No-Cache");
response.setHeader("Cache-Control","No-Cache");
response.setDateHeader("Expires", 0);

4。防止打开新窗口（如提交表单）：

Code:

5。在模式窗口使用F5刷新页面：

Code:

reload...

其中：filename为窗口页面。

6。防止模式窗口打开的页面出现cookie丢失的情况：
模式窗口打开新窗口时，仅可以使用 showModalDialog(url,window,feathers); 方法，且 objects 为 window 。

7。在弹出窗口中获得或设置主窗口的任何值：
打开弹出窗口时用：showModalDialog(url, window, feathers)
在弹出窗口中使用 window.dialogArguments 对象（即主窗口传递过来的 window 对象集），即可以获得或者设置主窗口的值。

黎夕 2006-09-15 10:35 发表评论

关于radio操作

黎夕 — Fri, 18 Aug 2006 08:07:00 GMT

假设你的radio名称为 radioitem

function checkRadio(){
var arr = document.all("radioitem") ;

if(arr){
if (arr.length){//有多个单选
for(var i =0;i if(arr[i].checked){
//你的操作
break;
}
}
}
else{//只有1个
if (arr.checked){
//你的操作
}
}

}
else{
//没有单选框
}

}

黎夕 2006-08-18 16:07 发表评论

关于event处理

黎夕 — Thu, 17 Aug 2006 06:06:00 GMT

"http://www.w3.org/TR/html4/loose.dtd">

无标题文档

NAME	PASSWORD	LOCATION
JING	11111	SHHAI
LI	22222	BEIJING
WU	33333	HAINANG

黎夕 2006-08-17 14:06 发表评论

javascripts 一些总结

黎夕 — Thu, 17 Aug 2006 06:03:00 GMT

1.
try {
      .....

    } catch (e) {
      e.description;
    }

2.object
a.common:
        getElementById(),getElementsByTagName,getElements,getElementsByClassName

        innerHTML, innerTEXT, type,tagName

        typeof (typeof element == 'object')
        if ((typeof o == "object") && (o.constructor == Date))


b.event:
     srcElement (window.event.srcElement.parentElement)
     keyCode

3.
parseInt()

4.
arguments

5.getElementsByTagName
bod = document.getElementsByTagName('body')[0];

黎夕 2006-08-17 14:03 发表评论

BlogJava-把永恒在一刹那间收藏-文章分类-javascript

[转]jQuery对象与dom对象相互转换

常用的js验证数字，电话号码，传真，邮箱，手机号码，邮编，日期

[引用]apply/call/caller/callee/bi

【引用】 ExtJS--数据存储与传输

一、Ext.data.Connection

二、Ext.data.Record

三、Ext.data.Store

四、小结

【引用】ExtJS的--工具栏和菜单

一、简单菜单

二、向菜单中添加分隔线

三、多级菜单

四、高级菜单

五、小结

【引用】 ExtJS--布局

一、传统的布局方式

薛敬明专栏

二、最常用的边框布局BorderLayout

2.1 设置子区域的大小

2.2 使用split并限制它的范围

薛敬明专栏

2.3 子区域的展开和折叠

薛敬明专栏

三、制作伸缩菜单的布局——Accordion

【引用】 ExtJS的--树形结构

一、创建一棵树

二、FormPanel和BasicForm详解

三、EXT支持的控件

3.1 文本输入控件Ext.form.TextField

3.2 多行文本输入控件Ext.form.TextArea

3.3 日期输入控件Ext.form.DateField

3.4 时间输入控件Ext.form.TimeField

3.5 在线编辑器Ext.form.HtmlEditor

3.6 隐藏域Ext.form.Hidden

3.7 下拉输入框Ext.form.TriggerField

四、数据校验

4.1 输入不能为空

4.2 最大长度和最小长度

4.3 借助vtype

4.4 自定义校验规则

[引]ExtJS-配置和表格控件使用

[引用]ExtJs-拖放以及弹出窗口

一、拖放

1.1 使用范围

1.2 简单应用

1.3 另外一个实例

二、弹出窗口

2.1 Ext.MessageBox的使用方法

2.2 对话框的更多配置

jQuery Validation范例

window.print打印指定div

【引】javascript 作用域

[转]解剖JavaScript中的null和undefined

[转]悟透JavaScript

无刷新文件上传系统

Ajax技术

prototype.js 1.4版开发者手册

一个特牛的日期时间判断正则表达式

关于checkbox

AJAX原理和XmlHttpRequest对象

奇妙的Scriptaculous

1. 概述

1.1 下载&安装：

2.Effective

Dom Builder

免费AJAX,Javascript IDE

javascript 赏析

疯狂的Lightbox

疯狂的Lightbox

1.Lightbox简介：

2.LightBox使用

2.1 所需文件

2.2 激发LightBox效果

2.3 退出LightBox效果

2.4 在LightBox内部连接至另外一个页面：

2.5 遮盖效果配置

3. LightBox工作原理：

4. Lightbox Class介绍

html中的bug探询

prototype.js　1.4版开发者手册