BlogJava-

︻┳═一Java

-文章分类-JavaScript

ajax jsp 无刷新上传文件

Eric.Zhou — Wed, 19 Mar 2008 02:23:00 GMT

首先要说的就是 ajax 是无法实现上传文件的，可以想一下ajax与后台通信都是通过传递字符串，怎么能传递文件呢？其实出于安全考虑js是不能操作文件的，所以就不要再说用ajax来实现文件的上传了，这是不可能的。
    而本文实现的文件上传也是无页面刷新的，可以说是一种"类似AJAX"方法。
    开始之前先说两句无关的，其实在ajax出现之前，web应用也可以是无刷新的，那时大多通过IFrame来做到这一点。当然Ajax出现之后，人们一窝蜂地投奔Ajax 的阵营了，iFrame 就乏人问津了。但是用iFrame来实现无刷新上传文件确实一个很好的选择。ps：Ajax技术基本上可以说是由google公司带起来的，但少Gmail中上传文件用的还是 IFrame，所以说使用IFrame来上传文件是最好的选择。
    我在这里这里用的技术是jsp，其实asp，php等也是一样可以这么实现的
    一共两个文件就可实现：index.html 和 upload.jsp
--index.html

＜html＞
＜body＞
＜form action="upload.jsp" id="form1" name="form1" encType="multipart/form-data" method="post" target="hidden_frame" ＞
＜input type="file" id="file" name="file" style="width:450"＞
＜INPUT type="submit" value="上传文件"＞＜span id="msg"＞＜/span＞
＜br＞
＜font color="red"＞支持JPG,JPEG,GIF,BMP,SWF,RMVB,RM,AVI文件的上传＜/font＞
＜iframe name='hidden_frame' id="hidden_frame" style='display:none'＞＜/iframe＞
＜/form＞
＜/body＞
＜/html＞
＜script type="text/javascript"＞
function callback(msg)
{
document.getElementById("file").outerHTML = document.getElementById("file").outerHTML;
document.getElementById("msg").innerHTML = "＜font color=red＞"+msg+"＜/font＞";
}
＜/script＞

index.html 中主要要做的就是写一个 form 和 iframe ，并把 form 的 target 设为 iframe 的名字，注意要把 iframe 设为不可见，其他的都是正常的文件上传的写法，这样刷新的页面就是这个隐藏的 Iframe ，而在 index.html 中是不会有页面刷新的，js的 callback 方法是回调方法。用于清空文件上传框和显示后台信息，注意清空文件上传框的方法，和普通方法有点不一样。

--upload.jsp

＜%@ page language="Java" contentType="text/html; charset=gb2312" %＞
＜%@ page import="com.jspsmart.upload.SmartUpload"%＞
＜%
//新建一个SmartUpload对象
SmartUpload su = new SmartUpload();
//上传初始化
su.initialize(pageContext);
// 设定上传限制
//1.限制每个上传文件的最大长度。
su.setMaxFileSize(10000000);
//2.限制总上传数据的长度。
su.setTotalMaxFileSize(20000000);
//3.设定允许上传的文件（通过扩展名限制）,仅允许doc,txt文件。
su.setAllowedFilesList("doc,txt,jpg,rar,mid,waw,mp3,gif");
boolean sign = true;
//4.设定禁止上传的文件（通过扩展名限制）,禁止上传带有exe,bat,jsp,htm,html扩展名的文件和没有扩展名的文件。
try {
su.setDeniedFilesList("exe,bat,jsp,htm,html");
//上传文件
su.upload();
//将上传文件保存到指定目录
su.save("c:\\");
} catch (Exception e) {
e.printStackTrace();
sign = false;
}
if(sign==true)
{
out.println("＜script＞parent.callback('upload file success')＜/script＞");
}else
{
out.println("＜script＞parent.callback('upload file error')＜/script＞");
}
%＞

upload.jsp 中只要注意最后输出的格式就可以了。其实原理就是输出一段js代码到 iframe 中，然后在iframe中来控制它的父页面。

