what is the RIA? just it…||咖啡兔前端技术

利用JavaScript获取窗口/Body的宽度和高度(让jqGrid自适应窗口大小)

咖啡兔 — Fri, 20 Aug 2010 05:07:24 +0000

项目中使用了easy-ui和jqGrid，我使用easy-ui的layout布局，然后用jqGrid显示数据列表，easyu-ui在改变窗口大小的时候可以自适应，而jqGrid要加一些盐了，所以用到了获取窗口大小的几个参数，这样就可以根据窗口大小改变的时候改变jqGrid的高度和宽度，从网站找的别人写的例子：

演示地址：http://demo.wsria.cn/window/window-all-size.html

可以试着改变窗口大小然后点击“尺寸调试”按钮。
下面分享一下easy-ui的layout布局中把jqGrid列表页面嵌入到iframe的大小例子

功能函数：

function autoResize(options) {
// 第一次调用
var size = getWidthAndHeigh();
if ($.isFunction(options.callback)) {
	options.callback(size);
}
 
// 窗口大小改变的时候
window.onresize = function() {
	var size = getWidthAndHeigh(true);
	$(options.dataGrid).jqGrid('setGridHeight', size.height).jqGrid('setGridWidth', size.width);
};
 
// 获取iframe大小
function getWidthAndHeigh(resize) {
	var iframeHeight = document.body.clientHeight;
	var iframeWidth = document.body.clientWidth;
	// chrome
	if ($.common.browser.isChrome()) {
		iframeWidth -= 16;
		iframeHeight -= 85;
	}
	// firefox
	else if ($.common.browser.isMozila()) {
		iframeWidth -= 15;
		iframeHeight -= 85;
		if (resize) {
			iframeWidth += 18;
			iframeHeight += 13;
		}
	} 
	// IE
	else {
		iframeWidth -= 12;
		iframeHeight -= 83;
		if (resize) {
			iframeHeight += 15;
			iframeWidth += 10;
		}
	}
	return {width: iframeWidth, height: iframeHeight};
}
 
}

这里需要说明的是要根据浏览器的不同进行高度和宽度的调整！

使用方法：

autoResize({
        dataGrid: '#list',
	callback: listPropDatas
});

最大化窗口后自动填充

窗口缩小之后，随意大小，自动填充

声明:该日志由咖啡兔发表,你可以自由发表评论或转载到你的网站或博客。
转载请注明转自 what is the RIA? just it…||咖啡兔 ™
原始链接:http://www.wsria.cn/archives/1147 | 利用JavaScript获取窗口/Body的宽度和高度(让jqGrid自适应窗口大小)

为jstree添加双击事件切换[展开/收缩]功能

咖啡兔 — Sat, 19 Jun 2010 03:36:10 +0000

一、概述

jstree是一个基于jQuery开发的优秀树插件，能够快速生成美观实用的树；目前项目中使用了这个插件遇到了一点问题，以前使用simpletree的时候可以双击父节点[展开/收缩]子节点，但是好像jstree没有提供这个功能，所以只有自己开发了。

使用的版本号：jsTree 1.0-rc1
没有添加双击功能时：http://www.wsria.cn/demo/jstree/jstreeNormal.html

二、分析源码

因为现在要做的是监听双击事件所以在源码中查找[dblclick]，在整篇源代码中只有一个地方出现了dblclick，这就容易多了；

在第297行处，代码如下：

.bind("dblclick.jstree", function (event) {
	var sel;
	if(document.selection &amp;&amp; document.selection.empty) { document.selection.empty(); }
	else {
		if(window.getSelection) {
			sel = window.getSelection();
			try {
				sel.removeAllRanges();
				sel.collapse();
			} catch (err) { }
		}
	}
})

先不要看这些代码的意思，除非你想深入了解jstree的细节

三、修改源码

在修改源码之前先考虑一个问题，点击树左边的三角符号是怎么触发的事件，答案很简单，在源码中查找click.jstree，也就是第290行代码处，这里最主要的一句话就是

this.toggle_node(trgt);

，调用了jstree提供的toggle_node方法，也就是可以切换[展开/收缩]树节点，很好，我们可以借用一下

在298行代码处加入两行代码：

var trgt = $(event.target).parent().find('ins').get(0);
$jstree.toggle_node(trgt);

这里使用的$jstree定义在283行的