OK，至此一个无刷新的页面上传组件就做好了，不要忘了在 WEB-INF/lib 下加上必须的 jspSmartUpload.jar 包。
需要说明的是使用Iframe来上传，状态栏还是会有刷新的，因为iframe 中的页面刷新了嘛，但是外部页面，就是你所看到的页面是没有刷新的，所以也可以说是类似Ajax上传。

Eric.Zhou 2008-03-19 10:23 发表评论

Ajax.Updater

Eric.Zhou — Tue, 18 Mar 2008 09:49:00 GMT

Syntax `new Ajax.Updater(container, url, options); // make a HTTP request to the specified URL and update the 'container' element.`

Note: to only update a div on success, you may optionally substitute a property list for a simply element id (ie {success:’div_name’} instead of ‘div_name’)

Options

Option	Default value	Description
asynchronous	true	Type of request
evalScripts	false	When set as “true”, scripts in requested url are evaluated
method	‘post’	Lets you decide whether to use Get or Post for the request to the server
contentType	‘application/x-www-form-urlencoded’	Allows you to set the content-type sent to the server
encoding	‘UTF-8’	Allows you to determine the encoding type information given to the server
parameters	’’	Allows you to attach parameters to your AJAX request. Most common: parameters:Form.serialize(this)
postBody	’’	Specify data to post. Something like: postBody:’thisvar=true&thatvar=Howdy’ How does this differ from parameters?
username	’’
password	’’
requestHeaders	’’	Allows you to override the headers, see the Prototype AJAX options for details
onComplete	’’	Function to call on completion of request
onSuccess	’’	Function to call on successful completion of request
onFailure	’’	Function to call on failed request
onException	’’	Function to call on failed request (e.g. attempted cross-site request)
on + Status Code	’’	on404 etc. raise an event when given status code is encountered.
insertion	None	Instead of inserting the response in the existing content (possibly overwriting it) you can pass a valid Insertion object, such as Insertion.Top, Insertion.Bottom, Insertion.Before or Insertion.After.

Hint: If you have set evalScripts:true the script you call (the url parameter) must return a header of ‘Content-Type: text/javascript’ else the browser will not execute it.

Eric.Zhou 2008-03-18 17:49 发表评论

在Struts 2中使用JSON Ajax支持

Eric.Zhou — Wed, 20 Feb 2008 09:02:00 GMT

JSON插件提供了一种名为json的ResultType，一旦为某个Action指定了一个类型为json的Result，则该Result无需映射到任何视图资源。因为JSON插件会负责将Action里的状态信息序列化成JSON格式的数据，并将该数据返回给客户端页面的JavaScript。

　　简单地说，JSON插件允许我们在JavaScript中异步调用Action，而且Action不再需要使用视图资源来显示该Action里的状态信息，而是由JSON插件负责将Action里的状态信息返回给调用页面——通过这种方式，就可以完成Ajax交互。

　　Struts2提供了一种可插拔方式来管理插件，安装Struts2的JSON插件与安装普通插件并没有太大的区别，一样只需要将Struts2插件的JAR文件复制到Web应用的WEB-INF/lib路径下即可。

　　安装JSON插件按如下步骤进行：

　　(1)登陆http://code.google.com/p/jsonplugin/downloads/list站点，下载Struts2的JSON插件的最新版本，当前最新版本是0.7，我们可以下载该版本的JSON插件。

　　(2)将下载到的jsonplugin-0.7.jar文件复制到Web应用的WEB-INF路径下，即可完成JSON插件的安装。

　　实现Actio逻辑

　　假设wo,en输入页面中包含了三个表单域，这三个表单域对于三个请求参数，因此应该使用Action来封装这三个请求参数。三个表单域的name分别为field1、field2和field3。

　　处理该请求的Action类代码如下：　　