init	: function () {

之后，

var $jstree = this;

，用$jstree引用jstree对象以便调用提供的接口；
现在解释一下298行添加的那两行代码，第一行查询到ins标签，第二行调用jstree的toggle_node切换树分支的展开和收缩；
至此大功告成！

四、结果演示

有双击功能的演示：http://www.wsria.cn/demo/jstree/jstreeWithDblclick.html

五、程序下载

下载：jquery.jstree.dblclick.js 共 142 次

声明:该日志由咖啡兔发表,你可以自由发表评论或转载到你的网站或博客。
转载请注明转自 what is the RIA? just it…||咖啡兔 ™
原始链接:http://www.wsria.cn/archives/989 | 为jstree添加双击事件切换[展开/收缩]功能

没有找到.

[转][推荐]15 个 JavaScript Web UI 库

咖啡兔 — Thu, 20 May 2010 01:56:30 +0000

从cnbeta.com看到的，分享给大家；原文：http://www.cnbeta.com/articles/111512.htm

几乎所有的富 Web 应用都基于一个或多个 Web UI 库或框架，这些 UI 库与框架极大地简化了开发进程，并带来一致，可靠，以及高度交互性的用户界面。本文介绍了 15 个非常强大的 JavaScript Web UI 库，非常适合各种各种规模的富 Web 应用的开发。 LivePipe
LivePipe UI 基于 Prototype Javascript 框架，包含了一整套经严格测试并高度可扩展的 UI 控件，拥有很好的文档，在不支持 JavaScript 的环境中，可以无缝降级使用。包括 Tab, 窗体，文本框，多选框，评分控件，进度条，滚动条，右键菜单等多种控件。

LivePipe 首页与下载
 LivePipe 演示与示例

UKI

UKI 是一套简单的 JavaScript UI 工具集，用于快速创建桌面风格的 Web 应用。包含的控件从滑动条，到分栏视图，不一而足。熟悉 jQuery 的开发者会发现这个工具很容易上手，非常简洁，无需安装框架，不依赖 CSS 引用。

UKI 主页与下载
 UKI 控件，演示，示例

MochaUI

MochaUI 是 MooTools Javascript 框架与 ExplorerCanvas 的一个备受欢迎的扩展，可以用来快速创建 Web 应用，Web 桌面，网站，饰件，独立 Windows，Modal 对话框等等。

MochaUI 主页与下载
 MochaUI 控件，演示，示例

中文编译来源：锐商企业CMS 网站内容管理系统官方网站
Sigma Ajax UI Builder
SigmaVisual 是一套基于 Web 的，所见即所得的 AJAX UI 创建工具，包含超过40个不见，如 Tab，对话框，树形图，时间线等，基于 JavaScript 和 PHP。

Sigma Ajax UI Builder 主页和下载
 Sigma Ajax UI Builder 控件，演示和示例

JxLib based MooTools

JxLib 是一个基于 MooTools 的 JavaScript UI 框架，包含多数 Web 程序都需要的基本空间，如按钮，Tab，菜单，树形结构，对话框等等。JxLib 还支持换肤功能。

JxLib 主页与下载
 JxLib 控件，演示与示例

Dijit – The Dojo Toolkit

Dijit 基于 Dojo，也是学习 Dojo 扩展的一个好起点。可以用来创建非常漂亮的 Web 2.0 GUI。支持多语种，甚至支持不同语种的文字书写方向以及本地化数字，日期等等。

Dijit 主页，下载
 Dijit 控件，演示，示例

jQuery TOOLS

jQuery Tools 是一个非常轻量（2.5kb）的常用 UI 库，支持以下 jQuery 对象，Tabs, 工具提示，滚动条，层，表单以及 Flash 嵌套。

jQuery TOOLS 主页与下载
jQuery TOOLS 控件，演示，示例

jQuery UI

jQuery UI 基于 jQuery，包含 3 个大类，饰件，一些内置的 UI 对象；效果，对各种网页对象施加动画效果（如爆炸效果）；鼠标交互，如拖放操作。

jQuery UI 首页与下载
 jQuery UI 控件，演示与示例

Prototype UI

Prototype UI 基于 Prototype 与 Script.aculo.us，包括多个模块（旋转木马，Modal 窗口，阴影，右键菜单等），每个模块可以单独安装使用。

Prototype UI 主页与下载
 Prototype UI 控件，演示与示例

Jitsu

Jitsu 功能包括 XML 标记，页面编译，动画引擎，Ajax 以及运行时检测等等，它的 Ajax 功能使消费级 Web 应用的创建变得非常简单，支持客户端数据绑定，还可以将页面编译成 JavaScript，Jitsu 在 Firefox 和 IE 中运行最佳。

Jitsu 主页与下载
 Jitsu 控件，演示与示例

Qutensil
Qutensil 仍在开发中，但其路线图已经显示出某些引人注目的东西，基于 Prototype 与 Scriptaculous ，包含消息，调色板，滑动条，工具提示，可拖放窗口以及警告，确认，提示等窗口。

Qutensil 主页，下载
 Qutensil 控件，演示，示例

Script.aculo.us
script.aculo.us 是一个备受欢迎的 UI 工具集，基于 Prototype 框架，提供了诸如视觉效果，UI 控件以及面向 DOM 的工具。

Script.aculo.us 首页与下载

Alloy UI
AlloyUI 是一套功能丰富的 UI 框架，基于 YUI 3，部分基于 YUI 2，包含一套丰富的（超过60）UI 部件，如图片库，对话框，树形结构，面板，自动完成，按钮，日历控件，工具条等。

Alloy UI 首页和下载
 Alloy UI 控件，演示与示例

iUI: iPhone UI 框架

IUI 包含一套 JavaScript 库，CSS 式样表及图片，是一个轻量级 iPhone UI 库，包含 iPhone 风格导航菜单，设备方向，iPhone 风格切换等功能，可以为你的 Web 程序带来 iPhone 般的体验。

iUI 主页与下载
XUI

XUI 是一个用于移动 Web 应用的轻量，极简，高度模块化的框架。它之所以非常轻量的原因是，它只支持移动浏览器，所有跨浏览器支持的代码都被剥离。它面向一线移动 Web 浏览器，如 Webkit，Fennec 以及 Opera，并有意将来对移动 IE 和黑莓提供支持。

XUI 首页，下载
Yahoo! YUI Library

Yahoo! YUI Library 可谓所有 Web UI 之父，可靠，功能丰富，目前已经发展到第 3 版。它拥有一个很庞大的开发团队，推出了非常丰富的功能，就功能而言，无可匹敌。

YUI Library 主页与下载
 YUI2 入门
YUI3 入门
YUI3 控件，演示与示例

声明:该日志由咖啡兔发表,你可以自由发表评论或转载到你的网站或博客。
转载请注明转自 what is the RIA? just it…||咖啡兔 ™
原始链接:http://www.wsria.cn/archives/974 | [转][推荐]15 个 JavaScript Web UI 库

jqGrid查询中文乱码问题解决办法

咖啡兔 — Fri, 23 Apr 2010 09:23:33 +0000

jqGrid是我用过最好的基于jQuery的列表插件，在项目中试用后效果很不错，基于jQuery UI的界面美观并且可以更好皮肤……

花了一天时间实现了增删改和查询功能，但是在查询中文的时候遇到了乱码问题……诡异，说一下情况：

我的开发环境是全站UTF-8，而且有编码Filter；
jqGrid版本为：3.6.4

在后台断点调试发现如下特点：

1、新增、编辑没有乱码问题

2、查询中文后台时得到的参数是乱码

然后就考虑了，如果是开发环境问题那肯定全部都有乱码问题，所以问题应该在jqGrid的查询函数里面，最后通过Firebug找到了：

c.find(".ui-search").click(function() {

这一行是查询功能的开始也就是点击“查询”的触发函数

所以根据以往的经验在这里把参数值编码一次就可以了，也就是encodeURIComponent函数具体修改如下：

找到第6202行

找到代码

6201
6202
6203

var p = jQuery(this).find("select[name='field'] :selected").val(),
g = jQuery(this).find("select[name='op'] :selected").val(),
f = jQuery(this).find("input.vdata,select.vdata :selected").val();

现在看到这里的3行代码就是查询时获取参数的3个变量，我们要修改的就是这里，最终代码：

6202
6203
6204

var p = encodeURIComponent(jQuery(this).find("select[name='field'] :selected").val()),
g = encodeURIComponent(jQuery(this).find("select[name='op'] :selected").val()),
f = encodeURIComponent(jQuery(this).find("input.vdata,select.vdata :selected").val());

到此大功告成

——————————–分割线———————————–

为了方便网友顺便提供本人修改后的jqGrid3.6.4版本的源码，分为3中类型（未压缩、迷你版、压缩版pack）

下载：jquery.jqGrid.3.6.4.js 共 144 次

下载：jquery.jqGrid.min.3.6.4.js 共 123 次

下载：jquery.jqGrid.pack.3.6.4.js 共 96 次

声明:该日志由咖啡兔发表,你可以自由发表评论或转载到你的网站或博客。
转载请注明转自 what is the RIA? just it…||咖啡兔 ™
原始链接:http://www.wsria.cn/archives/961 | jqGrid查询中文乱码问题解决办法

[转][推荐]jqGrid基础学习系列文章

咖啡兔 — Fri, 19 Mar 2010 02:53:34 +0000

最近项目中使用了jqGrid数据网格插件，看到了网友写的一系列文章分享给大家看

声明:该日志由咖啡兔发表,你可以自由发表评论或转载到你的网站或博客。
转载请注明转自 what is the RIA? just it…||咖啡兔 ™
原始链接:http://www.wsria.cn/archives/952 | [转][推荐]jqGrid基础学习系列文章

直逼 Flash 的流畅感：jQuery 运动特效展示

咖啡兔 — Tue, 02 Mar 2010 06:41:46 +0000

新闻来源:devsnippets.com
围剿 Flash 的不仅有 HTML 5，还有 JavaScript，著名的 JavaScript 框架 jQuery 在运动特效方面已经越来越流畅，有时候你需要点一下右键来确认它不是 Flash。本文介绍了10个非常出色的 jQuery 运动特效，这些效果可以更有效地展示你的内容。

让Flash喝西北风去吧，走，看看jQuery多牛X……

1. 流感导航菜单
下面的导航菜单，当鼠标在上面移动的时候，会很流畅地垂下解释菜单，当你将鼠标在上面快速左右移动的时候，会怀疑这是 Flash。

2. 转花灯
Roundabout 是一个 jQuery 插件，可以将一组 HTML 对象转换为旋转花灯的效果。

3. 拉洋片
拉洋片也许是 jQuery 最拿手的效果了。该效果在遇到 JavaScript 被禁用的场合会自动降级使用。

4. jQuery Quicksand 插件
这个让人赞叹的插件，可以对一组 HTML 对象重新洗牌，效果非常出众。

5. 导航滑块
这种风格的导航已经见于很多站点，鼠标在导航菜单上移动的时候，一个高亮指示条随着鼠标滑动，指示当前的导航位置。

6. 文字的移动纹理
在文字上，显示移动的纹理，效果美轮美奂。原理是，做一个带透明文字的 PNG 图像放在一个容器里，容器的背景放一张图案，用 jQuery 移动容器的背景，很简单，不过，不支持 IE6，因为 IE6 不支持 PNG。

7. jDiv: jQuery 导航 Tab
一个可以显示丰富内容的下拉导航菜单（演示要翻墙）。

8. 基于 CSS3 和 jQuery 的半透明导航系统
鼠标在导航菜单上移动，显示半透明的指示图标。CSS3 做这个实在太容易了。

9. 云台式拉洋片
常规的拉洋片效果要么左到右，要么右到左，或者垂直上下，这个 jQuery 效果可以象云台那样扫镜头。

10. SlideDeck
SlideDeck 是一种新颖的内容展示方式，有点类似 Outlook 的手风琴菜单，但视觉效果和用户体验更好一些。

本文来源：http://devsnippets.com/article/10-jquery-transition-effects.html
中文编译来源：锐商企业CMS 网站内容管理系统官方网站

声明:该日志由咖啡兔发表,你可以自由发表评论或转载到你的网站或博客。
转载请注明转自 what is the RIA? just it…||咖啡兔 ™
原始链接:http://www.wsria.cn/archives/918 | 直逼 Flash 的流畅感：jQuery 运动特效展示

Sexy Buttons（Web 按钮[图标]素材）

咖啡兔 — Wed, 10 Feb 2010 03:26:19 +0000

这个 ZIP 压缩包包含了 1500 个各种颜色，各种尺寸的图标，还提供相应的 CSS/HTML?框架来实现 Web 按钮，支持所有主流浏览器。

下载：Sexy Buttons.zip 共 232 次

声明:该日志由咖啡兔发表,你可以自由发表评论或转载到你的网站或博客。
转载请注明转自 what is the RIA? just it…||咖啡兔 ™
原始链接:http://www.wsria.cn/archives/813 | Sexy Buttons（Web 按钮[图标]素材）

推荐：基于jQuery开发仿Google Calendar(jQuery Week Calendar)

咖啡兔 — Tue, 12 Jan 2010 08:17:56 +0000

jQuery Week Calendar

在open-open上发现的，试了一下很不错，对于日常开发中对计划安排或者对操作性要求较高的可以使用这个插件

目前开发的一个系统正好需要这样的功能所以推荐给大家

官网：http://www.redredred.com.au/projects/jquery-week-calendar/

Live Demo

The following live demonstration? has a basic calendar with a few events in it. It demonstrates most of the major functionality by triggering events that are displayed as messages in the top right hand corner of the screen.? More demos will? come soon…

Demo 1 (Basic)

Demo 1 shows basic calendar functionality. Calendar Events are supplied as a local javascript array. All triggered events are displayed as messages, calendar events in the past are shaded gray using the eventRender callback.

Demo 2 (Multi data-source and dynamic config options)

Demo 2 allows you to select from two different data sources. These are both local javascript objects but could just as easily have come from a remote server. The data returned includes an ‘options’ property which overrides the default calendar options for ‘timeslotHeight’ and ‘timeslotsPerHour’.

Demo 3 (Create / update / delete using jquery UI)

This demo shows the use of jquery ui modal dialog for creating, updating and deleting events. It also demonstrates the use of

Staggered overlapping events

Querying the calendar for valid timeslots for a date to populate calendar event form select fields

Limited display of timeslots based on business hours

声明:该日志由咖啡兔发表,你可以自由发表评论或转载到你的网站或博客。
转载请注明转自 what is the RIA? just it…||咖啡兔 ™
原始链接:http://www.wsria.cn/archives/762 | 推荐：基于jQuery开发仿Google Calendar(jQuery Week Calendar)

推荐：2009 年度最佳 jQuery 插件

咖啡兔 — Sat, 12 Dec 2009 12:43:54 +0000

jQuery 是个宝库，而 jQuery 的插件体系是个取之不竭的宝库，众多开发者在 jQuery 框架下，设计了数不清的插件，jQuery 的特长是网页效果，因此，它的插件库也多与 UI 有关。本文是 webdesignledger.com 网站推选的2009年度最佳 jQuery 插件。

拉洋片
在一个固定区域，循环显示几段内容，这种方式很像旧时的拉洋片，2009年，这种 Web 效果大行其道，jQuery 有大量与此有关的插件，以下插件无疑是最佳的。
AnythingSlider

由 CSS-Tricks 的 Chris Coyier 设计，功能齐全，应用十分广泛。
Easy Slider

这个 Content Slider 插件既包含传统“前后”导航模式，又包含页码式导航。
Coda-Slider 2.0

Coda-Slider 2.0 是对 Panic Coda 网站上对应效果的模仿。
图片库
那些需要借助 Flash 实现滑动与渐入渐出效果图片库的日子已经去过，借助 jQuery，这种效果已经可以在本地实现，以下是本年度备受欢迎的几个 jQuery 图片库插件。
Galleria

这是一个基于 jQuery 的图片库，可以逐个加载图片并显示缩略图。
jQuery Panel Gallery

一个可以高度定义的图片库插件，无需对单个图片进行任何处理，这个插件会帮你完成一切。
slideViewer

slideViewer 会检查你的图片列表中的编号，动态创建各个图片的页码浏览导航。
Supersized

一个令人惊讶的图片循环展示插件，包含各种变换效果和预加载选项，会对图片自动改变尺寸以适应浏览器窗口。
导航
我们相信，作为网站的导航系统，应该越简单，越易用越好，然而，假如你确实希望实现一些更炫的效果，jQuery 就是最好的选项，以下插件是09年最好的 jQuery 导航插件。
jquery mb.menu

Horizontal Scroll Menu with jQuery

AutoSprites

表单和表格
在 Web 设计中，表单和表格都是不是很讨人喜欢的东西，但你不得不面对，本年度出现几个不错的 jQuery 插件帮你完成这些任务。
Password Strength

这个插件帮你评估用户输入的密码是否足够强壮。
Ajax Fancy Capcha

顾名思义，一个支持 Ajax 又很炫的 jQuery Captcha 插件，它使用了很人性化的验证机制。
Chromatable

这个插件可以帮助你在表格上实现滚动条。
jqTransform

一个式样插件，帮助你对表单中的控件进行式样控制。
Uploadify

实现多个文件同时上传。
jExpand

一个很轻量的 jQuery 插件，使你的表格可以扩展，在一些商业应用中，可以让表格更容易组织其中的内容。

本文来源：http://webdesignledger.com/resources/the-best-jquery-plugins-of-2009
中文翻译来源：COMSHARP CMS 企业网站内容管理系统官方站

声明:该日志由咖啡兔发表,你可以自由发表评论或转载到你的网站或博客。
转载请注明转自 what is the RIA? just it…||咖啡兔 ™
原始链接:http://www.wsria.cn/archives/733 | 推荐：2009 年度最佳 jQuery 插件

推荐：正则表达式口诀及教程

咖啡兔 — Tue, 03 Nov 2009 13:15:20 +0000

由 Knightby 撰写　http://www.knightby.net/regular-expressions-formula-and-tutorial-recommended.html
转载自：http://bbs.php.cn/thread-20557-1-15.html
正则其实也势利，削尖头来把钱揣；（指开始符号^和结尾符号$）
特殊符号认不了，弄个倒杠来引路；（指\. \*等特殊符号）
倒杠后面跟小w，数字字母来表示；（\w跟数字字母;\d跟数字）
倒杠后面跟小d，只有数字来表示；
倒杠后面跟小a，报警符号嘀一声；
倒杠后面跟小b，单词分界或退格；
倒杠后面跟小t，制表符号很明了；
倒杠后面跟小r，回车符号知道了；
倒杠后面跟小s，空格符号很重要；
小写跟罢跟大写，多得实在不得了；
倒杠后面跟大W，字母数字靠边站；
倒杠后面跟大S，空白也就靠边站；
倒杠后面跟大D，数字从此靠边站；
倒框后面跟大B，不含开头和结尾；

单个字符要重复，三个符号来帮忙；（* + ？）
0 星加1 到无穷，问号只管0 和1；（*表0-n;+表1-n;?表0-1次重复）
花括号里学问多，重复操作能力强；（{n} {n,} {n,m}）
若要重复字符串，园括把它括起来；（（abc）{3} 表示字符串“abc”重复3次）
特殊集合自定义，中括号来帮你忙；
转义符号行不通，一个一个来排队；
实在多得排不下，横杠请来帮个忙；（[1-5]）
尖头放进中括号，反义定义威力大；（[^a]指除“a”外的任意字符）
1竖作用可不小，两边正则互替换；（键盘上与“\”是同一个键）
1竖能用很多次，复杂定义很方便；
园括号，用途多；
反向引用指定组，数字排符对应它；（“\b(\w+)\b\s+\1\b”中的数字“1”引用前面的“(\w+)”）
支持组名自定义，问号加上尖括号；（“(?\w+)”中把“\w+”定义为组，组名为“Word”）
园括号，用途多，位置指定全靠它；
问号等号字符串，定位字符串前面；（“\b\w+(?=ing\b)”定位“ing”前面的字符串）
若要定位串后面，中间插个小于号；（“(?<=\bsub)\w+\b”定位“sub”后面的字符串）
问号加个惊叹号，后面跟串字符串；
PHPer都知道，！是取反的意思；
后面不跟这一串，统统符合来报到；（“\w*d(?!og)\w*”，“dog”不符合，“do”符合）
问号小于惊叹号，后面跟串字符串；
前面不放这一串，统统符合来报到；
点号星号很贪婪，加个问号不贪婪；
加号问号有保底，至少重复一次多；
两个问号老规矩，0次1次团团转；
花括号后跟个？，贪婪变成不贪婪；
还有很多装不下，等着以后来增加
From - http://www.knightby.net/regular-expressions-formula-and-tutorial-recommended.html#more-385
常用正则表达式
由 Knightby 撰写　http://www.knightby.net/regular-expressions-in-common-use.html
1。^\d+$ //匹配非负整数（正整数 + 0）
2。^[0-9]*[1-9][0-9]*$ //匹配正整数
3。^((-\d+) ?(0+))$ //匹配非正整数（负整数 + 0）
4。^-[0-9]*[1-9][0-9]*$ //匹配负整数
5。^-?\d+$ //匹配整数
6。^\d+(\.\d+)?$ //匹配非负浮点数（正浮点数 + 0）
7。^(([0-9]+\.[0-9]*[1-9][0-9]*) ?([0-9]*[1-9][0-9]*\.[0-9]+) ?([0-9]*[1-9][0-9]*))$ //匹配正浮点数
8。^((-\d+(\.\d+)?) ?(0+(\.0+)?))$ //匹配非正浮点数（负浮点数 + 0）
9。^(-(([0-9]+\.[0-9]*[1-9][0-9]*) ?([0-9]*[1-9][0-9]*\.[0-9]+) ?([0-9]*[1-9][0-9]*)))$ //匹配负浮点数
10。^(-?\d+)(\.\d+)?$ //匹配浮点数
11。^[A-Za-z]+$ //匹配由26个英文字母组成的字符串
12。^[A-Z]+$ //匹配由26个英文字母的大写组成的字符串
13。^[a-z]+$ //匹配由26个英文字母的小写组成的字符串
14。^[A-Za-z0-9]+$ //匹配由数字和26个英文字母组成的字符串
15。^\w+$ //匹配由数字、26个英文字母或者下划线组成的字符串
16。^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$ //匹配email地址
17。^[a-zA-z]+://匹配(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$ //匹配url
18。匹配中文字符的正则表达式： [\u4e00-\u9fa5]
19。匹配双字节字符(包括汉字在内)：[^\x00-\xff]
20。应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）
String.prototype.len=function(){return this.replace([^\x00-\xff]/g,”aa”).length;}
21。匹配空行的正则表达式：\n[\s ? ]*\r
22。匹配HTML标记的正则表达式：/ <(.*)>.* <\/\1> ? <(.*) \/>/
23。匹配首尾空格的正则表达式：(^\s*) ?(\s*$)
* 正则表达式用例
* 1、^\S+[a-z A-Z]$ 不能为空不能有空格只能是英文字母
* 2、\S{6,} 不能为空六位以上
* 3、^\d+$ 不能有空格不能非数字
* 4、(.*)(\.jpg ?\.bmp)$ 只能是jpg和bmp格式
* 5、^\d{4}\-\d{1,2}-\d{1,2}$ 只能是2004-10-22格式
* 6、^0$ 至少选一项
* 7、^0{2,}$ 至少选两项
* 8、^[\s ?\S]{20,}$ 不能为空二十字以上
* 9、^\+?[a-z0-9](([-+.] ?[_]+)?[a-z0-9]+)*@([a-z0-9]+(\. ?\-))+[a-z]{2,6}$邮件
* 10、\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*([,;]\s*\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*)* 输入多个地址用逗号或空格分隔邮件
* 11、^($[0-9]+$)?[0-9]{7,8}$电话号码7位或8位或前面有区号例如（022）87341628
* 12、^[a-z A-Z 0-9 _]+@[a-z A-Z 0-9 _]+(\.[a-z A-Z 0-9 _]+)+(\,[a-z A-Z 0-9 _]+@[a-z A-Z 0-9 _]+(\.[a-z A-Z 0-9 _]+)+)*$
* 只能是字母、数字、下划线；必须有@和.同时格式要规范邮件
* 13 ^\w+@\w+(\.\w+)+(\,\w+@\w+(\.\w+)+)*$上面表达式也可以写成这样子，更精练。
14 ^\w+((-\w+) ?(\.\w+))*\@\w+((\. |-)\w+)*\.\w+$
匹配中文字符的正则表达式： [\u4e00-\u9fa5]
评注：匹配中文还真是个头疼的事，有了这个表达式就好办了
匹配双字节字符(包括汉字在内)：[^\x00-\xff]
评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）
匹配空白行的正则表达式：\n\s*\r
评注：可以用来删除空白行
匹配HTML标记的正则表达式： <(\S*?)[^>]*>.*? ? <.*? />
评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力
匹配首尾空白字符的正则表达式：^\s* ?\s*$
评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式
匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
评注：表单验证时很实用
匹配网址URL的正则表达式：[a-zA-z]+://[^\s]*
评注：网上流传的版本功能很有限，上面这个基本可以满足需求
匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
评注：表单验证时很实用
匹配国内电话号码：\d{3}-\d{8} ?\d{4}-\d{7}
评注：匹配形式如 0511-4405222 或 021-87888822
匹配腾讯QQ号：[1-9][0-9]{4,}
评注：腾讯QQ号从10000开始
匹配中国邮政编码：[1-9]\d{5}(?!\d)
评注：中国邮政编码为6位数字
匹配身份证：\d{15} ?\d{18}
评注：中国的身份证为15位或18位
匹配ip地址：\d+\.\d+\.\d+\.\d+
评注：提取ip地址时有用
匹配特定数字：
^[1-9]\d*$ //匹配正整数
^-[1-9]\d*$ //匹配负整数
^-?[1-9]\d*$ //匹配整数
^[1-9]\d* |0$ //匹配非负整数（正整数 + 0）
^-[1-9]\d* |0$ //匹配非正整数（负整数 + 0）
^[1-9]\d*\.\d* |0\.\d*[1-9]\d*$ //匹配正浮点数
^-([1-9]\d*\.\d* |0\.\d*[1-9]\d*)$ //匹配负浮点数
^-?([1-9]\d*\.\d* |0\.\d*[1-9]\d* |0?\.0+ |0)$ //匹配浮点数
^[1-9]\d*\.\d* |0\.\d*[1-9]\d* |0?\.0+ |0$ //匹配非负浮点数（正浮点数 + 0）
^(-([1-9]\d*\.\d* |0\.\d*[1-9]\d*)) |0?\.0+ |0$ //匹配非正浮点数（负浮点数 + 0）
评注：处理大量数据时有用，具体应用时注意修正
匹配特定字符串：
^[A-Za-z]+$ //匹配由26个英文字母组成的字符串
^[A-Z]+$ //匹配由26个英文字母的大写组成的字符串
^[a-z]+$ //匹配由26个英文字母的小写组成的字符串
^[A-Za-z0-9]+$ //匹配由数字和26个英文字母组成的字符串
^\w+$ //匹配由数字、26个英文字母或者下划线组成的字符串
“^[\\w-]+(+)*@[..w-]+(…[..w-]+)+___fckpd___0quot/]\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+___FCKpd___0quot; //email地址
“^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?___FCKpd___0quot; //url
匹配中文字符的正则表达式： [\u4e00-\u9fa5]
评注：匹配中文还真是个头疼的事，有了这个表达式就好办了
匹配双字节字符(包括汉字在内)：[^\x00-\xff]
评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）
匹配空白行的正则表达式：\n\s*\r
评注：可以用来删除空白行
匹配HTML标记的正则表达式： <(\S*?)[^>]*>.*? ? <.*? />
评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力
匹配首尾空白字符的正则表达式：^\s* ?\s*$
评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式
匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
评注：表单验证时很实用
匹配网址URL的正则表达式：[a-zA-z]+://[^\s]*
评注：网上流传的版本功能很有限，上面这个基本可以满足需求
匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
评注：表单验证时很实用
匹配国内电话号码：\d{3}-\d{8} ?\d{4}-\d{7}
评注：匹配形式如 0511-4405222 或 021-87888822
匹配腾讯QQ号：[1-9][0-9]{4,}
评注：腾讯QQ号从10000开始
匹配中国邮政编码：[1-9]\d{5}(?!\d)
评注：中国邮政编码为6位数字
匹配身份证：\d{15} ?\d{18}
评注：中国的身份证为15位或18位
匹配ip地址：\d+\.\d+\.\d+\.\d+
评注：提取ip地址时有用
匹配特定数字：
^[1-9]\d*$ //匹配正整数
^-[1-9]\d*$ //匹配负整数
^-?[1-9]\d*$ //匹配整数
^[1-9]\d* |0$ //匹配非负整数（正整数 + 0）
^-[1-9]\d* |0$ //匹配非正整数（负整数 + 0）
^[1-9]\d*\.\d* |0\.\d*[1-9]\d*$ //匹配正浮点数
^-([1-9]\d*\.\d* |0\.\d*[1-9]\d*)$ //匹配负浮点数
^-?([1-9]\d*\.\d* |0\.\d*[1-9]\d* |0?\.0+ |0)$ //匹配浮点数
^[1-9]\d*\.\d* |0\.\d*[1-9]\d* |0?\.0+ |0$ //匹配非负浮点数（正浮点数 + 0）
^(-([1-9]\d*\.\d* |0\.\d*[1-9]\d*)) |0?\.0+ |0$ //匹配非正浮点数（负浮点数 + 0）
评注：处理大量数据时有用，具体应用时注意修正
匹配特定字符串：
^[A-Za-z]+$ //匹配由26个英文字母组成的字符串
^[A-Z]+$ //匹配由26个英文字母的大写组成的字符串
^[a-z]+$ //匹配由26个英文字母的小写组成的字符串
^[A-Za-z0-9]+$ //匹配由数字和26个英文字母组成的字符串
^\w+$ //匹配由数字、26个英文字母或者下划线组成的字符串
“^[\\w-]+(+)*@[..w-]+(…[..w-]+)+___fckpd___0quot/]\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+___FCKpd___0quot; //email地址
“^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?___FCKpd___0quot; //urlview plaincopy to clipboardprint?
正则几个基本概念：
正则几个基本概念：view plaincopy to clipboardprint?
1.贪婪：+,*,?,{m,n}等默认是贪婪匹配，即尽可能多匹配，也叫最大匹配
如果后面加上?，就转化为非贪婪匹配，需要高版本支持
1.贪婪：+,*,?,{m,n}等默认是贪婪匹配，即尽可能多匹配，也叫最大匹配
如果后面加上?，就转化为非贪婪匹配，需要高版本支持view plaincopy to clipboardprint?
2.获取：默认用(x |y)是获取匹配，很多时候只是测试，不一定要求得到所匹配的数据，尤其在嵌套匹配或大数据中就要用非获取匹配(?:x |y)，这样提高了效率，优化了程序。
2.获取：默认用(x |y)是获取匹配，很多时候只是测试，不一定要求得到所匹配的数据，尤其在嵌套匹配或大数据中就要用非获取匹配(?:x |y)，这样提高了效率，优化了程序。view plaincopy to clipboardprint?
3.消耗：默认是消耗匹配，一般在预查中是非消耗匹配。
举个例子，2003-2-8要变为2003-02-08
如果用/-(\d)-/第二次匹配将从8开始，从而只替换第一个2，错误
如果用/-(\d)(?=-)/则第二次匹配从第二个-开始，即不消耗字符-
3.消耗：默认是消耗匹配，一般在预查中是非消耗匹配。
举个例子，2003-2-8要变为2003-02-08
如果用/-(\d)-/第二次匹配将从8开始，从而只替换第一个2，错误
如果用/-(\d)(?=-)/则第二次匹配从第二个-开始，即不消耗字符-view plaincopy to clipboardprint?
4.预查：js中分为正向预查和负向预查
如上面的(?=pattern)是正向预查，在任何匹配 pattern 的字符串开始处匹配查找字符串。还有 (?!pattern)是负向预查，在任何不匹配 pattern 的字符串开始处匹配查找字符串。负向预查有时会用在对[^]的扩充，[^]只是一些字符，而?!可以使整个字符串。
4.预查：js中分为正向预查和负向预查
如上面的(?=pattern)是正向预查，在任何匹配 pattern 的字符串开始处匹配查找字符串。还有 (?!pattern)是负向预查，在任何不匹配 pattern 的字符串开始处匹配查找字符串。负向预查有时会用在对[^]的扩充，[^]只是一些字符，而?!可以使整个字符串。view plaincopy to clipboardprint?
5.回调：一般用在替换上，即根据不用的匹配内容返回不用的替换值，从而简化了程序，需要高版本支持
5.回调：一般用在替换上，即根据不用的匹配内容返回不用的替换值，从而简化了程序，需要高版本支持view plaincopy to clipboardprint?
6.引用：\num 对所获取的第num个匹配的引用。
例如，’(.)\1\1′ 匹配AAA型。’(.)(.)\2\1′ 匹配ABBA型。
6.引用：\num 对所获取的第num个匹配的引用。
例如，’(.)\1\1′ 匹配AAA型。’(.)(.)\2\1′ 匹配ABBA型。view plaincopy to clipboardprint?
正则表达式保留字
^ (carat)
. (period)
[ (left bracket}
$ (dollar sign)
( (left parenthesis)
) (right parenthesis)
? (pipe)
* (asterisk)
+ (plus symbol)
? (question mark)
{ (left curly bracket, or left brace)
\ backslash
正则表达式保留字
^ (carat)
. (period)
[ (left bracket}
$ (dollar sign)
( (left parenthesis)
) (right parenthesis)
? (pipe)
* (asterisk)
+ (plus symbol)
? (question mark)
{ (left curly bracket, or left brace)
\ backslash view plaincopy to clipboardprint?
构造匹配于
构造匹配于 view plaincopy to clipboardprint?
字符
x 字符 x
\\ 反斜线字符
\0n 八进制值的字符0n (0 <= n <= 7)
\0nn 八进制值的字符 0nn (0 <= n <= 7)
\0mnn 八进制值的字符0mnn 0mnn (0 <= m <= 3, 0 <= n <= 7)
\xhh 十六进制值的字符0xhh
\uhhhh 十六进制值的字符0xhhhh
\t 制表符('\u0009')
\n 换行符 ('\u000A')
\r 回车符 ('\u000D')
\f 换页符 ('\u000C')
\a 响铃符 ('\u0007')
\e 转义符 ('\u001B')
\cx T对应于x的控制字符 x
字符
x 字符 x
\\ 反斜线字符
\0n 八进制值的字符0n (0 <= n <= 7)
\0nn 八进制值的字符 0nn (0 <= n <= 7)
\0mnn 八进制值的字符0mnn 0mnn (0 <= m <= 3, 0 <= n <= 7)
\xhh 十六进制值的字符0xhh
\uhhhh 十六进制值的字符0xhhhh
\t 制表符('\u0009')
\n 换行符 ('\u000A')
\r 回车符 ('\u000D')
\f 换页符 ('\u000C')
\a 响铃符 ('\u0007')
\e 转义符 ('\u001B')
\cx T对应于x的控制字符 x view plaincopy to clipboardprint?
字符类
[abc] a, b, or c (简单类)
[^abc] 除了a、b或c之外的任意字符（求反）
[a-zA-Z] a到z或A到Z ，包含（范围)
[a-z-[bc]] a到z，除了b和c ： [ad-z]（减去）
[a-z-[m-p]] a到z，除了m到 p： [a-lq-z]
[a-z-[^def]] d, e, 或 f
字符类
[abc] a, b, or c (简单类)
[^abc] 除了a、b或c之外的任意字符（求反）
[a-zA-Z] a到z或A到Z ，包含（范围)
[a-z-[bc]] a到z，除了b和c ： [ad-z]（减去）
[a-z-[m-p]] a到z，除了m到 p： [a-lq-z]
[a-z-[^def]] d, e, 或 f view plaincopy to clipboardprint?
预定义的字符类
. 任意字符（也许能与行终止符匹配，也许不能）
\d 数字: [0-9]
\D 非数字: [^0-9]
\s 空格符: [ \t\n\x0B\f\r]
\S 非空格符: [^\s]
\w 单词字符: [a-zA-Z_0-9]
\W 非单词字符: [^\w]
From – http://www.knightby.net/regular-expressions-in-common-use.html#more-311

声明:该日志由咖啡兔发表,你可以自由发表评论或转载到你的网站或博客。
转载请注明转自 what is the RIA? just it…||咖啡兔 ™
原始链接:http://www.wsria.cn/archives/728 | 推荐：正则表达式口诀及教程

[推荐]改进的提示插件-jQuery.hiAlerts.1.0

咖啡兔 — Mon, 27 Jul 2009 04:59:13 +0000

引用此版本修改者的话：

由于工作上需要，在jquery.Alerts基础上改进的一个插件，现在有提示框，确认框，输入框，弹出提示层，顶部浮动提示层5个效果，我重命名他为hiAlerts，hi表示招呼的意思，这个可能还要修改添加一些效果，所以暂定为1.0版吧

演示：http://www.cssrain.cn/demo/jquery.hiAlerts.1.0/demo.html

下载：jquery.hiAlerts.1.0.rar 共 416 次

之前用过一些类似的插件，感觉这个做的很简洁、实用，所以推荐给大家

声明:该日志由咖啡兔发表,你可以自由发表评论或转载到你的网站或博客。
转载请注明转自 what is the RIA? just it…||咖啡兔 ™
原始链接:http://www.wsria.cn/archives/659 | [推荐]改进的提示插件-jQuery.hiAlerts.1.0

站点GBK编码下jQuery Ajax中文乱码解决方案

咖啡兔 — Wed, 01 Jul 2009 05:18:03 +0000

哎，还是老话题，一直缠绕着国人……

现在来个快刀斩乱麻，let’s go
由于项目前期使用的是1.2.6版本，后期使用的是1.3.2版本，所以分开来讲;

说说实现的办法，有点暴力——直接修改jQury源码，不过不用担心，不会影响整体功能而且就修改几行代码就可以解决乱码，也就是在发送请求的时候把参数值再进行一次转码，修改的方法为param

1、jQuery 1.2.6 乱码解决办法

打开1.2.6版本的源文件

找到第2911、2921、2924行，分别修改对应参数值的地方包裹一层encodeURIComponent即可，修改后的结果如下：

param: function( a ) {
		var s = [];
 
		// If an array was passed in, assume that it is an array
		// of form elements
		if ( a.constructor == Array || a.jquery )
			// Serialize the form elements
			jQuery.each( a, function(){
				s.push( encodeURIComponent(this.name) + "=" + encodeURIComponent(encodeURIComponent( this.value )) );
			});
 
		// Otherwise, assume that it's an object of key/value pairs
		else
			// Serialize the key/values
			for ( var j in a )
				// If the value is an array then the key names need to be repeated
				if ( a[j] &amp;&amp; a[j].constructor == Array )
					jQuery.each( a[j], function(){
						s.push( encodeURIComponent(j) + "=" + encodeURIComponent(encodeURIComponent( this )) );
					});
				else
					s.push( encodeURIComponent(j) + "=" + encodeURIComponent(encodeURIComponent( jQuery.isFunction(a[j]) ? a[j]() : a[j] )) );
 
		// Return the resulting serialization
		return s.join("&").replace(/%20/g, "+");
	}

下载：jquery-encode-gbk.1.2.6.js 共 488 次
下载：jquery-encode-gbk.pack.1.2.6.js 共 404 次

2、jQuery 1.3.2 乱码解决办法

1.3.2的就不用这么麻烦了，因为这个版本简化了param方法的结构，只需要修改一行代码即可，因为只有一个地方转码了

找到第3737行，同样包裹一层encodeURIComponent，结果如下：

	param: function( a ) {
		var s = [ ];
 
		function add( key, value ){
			s[ s.length ] = encodeURIComponent(key) + '=' + encodeURIComponent(encodeURIComponent(value));
		};

下载：jquery-encode-gbk-1.3.2.js 共 843 次
下载：jquery-encode-gbk-.pack.1.3.2.js 共 840 次

重要说明：后台必须要转码：java.net.URLDecoder.decode(request.getParameter(“name”), “UTF-8″)

声明:该日志由咖啡兔发表,你可以自由发表评论或转载到你的网站或博客。
转载请注明转自 what is the RIA? just it…||咖啡兔 ™
原始链接:http://www.wsria.cn/archives/611 | 站点GBK编码下jQuery Ajax中文乱码解决方案

简单实现在基于Java的AJAX环境下未登录自动跳转流程详解(spring代理struts的action)

咖啡兔 — Mon, 22 Jun 2009 05:28:38 +0000

有过管理系统开发经验的程序员第一步肯定是做用户管理模块，当然可能会用到公司或者其他的产品，或者自己写用户管理模块，此模块主要的目的是区别每个用户的信息集合，限制用户的操作、数据列表等

今天讲的是用户登录问题，环境是基于JAVA语言，使用spring代理struts的Action，在使用spring创建的bean时执行一次验证拦截器来判断用户是否登录
下面进入正题：

struts的拦截器

package net.yanhl.struts.authority;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import net.yanhl.util.UserUtil;
 
import org.aopalliance.intercept.MethodInterceptor;
import org.aopalliance.intercept.MethodInvocation;
import org.apache.struts.action.ActionMapping;
 
/**
 *Title: 判断用户是不是已经登陆
 *Description:
 *Copyright: Copyright (c) 2008
 *
 * @author 闫洪磊
 * @version 1.0.0.20080523
 */
public class UserAuthorityInterceptor implements MethodInterceptor {
	public Object invoke(MethodInvocation invocation) throws Throwable {
		HttpServletRequest request = null;
		HttpServletResponse response = null;
		ActionMapping mapping = null;
		Object[] args = invocation.getArguments();
		//转换各种对象
		for (int i = 0; i &lt; args.length; i++) {
			if (args[i] instanceof HttpServletRequest) {
				request = (HttpServletRequest) args[i];
			} else if (args[i] instanceof HttpServletResponse) {
				response = (HttpServletResponse) args[i];
			} else if (args[i] instanceof ActionMapping) {
				mapping = (ActionMapping) args[i];
			}
		}
		if (UserUtil.isLogin(request)) {
			return invocation.proceed();
		} else {
			/*
			 * 判断是哪种类型的请求(普通URL、AJAX)
			 * 如果是AJAX的输出一个login字符串
			 * 如果是普通页面直接跳转到登录页面
			*/
			String requestType = request.getHeader("X-Requested-With");
			if(requestType != null &amp;&amp; requestType.equals("XMLHttpRequest")) {
				response.getWriter().print(UserUtil.FORWARD_LOGIN);
				return null;
			} else {
				return mapping.findForward(UserUtil.FORWARD_LOGIN);
			}
		}
	}
}

基本功能就是检查用户是否已经登录

配置拦截路径


     class="org.springframework.aop.framework.autoproxy.BeanNameAutoProxyCreator">
    	 name="beanNames">
            >
               
            	>/field/*>
            	>/price/*>
            	>/locale/*>
            >
	    >
         name="interceptorNames">
            >
                >userAuthorityInterceptor> 
            >
        >
    >
 
    
	 id="userAuthorityInterceptor" class="net.yanhl.struts.authority.UserAuthorityInterceptor"/>

这里主要是配置拦截URL路径，进入ACTION之前会先进入UserAuthorityInterceptor判断用户是否登录

前端JS文件

这是我们要设置全局的一个ajaxSetup来控制所有ajax请求，代码如下：

$.ajaxSetup({
		cache : false,
		global : true,
		complete: function(req, status) {
			var reqText = req.responseText;
                        // 如果后台返回的是login字符串则可以跳转到登录页面
			if(reqText && reqText == 'login'){
				var topWinObj = getTopWin();
				topWinObj.location.href = '/exercise/login.html';
			}
		}
	});
/**
 * 获得最上层的window对象
 */
function getTopWin() {
	if(parent) {
		var tempParent = parent;
		while(true) {
			if(tempParent.parent) {
				if(tempParent.parent == tempParent) {
					break;
				}
				tempParent = tempParent.parent;
			} else {
				break;
			}
		}
		return tempParent;
	} else {
		return window;
	}
}

OK，启动服务测试，在没有登录的情况下打开主页面，执行一个保存动作发现直接跳转到了登录页面

本文只是说明一下实现的思路及主要代码，细节代码请读者自己实现，有问题请留言或者MSN，谢谢您的关注

声明:该日志由咖啡兔发表,你可以自由发表评论或转载到你的网站或博客。
转载请注明转自 what is the RIA? just it…||咖啡兔 ™
原始链接:http://www.wsria.cn/archives/588 | 简单实现在基于Java的AJAX环境下未登录自动跳转流程详解(spring代理struts的action)

IE中丢失session问题解决办法

咖啡兔 — Tue, 21 Apr 2009 01:39:25 +0000

前段时间在一个项目中为了避免用户的误操作所以点击一个按钮后使用了模态对话框来打开一个新的页面，顺便说一下后台语言为JAVA；昨天在测试的时候出现了问题，具体表现如下：

在IE中打开模态对话框然后在模态对话框中再打开一个标准窗口，在打开的新窗口中获取session信息得到的为null，很怪的事情是在有些IE6下面可以有的不可以，版本号我也对比过一样，把Internet选项页都重置了，但是在IE7下面都没有问题，然后我就想是不是没有打补丁，google了一下也没有发现什么补丁之类的；

最后询问了一下架构师阿强他看到后好像很激动的说我知道，在dialog中打开新窗口会丢失session的，豁然明白了，令人痛恨的IE6……

最后换成了window.open()没有问题了

希望有同此遭遇的网友能避免这个BUG

声明:该日志由咖啡兔发表,你可以自由发表评论或转载到你的网站或博客。
转载请注明转自 what is the RIA? just it…||咖啡兔 ™
原始链接:http://www.wsria.cn/archives/510 | IE中丢失session问题解决办法

6个你必须用到AJAX的地方与6个不必用到的地方

咖啡兔 — Sat, 04 Apr 2009 14:27:38 +0000

用ajax开发系统、网站确实好给客户带来了很大的方便，也降低了服务器的压力，但是我们在开发的时候不能盲目的使用ajax，不是所有的情况都适合使用ajax的，下面是从CSDN上面看到的，分享给大家。

下面是当前网页应用程序应该出现的地方：

基于表单的交互

表单是很慢的，非常慢。尝试编辑位于del.icio.us上面的一个书签？点击编辑链接打开一个编辑书签的表单页面，然后编辑你的内容并点击提交按钮等待整个提交过程结束，最后返回上一页并向下滚动到你刚才编辑的书签那里查看内容是否已经正确更改。那AJAX呢？点击编辑链接马上开始更改标签内容，点击提交按钮开始异步传输标签编辑的内容并立即看到更改后的内容而无需重载整个页面。

深层树状导航

总而言之，带有深层树状导航的应用程序通常是一个噩梦。在大多数情况中简单平直的拓扑结构以及搜索/标记可以很好的工作。但是如果一个应用程序真正使用深层树状导航，使用JavaScript来管理拓扑ui(user interface用户接口)，则使用Ajax懒加载深层数据可以降低服务器的负载。举例来说，为了阅读一个只有一行的结果来加载整个一个新页面是非常耗时的。

实时用户对用户通讯

在一个允许用户创建实时讨论的信息公告系统中，迫使用户一次又一次的更新完页面看到答复是非常愚蠢的。回复应该是实时的，用户不应被迫总是去痴迷于刷新操作。即使是gmail这个已经对以前像hotmail/yahoo mail的收件箱刷新，刷新收件箱标记的操作有所改进，也并没有充分的使用Ajax的功能来提示有新邮件到达。

投票、是否选择、等级评价

如果Ajax提交过程没有一个协调的UI提示是非常糟糕的，通过使用Ajax来提交一个调查或是否选择可以减少提交过程等待的痛苦。通过减少点击的等待时间，Ajax应用程序变得越来越有交互性-如果要用40秒来提交一个投票，除非非常在意的话大多数人会选择放弃。如果只花1秒呢，非常大比例的人会乐于参加投票的。（我在Netflix versus有2008张电影投票在IMDb.com有210张电影投票）

过滤和复杂数据操作

应用一个过滤、按日期排序、按日期和姓名排序、打开或关闭过滤器等等。任何一种高交换型操作应该交给JavaScript来处理而不是通过向服务器来提交一系列的请求。在查找或者操作大量数据的时候带来的视图上的改变最多不会超过30秒，Ajax真的使这些操作加速了。

普通录入时的提示/自动补齐

一些软件/JavaScript是擅长于帮助用户完成键入相同的文字或可以预测的文字的工作的。在del.icio.us 和 Gmail 中该功能是非常有益的，可以用来快速增加标记/email等。

对于一个频繁使用的应用程序诸如网页邮件客户端或博客阅读器来说，用户有充足的时间来学习如何使用新的UI概念但是他们却无法接受一个非常缓慢的反应速度。这种应用为Ajax变的更加普及起到了一个完美的杠杆作用。随着用户使用频率的增加，更多的Ajax部件应该加强用户的使用体验。

但是对于网页应用程序来说，把每件事甚至任何事都用JavaScript来实现也是没有意义的。Ajax只是针对一些特定的环境才能带来显著的帮助。在Ajax出现之前网页应用程序已经可以工作的很好了并且目前在网页开发中Ajax还存在着许多的缺陷和缺点。就算不从服务器端取得一个异步的信息数据流一个平直的html网页日志也可以工作的很好。对于文档或文档之间的跳转来说，老旧的纯HTML仍然是最好的选择。简单或很少使用的应用程序就算不用JavaScript同样可以很好的工作。

下面是一些不应该用到Ajax的地方：

简单的表单

就算表单是Ajax技术的最大受益人，一个简单内容的表单，或提交订货单，或一次性的很少用到的表单都不应该使用以Ajax驱动的表单提交机制。总的来说，如果一个表单不是很长用，或已经工作的很好，那么就算使用Ajax也没有什么帮助。

搜索

实时搜索带来的痛苦要远大于他带来的帮助。这就是为什么Google Suggest还处于beta测试而并没有放在主页上的原因。在Start.com Live.com上搜索的时候你是不能使用返回按钮来查看上一次搜索或返回上一页的。或许还没有人来完成这项工作，但是完成这个工作应该是很困难的至少是不太明知的或者会因此带来更多的麻烦。（译注：现在已经有很多开源的框架可以实现历史记录功能）

基本导航

总的来说，使用Ajax为一个基础的网站/程序做导航是一个可怕的念头。谁会把用来使自己的程序变的更好的时间花在编写代码模仿浏览器的行为上面？在基础页面中导航的操作中JavaScript是没有用的。

替换大量的信息

Ajax可以不用整页刷新来动态更新页面中改变的一小部分。但是如果一页上的大部分内容都需要更新，那为什么不从服务器那里获得一个新页面呢？

显示操作

虽然看上去Ajax是一个纯UI技术，其实不是这样的。他实际上是一个数据同步、操作、传输的技术。要想得到一个稳定的干净的网页程序，不使用 Ajax/JavaScript来直接完成用户接口是明智的。JavaScript可以分散分布并简单的操作XHTML/HTML DOM，根据CSS规则来决定如何让UI显示数据。

无用的网页小部件

滑块选择控件、拖拽控件、弹性控件（此处原文为bouncies，不知指为何物？）、鼠标样式、天气预报控件，这些小部件应该可以被更直接的控件代替或者为了整洁干脆整个去掉。为了选择一种颜色，也许滑块选择控件可以选择一个正确的阴影颜色，但是在一个商店中选择一个价格，使用滑块选择控件选到分这个单位对于用户来说有点过分。

声明:该日志由咖啡兔发表,你可以自由发表评论或转载到你的网站或博客。
转载请注明转自 what is the RIA? just it…||咖啡兔 ™
原始链接:http://www.wsria.cn/archives/505 | 6个你必须用到AJAX的地方与6个不必用到的地方

jQuery.plugin——强大的遮罩层(nyroModal)

咖啡兔 — Mon, 02 Mar 2009 13:57:43 +0000

在cssrain那里看到的，特转载过来分享给大家；效果做的很华丽，给用户柔和的感觉，比blockUI还要好

强大的遮罩层，它包括以下功能：

以ajax远程加载内容

以ajax加载内容

显示图片

对话框

iframe

等等……

演示：http://nyromodal.nyrodev.com/
下载：jquery.nyroModal-1.5.2.zip 共 1156 次

声明:该日志由咖啡兔发表,你可以自由发表评论或转载到你的网站或博客。
转载请注明转自 what is the RIA? just it…||咖啡兔 ™
原始链接:http://www.wsria.cn/archives/429 | jQuery.plugin——强大的遮罩层(nyroModal)

实例解析java + jQuery + json工作过程(获取JSON数据)

咖啡兔 — Sat, 28 Feb 2009 10:39:27 +0000

前天刚刚写的一篇关于《实例解析java + ajax(jQuery) + json工作过程(登录)》的文章引起了网友们的关注和好评，

自从本站的账务管理系统(个人版)开源以后很多网友询问系统的实现方式，我一一解释……，为此今天写文章详细讲解系统功能的实现细节。

以本站的开源项目账务管理系统的“债务人”模块为例子讲解

一、效果预览

债务人详细页面效果预览

二、实现方式

基本思想就是绑定列表中的人员名称触发事件，获得当前人员的ID发送ajax请求到后台，后台根据ID查询详细信息，返回JSON数据结果至前台，前台通过对话框组件显示人员详细

1、绑定click事件到列表的人员名称
在项目中的iouser/js/iouser.js文件中有这样一个方法：

/**
 * 点击名称弹出详细
 */
function regShowDetail() {
	$("span[name=iouid]").unbind('click').bind('click', function(){
		showDetail($(this).parent().parent().find('input[name=chk]').val());
	});
}

通过regShowDetail绑定了点击人员时执行showDetail的事件，

$(this).parent().parent().find('input[name=chk]').val()
//上面这句话就是获得列表左侧的复选框的value值以便传送给后台

下面介绍一下showDetail方法的功能实现：

 * 查看用户详细资料
 * @param {} userId 用户ID
 */
function showDetail(userId) {
	// 创建一个对话框组件
	var dialog = $.weeboxs.open('showDetail.html', {
		title: '正在加载用户信息……',
		contentType: 'ajax',
		width: 600,
		height: 350,
		animate: true,
		clickClose: false,
		type: 'wee',
		showOk: false,
		cancelBtnName: '关 闭',
		onopen: innerShowDetail
	});
 
	//内部函数，实现债务人详细信息的载入、设置值
	function innerShowDetail() {
		// 获得JSON格式的数据
		$.getJSON('load.do',{id : userId}, function(json) {
			// 根据key设置value
			for (key in json) {
				if(key == 'id'){
					$('#detailDiv #' + key).val(json[key]);
				} else {
					if(json[key] == ''){
						// 没有值设置为空
						$('#detailDiv #' + key).html('?');
					} else if(key == 'sex'){
						$('#detailDiv #' + key).html(json[key] == '0' ? '女' : '男');
					} else if(key == 'group'){
						if(json[key] != null) {
							$('#detailDiv #' + key).html(json[key]['groupName']);
						}
					} else {
						$('#detailDiv #' + key).html(json[key]);
					}
				}
			}
 
			//设置对话框标题和内容
			$('#detailDiv').removeAttr('class');
			dialog.setTitle('查看人员[' + json['userName'] + ']详细资料');
			dialog.setContent($('#detailDiv').html());
		});
	}
}

showDetail方法首先打开一个对话框组件加载一个静态的模板showDetail.html
- 文件中的ID都是根据信息点命名的，这样便于通过ID设置值
通过路径load.do 请求后台查询人员详细，后台处理类为net.yanhl.iouser.action.IOUserAction的loadUser()方法，代码请点击这里查看
- 怎么查询一个POJO对象就介绍了，重点说明怎么返回JSON格式的数据
- 这里还是使用java语言使用的JSON工具json-lib，关于json-lib的资料上篇文章也已介绍，这里不再重复；
```
// 获取一个Iouser对象，包含债务人的信息
Iouser user = (Iouser) getBaseManager().get(Iouser.class, iouserId);
 
//使用json-lib工具把一个POJO对象解析为一个JSON格式数据
JSONObject jsonObject = JSONObject.fromObject(user, config);
 
//向前台发送结果集
print(response, jsonObject.toString());
```
  最中返回的结果集如下：
  
  {
  “age” : 56,
  “companyAddress” : “32″,
  “companyName” : “未知”,
  “companyPhone” : “–”,
  “companyZip” : “”,
  “createDate” : null,
  “creatorId” : 1,
  “group” : {
  “childSize” : 0,
  “createDate” : {
  “date” : 27,
  “day” : 6,
  “hours” : 0,
  “minutes” : 0,
  “month” : 11,
  “nanos” : 0,
  “seconds” : 0,
  “time” : 1230307200000,
  “timezoneOffset” : -480,
  “year” : 108
  },
  “creatorId” : 1,
  “groupName” : “商务”,
  “id” : 33,
  “orderNum” : 0,
  “remark” : “”
  },
  “homeAddress” : “香港九龙”,
  “homePhone” : “”,
  “homeZip” : “”,
  “id” : 12,
  “mobilePhone” : “15856453456″,
  “orderNum” : 0,
  “remark” : “香港富豪”,
  “sex” : “1″,
  “userName” : “李嘉诚”
  }
前台获得了结果集之后就可以根据key获得value来设置详细页面的内容了，代码如下：
```
for (key in json) {
	if(key == 'id'){
		$('#detailDiv #' + key).val(json[key]);
	} else {
		$('#detailDiv #' + key).val(json[key]);
	}
}
```
至此就是我们刚刚看到的效果了，是不是很简单O(∩_∩)O~

附：

声明:该日志由咖啡兔发表,你可以自由发表评论或转载到你的网站或博客。
转载请注明转自 what is the RIA? just it…||咖啡兔 ™
原始链接:http://www.wsria.cn/archives/369 | 实例解析java + jQuery + json工作过程(获取JSON数据)

自己动手定制ajax loading图片

咖啡兔 — Thu, 26 Feb 2009 15:31:34 +0000

自己动手定制ajax 加载等待图片，点击图片打开网址

ajax loading图片定制

声明:该日志由咖啡兔发表,你可以自由发表评论或转载到你的网站或博客。
转载请注明转自 what is the RIA? just it…||咖啡兔 ™
原始链接:http://www.wsria.cn/archives/375 | 自己动手定制ajax loading图片

【推荐】jQuery.plugin——对话框jquery.weebox.js

咖啡兔 — Wed, 25 Feb 2009 15:18:27 +0000

强烈推荐对话框插件jquery.weebox.js，本站开源账务管理系统中使用的对话框组件，各种形式的对话框：确认、成功、警告、错误等

…………

如下图的右下角：

账务管理系统(个人版)演示

图的右下角的框架就是使用的此插件，对话框中的树是使用的jquery.simpletree.js，我把这两个插件合成了一下，效果还不错O(∩_∩)O~

小插曲：当初开发系统寻找了整个jQuery插件库，左后选择了这一款，后来有问题就联系了作者，没有想到插件作者竟然和我同在一个软件园区(上海天地软件园)，世界真是小呀。

废话不多说了

演示地址：http://www.wsria.cn/demo/weebox/demo/weebox.html

At jQuery：http://plugins.jquery.com/project/weebox

下载：jquery.weebox.rar 共 1044 次

声明:该日志由咖啡兔发表,你可以自由发表评论或转载到你的网站或博客。
转载请注明转自 what is the RIA? just it…||咖啡兔 ™
原始链接:http://www.wsria.cn/archives/342 | 【推荐】jQuery.plugin——对话框jquery.weebox.js

what is the RIA? just it…||咖啡兔前端技术

利用JavaScript获取窗口/Body的宽度和高度(让jqGrid自适应窗口大小)

功能函数：

使用方法：

相关文章

推荐精选3枚jQuery遮罩插件

第一枚：Fancybox

第二枚：FaceBox

第三枚：ColorBox

相关文章

为jstree添加双击事件切换[展开/收缩]功能

一、概述

二、分析源码

三、修改源码

四、结果演示

五、程序下载

相关文章

[转][推荐]15 个 JavaScript Web UI 库

相关文章

jqGrid查询中文乱码问题解决办法

相关文章

[转][推荐]jqGrid基础学习系列文章

相关文章

直逼 Flash 的流畅感：jQuery 运动特效展示

相关文章

Sexy Buttons（Web 按钮[图标]素材）

相关文章

推荐：基于jQuery开发仿Google Calendar(jQuery Week Calendar)

Live Demo

相关文章

推荐：2009 年度最佳 jQuery 插件

相关文章

推荐：正则表达式口诀及教程

相关文章

[推荐]改进的提示插件-jQuery.hiAlerts.1.0

相关文章

站点GBK编码下jQuery Ajax中文乱码解决方案

相关文章

简单实现在基于Java的AJAX环境下未登录自动跳转流程详解(spring代理struts的action)

struts的拦截器

配置拦截路径

前端JS文件

相关文章

IE中丢失session问题解决办法

相关文章

6个你必须用到AJAX的地方与6个不必用到的地方

相关文章

jQuery.plugin——强大的遮罩层(nyroModal)

相关文章

实例解析java + jQuery + json工作过程(获取JSON数据)

一、效果预览

二、实现方式

相关文章

自己动手定制ajax loading图片

相关文章

【推荐】jQuery.plugin——对话框jquery.weebox.js

相关文章