public class JSONExample
　　{
　　//封装请求参数的三个属性
　　private String field1;
　　private transient String field2;
　　private String field3;
　　//封装处理结果的属性
　　private int[] ints = {10, 20};
　　private Map map = new HashMap();
　　private String customName = "custom";
　　//三个请求参数对应的setter和getter方法
　　public String getField1()
　　{
　　return field1;
　　}
　　public void setField1(String field1)
　　{
　　this.field1 = field1;
　　}
　　//此处省略了field1和field2两个字段的setter和getter方法
　　...
　　//封装处理结果的属性的setter和getter方法
　　public int[] getInts()
　　{
　　return ints;
　　}
　　public void setInts(int[] ints)
　　{
　　this.ints = ints;
　　}
　　public Map getMap()
　　{
　　return map;
　　}
　　public void setMap(Map map)
　　{
　　this.map = map;
　　}
　　//使用注释语法来改变该属性序列化后的属性名
　　@JSON(name="newName")
　　public String getCustomName()
　　{
　　return this.customName;
　　}
　　public String execute()
　　{
　　map.put("name", "yeeku");
　　return Action.SUCCESS;
　　}
　　}

　　在上面代码中，使用了JSON注释，注释时指定了name域，name域指定Action属性被序列化成JSON对象的属性名。除此之外，JSON注释还支持如下几个域：

serialize：设置是否序列化该属性

　　deserialize：设置是否反序列化该属性。

　　format：设置用于格式化输出、解析日期表单域的格式。例如"yyyy-MM-dd'T'HH:mm:ss"。

　　配置该Action与配置普通Action存在小小的区别，应该为该Action配置类型为json的Result。而这个Result无需配置任何视图资源。

　　配置该Action的struts.xml文件代码如下：　

＜?xml version="1.0" encoding="GBK"?＞
＜!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd"＞
＜struts＞
＜constant name="struts.i18n.encoding" value="UTF-8"/＞
＜package name="example" extends="json-default"＞
＜action name="JSONExample" class="lee.JSONExample"＞
＜result type="json"/＞
＜/action＞
＜/package＞
＜/struts＞　　

　　在上面配置文件中有两个值得注意的地方：

　　第一个地方是配置struts.i18n.encoding常量时，不再是使用GBK编码，而是UTF-8编码，这是因为Ajax的POST请求都是以UTF-8的方式进行编码的。

　　第二个地方是配置包时，自己的包继承了json-default包，而不再继承默认的default包，这是因为只有在该包下才有json类型的Result。

Eric.Zhou 2008-02-20 17:02 发表评论

对多列表格多种数据类型进行排序

Eric.Zhou — Thu, 24 Jan 2008 05:08:00 GMT

    Sort.html

    This is my HTML page.

Last Name	First Name	Birthday	Age
Smith	John	7/12/1978	31
Johnson	Betty	10/15/1977	32
Henderson	Nathan	02/22/1982	27
Williams	James	8/19/1980	29
Gilliams	Michael	5/13/1972	39
Walker	Matthew	10/19/1981	28

Eric.Zhou 2008-01-24 13:08 发表评论

对多列表格进行排序

Eric.Zhou — Thu, 24 Jan 2008 04:24:00 GMT

    Sort.html

    This is my HTML page.

Last Name	First Name
Smith	John
Johnson	Betty
Henderson	Nathan
Williams	James
Gilliams	Michael
Walker	Matthew

逆序排列：
上面只对表格进行了排列，如果要实现想Microsoft Outlook那样，第一次点击是排序，如果再点击一次，将会对此列进行逆序排列。
修改以后的代码为：

Eric.Zhou 2008-01-24 12:24 发表评论

对单列表格排序js代码

Eric.Zhou — Thu, 24 Jan 2008 03:49:00 GMT

    Sort.html

    This is my HTML page.

Last Name
Smith
Johnson
Henderson
Williams
Gilliams
Walker

Eric.Zhou 2008-01-24 11:49 发表评论

Form中input和textarea自动选择文本

Eric.Zhou — Thu, 24 Jan 2008 01:58:00 GMT

FormUtil.setTextboxes = function() {
   var colInputs = document.getElementsByTagName("input");
   var colTextAreas = document.getElementsByTagName("textarea");

   for (var i = 0; i < colInputs.length; i++) {
      if (colInputs[i].type == "text" || colInputs[i].type == "password") {
         colInputs[i].onfocus = function() {this.select();};
      }
   }
   for (var i = 0; i < colTextAreas.length; i++) {
     colTextAreas[i].onfocus = function() {this.select();};
   }
}

Eric.Zhou 2008-01-24 09:58 发表评论

自定义鼠标提示代码

Eric.Zhou — Wed, 23 Jan 2008 08:38:00 GMT

Tip

Move your mouser over the red square.

可折叠区域实现代码

Eric.Zhou — Wed, 23 Jan 2008 08:20:00 GMT

Toggle

Click Here

This is some content to show and hide.

Click Here

This is some content to show and hide.

Eric.Zhou 2008-01-23 16:20 发表评论

showModalDialog和showModelessDialog使用

Eric.Zhou — Mon, 21 Jan 2008 08:27:00 GMT

问题描述：有一个列表，点击每个标题弹出新页面进入修改该标题的具体内容。提交以后，子页面关闭，父页面刷新。
经常想起来的是使用window.open弹出一个新窗口，然后好像这个不好处理。所以到网上查了一下，使用了window.showModalDialog方法。

ShowModalDialog函数的功能：
打开一个子窗口，并且可与父窗口相互传递数据，它与window.open的最大区别就在于由ShowModalDialog打开子窗口后，父窗口将不能操作。
使用方法：
vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
参数说明：
sURL
必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
vArguments
可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures
可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。
dialogHeight 对话框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth 默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。
　　 dialogWidth: 对话框宽度。
　　 dialogLeft: 距离桌面左的距离。
　　 dialogTop: 离桌面上的距离。
　　 center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。
　　 help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。
　　 resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改变大小。默认no。
　　 status: {yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。默认为yes[ Modeless]或no [Modal]。
scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。
参数传递方法：
父窗口向子窗口传递参数采用ShowModalDialog的第2个参数即可，父窗口要获取子窗口传回的参数则可通过ShowModalDialog函数的返回值获取。
子窗口获取父窗口参数的方法为采用子窗口window对象dialogArguments属性获取，例如：
var a=window.dialogArguments;
子窗口向父窗口返回参数采用window.returnValue属性，如：
window.returnValue=1;
window.close();

比如实现上面问题，只需要这样：
var url = "page.html";
var retValue = window.showModalDialog(url, "newwindow", "dialogWidth:500px;dialogHeight:200px;help:no;resizable:no;scroll:no;status:no");

if (retValue == "ok")
  {
   document.location.reload(true);
  }

注意这里要在page页面中提交事件里添加
window.returnValue = "ok";
window.close();
这样就可以实现上面的功能了！

一、showModalDialog和showModelessDialog有什么不同？
　　showModalDialog：被打开后就会始终保持输入焦点。除非对话框被关闭，否则用户无法切换到主窗口。类似alert的运行效果。
　　showModelessDialog：被打开后，用户可以随机切换输入焦点。对主窗口没有任何影响。

二、怎样才让在showModalDialog和showModelessDialog的超连接不弹出新窗口？
　　在被打开的网页里加上就可以了。这句话一般是放在和之间的。

三、怎样才刷新showModalDialog和showModelessDialog里的内容？
　　在showModalDialog和showModelessDialog里是不能按F5刷新的，又不能弹出菜单。这个只能依靠javascript了，以下是相关代码：

reload...

　　将filename.htm替换成网页的名字然后将它放到你打开的网页里，按F5就可以刷新了，注意，这个要配合使用，不然你按下F5会弹出新窗口的。

四、如何用javascript关掉showModalDialog(或showModelessDialog)打开的窗口。
　　
　　也要配合，不然会打开一个新的IE窗口，然后再关掉的。

Eric.Zhou 2008-01-21 16:27 发表评论

JS常见的location及URL变量

Eric.Zhou — Fri, 11 Jan 2008 05:29:00 GMT

alert(location);
alert(location.href);
alert(location.search);
alert(location.pathname);

上面四个分别得到下面四个结果

http://www.baidu.com/s/abc/d?ie=gb2312&bs=baseURL&sr=&z=&cl=3&f=8&wd=baseURL+IE+FF&ct=0
http://www.baidu.com/s/abc/d?ie=gb2312&bs=baseURL&sr=&z=&cl=3&f=8&wd=baseURL+IE+FF&ct=0
?ie=gb2312&bs=baseURL&sr=&z=&cl=3&f=8&wd=baseURL+IE+FF&ct=0
/s/abc/d

Eric.Zhou 2008-01-11 13:29 发表评论

JavaFX发现之旅：JavaFX Script With Eclipse 入门（第一部分）

Eric.Zhou — Wed, 09 Jan 2008 05:20:00 GMT

http://blog.eshangrao.com/index.php/2007/05/16/391-javafx-script-javafx-script-with-eclipse

Eric.Zhou 2008-01-09 13:20 发表评论

根据年取生肖

Eric.Zhou — Sat, 29 Dec 2007 04:52:00 GMT

//取生肖, 参数必须是四位的年

function getshengxiao(yyyy){
var arr=['猴','鸡','狗','猪','鼠','牛','虎','兔','龙','蛇','马','羊'];
return arr[yyyy%12];
}

Eric.Zhou 2007-12-29 12:52 发表评论

根据生日的月份和日期，计算星座的js小函数（最简）(转载)

Eric.Zhou — Sat, 29 Dec 2007 04:50:00 GMT

根据生日的月份和日期，计算星座的js小函数（最简）
// 根据生日的月份和日期，计算星座。 http://blog.csdn.net/cuixiping/

function getAstro(month,day){
    var s="魔羯水瓶双鱼牡羊金牛双子巨蟹狮子处女天秤天蝎射手魔羯";
    var arr=[20,19,21,21,21,22,23,23,23,23,22,22];
    return s.substr(month*2-(day<arr[month-1]?2:0),2);
}

Eric.Zhou 2007-12-29 12:50 发表评论

如何在dwr的回调函数中传递多个参数

Eric.Zhou — Fri, 28 Dec 2007 15:42:00 GMT

Eric.Zhou 2007-12-28 23:42 发表评论

snap给文章中的链接加上缩略图(小教程)（转载）

Eric.Zhou — Thu, 20 Dec 2007 02:36:00 GMT

标放到链接上就可以看到缩略图。
效果演示见本站首页

具体使用办法，
到snap网站可以申请到一段类似以下形式的代码：

将代码置于页面代码的前面就可以了。（经测试，为不拖慢速度，放在前也可以，）

下面说说代码的修改：

1、使用默认的代码，鼠标移动到链接上时显示的效果是带搜索框的，但是可以通过修改代码来去掉搜索框，先看效果对比：

修改方法是，将获得代码中的sb=1改成sb=0

2、默认代码效果是页面中的所有链接都有鼠标划过时显示缩略图效果。如果你想对某个特定链接禁用缩略图效果，可以对该链接加上一个分类来标识；
例如链接

xxx

，禁用缩略图的方法是写成

xxx

通常，一个页面里大部分链接我们都不想加入缩略图的，所以上述办法有点烦琐了。
其实可以通过修改代码中的ap=1为ap=0来使页面的所有链接在默认情况下不显示缩略图，这时只有链接写成以下格式的情况下才会有缩略图显示：

XXX

对于上述各种情况，如果链接本身已经有了某个class分类，比如已经分类为class="123",可以用空格来分隔，并赋予多个class分类，比如
class="123 snap_nopreview"或者class="123 snap_preview"

以上为本人的一点小小心得，希望对各位看官有点帮助。
--------------------------------------------------------------------------------------------------------

对于我使用的MT，可以对模版中的评论者网站链接形式加入一个class="snap_preview"来实现对评论者网站界面的初步预览，我觉得是个不错的小工具。
当然其他程序，也可以做相应的修改实现该效果。我就不再多说了。

Eric.Zhou 2007-12-20 10:36 发表评论

【教程】 jquery第一次亲密接触(转载)

Eric.Zhou — Wed, 24 Oct 2007 09:23:00 GMT

jquery是继prototype之后又一个优秀的Javascript框架。对prototype我使用不多，简单了解过。但使用上jquery之后，马上被她的优雅吸引住了。有人使用这样的一比喻来比较prototype和jquery：prototype就像Java，而jquery就像ruby.实际上我比较喜欢java（少接触Ruby罢了）但是jquery的简单的实用的确有相当大的吸引力啊！在项目里我把jquery作为自已唯一的框架类包。使用其间也有一点点心得，其实这些心得，在jquery的文档上面也可能有讲，不过还是记下来，以备忘罢。
一，找到你了！
还记得$()这个东西吧？prototype还是DWR都使用了这个函数代替document.getElementById()。没错，jquery也跟风了。为达到document.getElementById()的目的，jquery是这样写的：

代码
var someElement = $("#myId");

看起来比其他两个框架的要多了一个#，好，看看下面的用法：

代码
$("div p");(1)
$("div.container")(2)
$("div #msg");(3)
$("table a",context);(4)

在prototype里看过这样的写法吗？第一行代码得到所有

标签下的

元素。第二行代码得到class为container的

元素,第三行代码得到

标签下面id为msg的元素。第四行代码得到context为上下文的table里面所有的连接元素。
如果你熟悉CSS，Xpath，你会觉得这些写法很眼熟！对了。正是。看出奥妙了吧。jquery就是通过这样的方式来找到Dom对象里面的元素。跟CSS的选择器相类似。
二，Jquery对象？
jquery提供了很多便利的函数，如each(fn)，但是使用这些函数的前提是：你使用的对象是Jquer对象。使一个Dom对象成为一个Jquery对象很简单，通过下面一些方式（只是一部分）：

代码
var a = $("#cid");(1)
var b = $("

hello

");(2)
var c = document.createElement("table"); var tb = $(c);

三，代替body标签的onload
这个惯例，也许是除了$()之外，用得最多的地方了。下面一段代码：

代码
$(document).ready(function(){
alert("hello");
});(1)

（2）

上面两段代码是等价的。但代码1的好处是做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作，即$(document).ready(fn)可以在一个页面中重复出现，而不会冲突。基本上Jqeury的很多plugin都是利用这个特性，正因为这个特性，多个plugin共同使用起来，在初始化时不会发生冲突。
不管怎么说，这个惯例可以分离javascript与HTML。推荐使用。
四，事件机制
我大量使用的事件可能就是button的onclick了。以前习惯在input 元素上写onclick = "fn()",使用jquery可以使javascript代码与html代码分离，保持HTML的清洁，还可以很轻松地绑定事件，甚至你可以不知道“事件”这个名词。

代码
$(document).ready(function(){
$("#clear").click(function(){
alert("i am about to clear the table");
});
$("form[0]").submit(validate);
});
function validate(){
//do some form validation
}

五，同一函数实现set&get

代码
$("#msg").html();
$("#msg").html("hello");

上面两行代码，调用了同样的函数。但结果却差别很大。
第一行是返回指定元素的HTML值，第二行则是将hello这串字符设置到指定元素中。jquery的函数大部分有这样的特性。
六，ajax
这是一个ajax横行的时代。多少人，了不了解ajax的都跟着用上一把。呵。使用jquery实现ajax同样简单异常

代码
$.get("search.do",{id:1},rend);
function rend(xml){
alert(xml);
} (1)
$.post("search.do",{id:1},rend);
function rend(xml){
alert(xml);
} (2)

$("#msg").ajaxStart(function(){
this.html("正在加载。。。。");
});(3)
$("#msg").ajaxSuccess(function(){
this.html("加载完成！");
});(4)

这些都是较常用的方法，get和post用法一样。第一个参数是异步请求的url，第二个为参数，第三个回调方法。
3，4的方法会在指定的Dom对象上绑定响应ajax执行的事件。当然，jquery的AJAX相关的函数不仅是这些，有兴趣可以去研究再多。
七，渐入淡出

代码
$("#msg").fadeIn("fast");
$("#msg").fadeOut("slow");

没错，上面两行代码已经分别实现了一个id为Msg的jquery对象的渐入和淡出。做一个像Gmail一样的动态加载通知条，用jquery就那么简单。两个函数接受的参数除了快慢等，还可以接收整型，作为渐入或淡出的完成时间，单位为MS。
八，plugin
这也是一个插件的时代。
jquery插件给我的感觉清一色的清洁，简单。如Jtip，要使用它的功能，只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以了。其他事情插件全包。我喜欢jquery的一个重要原因是发现她已经有了很多很好，很精彩的插件。

写得很烂。可能大家看不出jquery的好处。嗯，光听是没用的，试用一下吧。你会发觉很有趣。
暂时告一段落吧。待有新的发现再来分享。

加一些Jquery的资源：
http://www.visualjquery.com/index.xml 很好的API查询站点
http://jquery.com/demo/thickbox/ 知道lightBox吧，看看Jquery是怎样实现相同的东西
http://www.codylindley.com/blogstuff/js/jtip/ Jtip，实用的提示工具
http://jquery.com/plugins/ 很多牛的插件。

http://15daysofjquery.com

Eric.Zhou 2007-10-24 17:23 发表评论

javascirpt几个验证输入类型

Eric.Zhou — Wed, 21 Mar 2007 03:21:00 GMT

//检查是否为任意数（实数）
function isNumeric(strNumber) {
var newPar=/^(- ¦\+)?\d+(\.\d+)?$/
alert(newPar.test(strNumber));}
//检查是否为正数
function isUnsignedNumeric(strNumber) {
var newPar=/^\d+(\.\d+)?$/
alert(newPar.test(strNumber)); }
//检查是否为整数
function isInteger(strInteger) {
var newPar=/^(- ¦\+)?\d+$/
alert(newPar.test(strInteger)); }
//检查是否为正整数
function isUnsignedInteger(strInteger) {
var newPar=/^\d+$/
alert(newPar.test(strInteger));}

"^\\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+)?$"　　//浮点数
"^[A-Za-z]+$"　　//由26个英文字母组成的字符串
"^[A-Z]+$"　　//由26个英文字母的大写组成的字符串
"^[a-z]+$"　　//由26个英文字母的小写组成的字符串
"^[A-Za-z0-9]+$"　　//由数字和26个英文字母组成的字符串
"^\\w+$"　　//由数字、26个英文字母或者下划线组成的字符串
"^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$"　　　　//email地址
"^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$"　　//url

Eric.Zhou 2007-03-21 11:21 发表评论

【JavaScript 实现日历式日期选择】

Eric.Zhou — Sat, 27 Jan 2007 07:15:00 GMT

date.js代码：
/*=======Calendar.js=======By Jiang Hongbin=======*/

var months = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月");
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var days = new Array("日","一", "二", "三", "四", "五", "六");
var today;

document.writeln("

");

function getDays(month, year)
{
//下面的这段代码是判断当前是否是闰年的
if (1 == month)
return ((0 == year % 4) && (0 != (year % 100))) || (0 == year % 400) ? 29 : 28;
else
return daysInMonth[month];
}

function getToday()
{
//得到今天的年,月,日
this.now = new Date();
this.year = this.now.getFullYear();
this.month = this.now.getMonth();
this.day = this.now.getDate();
}

function getStringDay(str)
{
//得到输入框的年,月,日
var str=str.split("-")

this.now = new Date(parseFloat(str[0]),parseFloat(str[1])-1,parseFloat(str[2]));
this.year = this.now.getFullYear();
this.month = this.now.getMonth();
this.day = this.now.getDate();
}

function GetDate(InputBox)
{
var sDate;
//这段代码处理鼠标点击的情况
if (event.srcElement.tagName == "TD")
  if (event.srcElement.innerText != "")
  {
   sDate = document.all.Year.value + "-" + document.all.Month.value + "-" + event.srcElement.innerText;
   eval("document.all."+InputBox).value=sDate;
   HiddenCalendar();
  }
}

function HiddenCalendar()
{
//关闭选择窗口
document.all.Calendar.style.visibility='hidden';
}

function ShowCalendar(InputBox)
{
var x,y,intLoop,intWeeks,intDays;
var DivContent;
var year,month,day;
//var o=document.getElementById(InputBox);
var o=InputBox;
var oid=o.id;
var thisyear; //真正的今年年份

if(!oid)oid=o.name;

thisyear=new getToday();
thisyear=thisyear.year;

today = o.value;
if(isDate(today))
  today = new getStringDay(today);
else
  today = new getToday();

//显示的位置
x=o.offsetLeft;
y=o.offsetTop;
while(o=o.offsetParent)
{
  x+=o.offsetLeft;
  y+=o.offsetTop;
}
document.all.Calendar.style.left=x+2;
document.all.Calendar.style.top=y+20;
document.all.Calendar.style.visibility="visible";

//下面开始输出日历表格(border-color:#9DBAF7)
DivContent="

";
DivContent+="";
DivContent+="";

DivContent+="";
DivContent+="";

DivContent+="

";

//年
DivContent+="";

//月
DivContent+="";

DivContent+="

";
DivContent+="";

//星期
DivContent+="";
for (intLoop = 0; intLoop < days.length; intLoop++)
  DivContent+="";
DivContent+="";

//天
for (intWeeks = 0; intWeeks < 6; intWeeks++)
{
  DivContent+="";
  for (intDays = 0; intDays < days.length; intDays++)
   DivContent+="";
  DivContent+="";
}
DivContent+="

document.all.Calendar.innerHTML=DivContent;
newCalendar();
}

Eric.Zhou 2007-01-27 15:15 发表评论

图片新闻

Eric.Zhou — Tue, 17 Oct 2006 06:29:00 GMT

Eric.Zhou 2006-10-17 14:29 发表评论

Display与Visibility的不同

Eric.Zhou — Mon, 16 Oct 2006 04:58:00 GMT

css中的display与visibility——大多数人很容易将css属性display和visibility混淆，它们看似没有什么不同，其实它们的差别却是很大的。 visibility属性用来确定元素是显示还是隐藏，这用visibility="visible|hidden"来表示，visible表示显示，hidden表示隐藏。当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。

Eric.Zhou 2006-10-16 12:58 发表评论

innerText和innerHTML的区别

Eric.Zhou — Mon, 25 Sep 2006 07:41:00 GMT

innerText和innerHTML的区别
先看下面的代码

test

innerText

testinnerText
testinnerHTML

对于innerText，即把"test"当成整体内容显示出来。而对于innerHTML而言，则把"test"当成页面的一部分，即显示兰色的test字符！

Eric.Zhou 2006-09-25 15:41 发表评论

制作javascript弹出窗口技巧九则

Eric.Zhou — Mon, 04 Sep 2006 09:02:00 GMT

摘要: 1 、最基本的弹出窗口代码　　其实代码非常简单：　　 < SCRIPT LANGUAGE="javascript"> 　　 < !-- 　　 window.open ("page.html") 　　 -- > 　　 &l... 阅读全文

Eric.Zhou 2006-09-04 17:02 发表评论

BlogJava-

︻┳═一Java

ajax jsp 无刷新上传文件

Ajax.Updater

Syntax new Ajax.Updater(container, url, options); // make a HTTP request to the specified URL and update the 'container' element.

Options

在Struts 2中使用JSON Ajax支持

对多列表格多种数据类型进行排序

对多列表格进行排序

对单列表格排序js代码

Form中input和textarea自动选择文本

自定义鼠标提示代码

可折叠区域实现代码

showModalDialog和showModelessDialog使用

JS常见的location及URL变量

JavaFX发现之旅：JavaFX Script With Eclipse 入门（第一部分）

根据年取生肖

根据生日的月份和日期，计算星座的js小函数（最简）(转载)

如何在dwr的回调函数中传递多个参数

snap给文章中的链接加上缩略图(小教程)（转载）

【教程】 jquery第一次亲密接触(转载)

javascirpt几个验证输入类型

【JavaScript 实现日历式日期选择】

图片新闻

Display与Visibility的不同

innerText和innerHTML的区别

制作javascript弹出窗口技巧九则

Syntax `new Ajax.Updater(container, url, options); // make a HTTP request to the specified URL and update the 'container' element.`