BlogJava-

生命科学领域的专业信息解决方案！

-随笔分类-Ajax

高性能网站建设-示例

Eric.Zhou — Thu, 31 Mar 2011 05:29:00 GMT

Eric.Zhou 2011-03-31 13:29 发表评论

jQuery获取重名input的数组值

Eric.Zhou — Tue, 29 Mar 2011 01:22:00 GMT

jQuery获取重名input的数组值：
var usernames = new Array();
var i = 0;
$("input[name='username']").each(
            function(){
                usernames[i] = $(this).val();
                i++;
            }
)

Eric.Zhou 2011-03-29 09:22 发表评论

jQuery的Validation插件[转载]

Eric.Zhou — Mon, 25 Jan 2010 13:04:00 GMT

原文地址: http://blog.csdn.net/ziwen00/archive/2009/09/14/4551346.aspx

jQuery的Validation插件

最新最全的jQuery插件可以从jQuery的官方网站上面获得,jQuery下载验证插件的地址是http://plugins.jquery.com/在打开页面的左上角’Search’框中输入validation就可以找到我们想要的验证插件了,在http://plugins.jquery.com/project/validate下,我们找到了目前最新的版本(2009年6月17日)官方推出的1.5.5版的validate.js.

Validation插件式历史悠久的jQuery插件之一,经过了全球各种项目的验证,得到了很多WEB开发者的好评,作为一个表单验证的解决方案,Validation有很多的优点,比如:内置的验证规则,可以自定义验证规则,简单而且强大的验证信息提示,实时进行验证的功能.都可以令前台开发变得非常的简单.Validation具有内置的必填,数字,Email,URL等多种验证规则.实时验证方面,通过blur和keyup时间来触发验证规则,可以达到实时验证的目的.

下面是一个简单的例子,HTML和jQuery代码如下:

jQuery之验证插件

一个简单的带有提示的评论例子

姓名*

电子邮件*

网址*

你的评论*

上面的代码实现了如下的验证:

1) 对”姓名”的必填和长度至少为2为的验证

2) 对”电子邮件”的验证和是否为E-mail格式的验证

3) 对”网址”是否为url的验证

4) 对”你的评论”的必填验证

5) 提供了在用户输入的时候对长度的实时验证

只需要完成如下几步,就可以将一个普通的表单变成一个可以进行验证的表单:

1) 引入jQuery库和Validation插件

view plaincopy to clipboardprint?

2) 确定是哪一个表单需要被验

view plaincopy to clipboardprint?
$(document).ready(function(){

//确定哪一个表单需要进行验证

$('#commentForm').validate();

});
$(document).ready(function(){

//确定哪一个表单需要进行验证

$('#commentForm').validate();

});

3) 针对不同的字段,进行验证规则的编码,设置字段相应的属性

view plaincopy to clipboardprint?

 <input id='cusername' name='username' size='25' class='required' minlength='2'/> <input id='cemail' name='email' size='25' class='required email'/> <textarea id='ccomment' name='comment' cols='25' class='required'/> 将所有的验证规则写到class属性里: 在实际的开发中,有的时候将验证规则写到class=’required email’有的时候写到minlength=’2’里面,这样非常的不方便,有没有一种方式可以将所有的验证规则放到一个地方去呢?这个答案是肯定的.jQuery充分考虑到了这一点,我们可以通过另外一个JavaScript库来将所有的验证规则放到一个class文件当中去.这样就大大方面了对验证规则的管理. 1) 在下载的\jquery-validate\lib文件夹下面找到jquery.metadata.js.放到项目当中,然后引入该jQuery插件.jquery.metadate.js是一个支持固定格式解析的jQuery插件,Validation插件将其很好的融合到验证规则编码当中. view plaincopy to clipboardprint? <mce:script type="text/javascript" src="jquery.metadata.js" mce_src="jquery.metadata.js"></mce:script> <mce:script type="text/javascript" src="jquery.metadata.js" mce_src="jquery.metadata.js"></mce:script> 2) 改变调用的验证方法 view plaincopy to clipboardprint? <mce:script type='text/javascript'></mce:script> <mce:script type='text/javascript'></mce:script> 3) 将所有的验证规则都通过类似{validate:{required:true,email:true}}的形式,写到class属性当中,详细的HTML代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery之验证插件</title> <script type='text/javascript' src='jquery-1.3.2.js'></script>  <script type='text/javascript' src='jquery.validate.js'></script>  <script type="text/javascript" src='jquery.metadata.js'></script> <style type='text/css'> *{font-family:Verdana;font-size:96%;} label.error{float:none;color:red;padding-left:.5em;vertical-align:top;} p{clear:both;} .submit{margin-left:12em;} em{font-weight:bold;vertical-align:top;} </style> <script type='text/javascript'> $(document).ready(function(){ //确定那个表单进行验证(改变调用的验证方法) $('#commentForm').validate({meta: "validate"}); }); </script> </head> <body> <form class='cmxform' id='commentForm' method='get' action='#'> <fieldset> <legend>一个简单的带有提示的评论例子</legend> <label for='cusername'>姓名</label>* <input id='cusername' name='username' size='25' class='{validate:{required:true,minlength:2}}'/> <label for='cemail'>电子邮件</label>* <input id='cemail' name='email' size='25' class='{validate:{required:true,email:true}}'/> <label for='curl'>网址</label>* <input id='curl' name='url' size='25' class='{validate:{url:true}}' value=''/> <label for='ccomment'>你的评论</label>* <textarea id='ccomment' name='comment' cols='25' class='{validate:{required:true}}'>

将验证行为和HTML结构完全脱离的一种验证写法:

上面的两种写法,一种是通过给标签添加属性来完成验证,一种是通过jquery.metadate.js的帮助将所有的验证规则添加到class属性中,都没有符合jQuery提倡的”行为和操作分离”的一个原则,下面的方法就补足了这个缺陷,可以让HTML结构和验证规则很好的分离出来

HTML代码如下:

jQuery之验证插件

在这种”HTML和验证完全分离”的验证规则写法的步骤如下:

1) 在$(“#ccommentForm”).validate()方法中增加rules属性

2) 通过每个字段的name属性来匹配验证规则

3) 定义验证规则,比如required:true,email:true,minlength:2等等.

将默认的英文验证信息变成中文:

validation插件默认的验证信息是英文的,要想将validation验证插件给出的验证信息变成中文就可以到jquery-validate\localization文件夹下面找到messages_cn.js文件,这个就是中文的验证信息库,我们只需要在代码中将这个文件导入就可以实现中文验证信息的输出了.在jquery-validate\localization这个文件夹下面,还有很多种语言,我们可以选择适当的语言引入到我们的项目当中,实现提示信息的本地化.

view plaincopy to clipboardprint?

改变千篇一律的验证信息:

validaion验证插件可以非常方便的进行自定义验证规则,这样可以用来代替千篇一律的验证信息,具体修改好的HTML代码如下:

jQuery之验证插件

一个简单的带有提示的评论例子

姓名*

class="{validate:{required:true,minlength:2,messages:{

required:'姓名是必须要输入的',

minlength:'请输入不少于两个字符的姓名'}}}"

size='25' />

电子邮件*

class="{validate:{required:true,email:true,messages:{

required:'邮箱是必须要输入的',

email:'请输入符合格式的Email地址'}}}"

size='25' />

网址*

class="{validate:{url:true,messages:{

url:'您的URL地址的输入不符合要求'}}}"

size='25' value=''/>

你的评论*

class="{validate:{ required:true,messages:{required:'多少也写点评论哦'}}}" cols='25'>

具体来说,上面的代码就是在class的属性中增加了类似messages:{required:’’,email:’’}形式的一块代码,这样就可以显示我们自定义的验证信息了.

自己来定义表单验证的业务规则:

通常在开发项目中,验证规则与实际的业务逻辑是息息相关的,一个好的验证插件必须要支持自定义验证机制,当然jQuery就提供了多种机制来满足用户的业务需要.

我们添加以下代码到上面的HTML代码中,方便进行验证码的功能实现.

view plaincopy to clipboardprint?

验证码

=7+9

验证码

=7+9

为了实现”验证码”的功能,我们需要以下几个步骤:

1) 自定义一个验证规则

view plaincopy to clipboardprint?
$.validator.addMethod(

    "formula",                       //验证方法的名称

    function(value,element,param){   //验证规则

       return value==eval(param);

       },

      '请输入正确的结果'                //提示验证信息

);
$.validator.addMethod(

"formula", //验证方法的名称

function(value,element,param){ //验证规则

return value==eval(param);

'请输入正确的结果' //提示验证信息

);

2) 在代码中引用以上验证规则

view plaincopy to clipboardprint?
$('#commentForm').validate({

    rules:{

       username:{

           required:true,

           minlength:3

       },

       email:{

           required:true,

           email:true

       },

       url:"url",

       comment:"required",

       valcode:{formula:"7+9"}

    }

})

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/ziwen00/archive/2009/09/14/4551346.aspx

Eric.Zhou 2010-01-25 21:04 发表评论

Extjs－displayfield格式化日期

Eric.Zhou — Mon, 30 Nov 2009 14:25:00 GMT

Ext.override(Ext.form.DisplayField, {
    getValue : function(){
        return this.value;
    },
    setValue : function(v){
        this.value = v;
        this.setRawValue(this.formatValue(v));
        return this;
    },
    formatValue : function(v){
    if(this.dateFormat && Ext.isDate(v)){
      return v.dateFormat(this.dateFormat);
    }
    if(this.numberFormat && typeof v == 'number'){
      return Ext.util.Format.number(v, this.numberFormat);
    }
    return v;
    }
});

items:[{
     fieldLabel:'申购日期',
     xtype : 'displayfield',
     name : 'orderDate',
     formatValue: function(value){return new Date(value).format("Y-m-d");}
    }]

Eric.Zhou 2009-11-30 22:25 发表评论

ExtJS的xtype列表

Eric.Zhou — Fri, 20 Nov 2009 01:04:00 GMT

原文地址：http://www.blogjava.net/sealyu/archive/2009/11/18/302849.html

xtype Class

基本组件：

box Ext.BoxComponent 具有边框属性的组件

button Ext.Button 按钮

colorpalette Ext.ColorPalette 调色板

component Ext.Component 组件

container Ext.Container 容器

cycle Ext.CycleButton

dataview Ext.DataView 数据显示视图

datepicker Ext.DatePicker 日期选择面板

editor Ext.Editor 编辑器

editorgrid Ext.grid.EditorGridPanel 可编辑的表格

grid Ext.grid.GridPanel 表格

paging Ext.PagingToolbar 工具栏中的间隔

panel Ext.Panel 面板

progress Ext.ProgressBar 进度条

splitbutton Ext.SplitButton 可分裂的按钮

tabpanel Ext.TabPanel 选项面板

treepanel Ext.tree.TreePanel 树

viewport Ext.ViewPort 视图

window Ext.Window 窗口

工具栏组件：

toolbar Ext.Toolbar 工具栏

tbbutton Ext.Toolbar.Button 按钮

tbfill Ext.Toolbar.Fill 文件

tbitem Ext.Toolbar.Item 工具条项目

tbseparator Ext.Toolbar.Separator 工具栏分隔符

tbspacer Ext.Toolbar.Spacer 工具栏空白

tbsplit Ext.Toolbar.SplitButton 工具栏分隔按钮

tbtext Ext.Toolbar.TextItem 工具栏文本项

表单及字段组件：

form Ext.FormPanel Form 面板

checkbox Ext.form.Checkbox checkbox 录入框

combo Ext.form.ComboBox combo 选择项

datefield Ext.form.DateField 日期选择项

field Ext.form.Field 表单字段

fieldset Ext.form.FieldSet 表单字段组

hidden Ext.form.Hidden 表单隐藏域

htmleditor Ext.form.HtmlEditor html 编辑器

numberfield Ext.form.NumberField 数字编辑器

radio Ext.form.Radio 单选按钮

textarea Ext.form.TextArea 区域文本框

textfield Ext.form.TextField 表单文本框

timefield Ext.form.TimeField 时间录入项

trigger Ext.form.TriggerField 触发录入项

Eric.Zhou 2009-11-20 09:04 发表评论

jquery 中对checkbox的一些操作

Eric.Zhou — Fri, 05 Jun 2009 01:56:00 GMT

设置单个checkbox的值:
$('#checkall').attr('checked', 'true'); 选择
$('#checkall').attr('checked', ''); 不选

选择多个checkbox:
$('#suppliersTable input[@type=checkbox]').trigger('click');

选择所有选中的checkbox:
$('#suppliersTable input[@type=checkbox][@checked="true"]');

选择所有未选中的checkbox
$('#suppliersTable input[@type=checkbox][@checked=""]');

触发所有未选中的checkbox的onclick事件:
$('#suppliersTable input[@type=checkbox][@checked=""]').trigger('click');

计算所有选中的checkbox个数:
$('#suppliersTable tbody input[@type=checkbox][@checked="true"]').length;

Eric.Zhou 2009-06-05 09:56 发表评论

Jmesa中加入checkbox列和导出功能

Eric.Zhou — Thu, 04 Jun 2009 09:06:00 GMT

加入checkbox的步骤如下:
需要在htmlRow标签中加入 uniqueProperty属性值, 并且修改tableFacade标签为可编辑的
         id="suppliersTable"
         items="${suppliers}"
         maxRows="10"
         maxRowsIncrements="10,20,30"
         exportTypes="excel"
         editable="true"
         var="supplier">

            uniqueProperty="id">

然后修改checkbox的渲染列中的渲染器
worksheetEditor="org.jmesa.worksheet.editor.CheckboxWorksheetEditor"/>
这样checkbox就可以使用了.
下面实现导出功能, 首先如上代码, 需要设置 exportTypes="excel", 这里设置导出excel格式文件.
对应导出还需要增加一个onInvokeExportAction,
function onInvokeExportAction(id) {
       var parameterString = createParameterStringForLimit(id);
       window.open(path+'/supplier/export.do?' + parameterString);
}

下面来看看后来代码如果处理被选择的行:
@RequestMapping
public void export(HttpServletRequest request, HttpServletResponse response) {
  WebContext webContext = new HttpServletRequestWebContext(request);
  WorksheetState state = new SessionWorksheetState("suppliersTable", webContext);
  Worksheet worksheet = state.retrieveWorksheet();
  Collection rows = worksheet.getRows();
  List ids = new ArrayList();
  for (WorksheetRow row : rows) {
       ids .add(Long.parseLong(row.getUniqueProperty().getValue()));
  }
  List suppliers = new ArrayList();
  if (!ids.isEmpty()) {
   suppliers = cimssupplierService.getSuppliersByIds(ids);
  }
  ExcelUtil.writeSuppliers(response, suppliers);
}
主要是绿色代码如果获取页面上的一些信息.

Eric.Zhou 2009-06-04 17:06 发表评论

ajax请求时的缓存的问题[转载]

Eric.Zhou — Wed, 03 Jun 2009 02:33:00 GMT

ajax请求同一个url地址时，如果发现url地址没有变而缓存里有就会直接去取值，不会再去请求服务器。这种情况会在不同的机器不同的IE上各有不同，解决的方式是在ajax请求的地址里加上一个随机的参数例如(jQuery)：

$.getJSON(path+"/library/structuresView.do?num=1&structCount="+customColumnNum*rowNum+"&datetime="+(new Date()).getTime(), "", function(json){alert(json)}) $.ajax({url: path+"/library/structuresPropertyPreview.do?fetch=all&random="+Math.random(), type: 'GET', success: function(data){alert(data)} });

只要ajax每次请求的地址不一样就可以的。

原文地址:http://yaofeng911.javaeye.com/blog/379705

Eric.Zhou 2009-06-03 10:33 发表评论

防止jQuery Load使用缓存的方法[转载]

Eric.Zhou — Mon, 23 Mar 2009 05:50:00 GMT

缓存这东西，在一定程度上加快了页面的装载，但是也常常给我们带来麻烦。我在上篇文章里简单介绍了jQuery中Load方法的使用。在实际运用中，我们可能会碰到浏览器缓存的问题。比如我就在IE7里碰到这个问题。

jQuery Load样本代码：

$(document).ready(function(){

  $("#labels").load("/blog/categories/labels.html");

  //在页面装载时，在ID为#labels的DOM元素里插入labels.html的内容。

});

当我更新了labels.html以后，在IE7里load方法仍旧在使用旧的labels.html，就算我按刷新键也不管用。好在jQuery提供一个防止ajax使用缓存的方法，把下面的语句加在head的javascript文件里，就可以解决问题。

$.ajaxSetup ({

    cache: false //关闭AJAX相应的缓存

});

此外我再介绍几种方法解决缓存的方法。注意：我没有在jQuery load的问题上测试过，这些方法仅供参考！

1.更改文件名，比如把labels.html改成lables_new.html，但是这是没有办法的办法，一般没有人这么做。

2.在labels.html后加上特定时间，比如lables.html?20081116。在实际工作中，在我更新css/javascript文件后，我都是用这种办法来防止文件被缓存。

3.在labels.html文件的顶部加入以下声明：

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

<META HTTP-EQUIV="Expires" CONTENT="-1">

4.load函数不仅可以调用HTML，也可以调用script，比如labels.php，可以在php文件里使用header函数：

php

header("Cache-Control: no-cache, must-revalidate");

?>

Eric.Zhou 2009-03-23 13:50 发表评论

Jmesa中处理Map的List对象

Eric.Zhou — Thu, 19 Mar 2009 09:43:00 GMT

目前需求, 客户上传excel文件, 有列名, 列名不固定, 想预览数据, 使用Jmesa做table, 有两种实现方法. 第一种使用动态类, 封装map对象. 第二种是一种巧妙的方法. 下面先介绍第一种方法:
使用动态类:

package com.founder.cst.action;

import Java.util.ArrayList;
import Java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.beanutils.BasicDynaBean;
import org.apache.commons.beanutils.BasicDynaClass;
import org.apache.commons.beanutils.DynaBean;
import org.apache.commons.beanutils.DynaClass;
import org.apache.commons.beanutils.DynaProperty;
import org.jmesa.core.filter.MatcherKey;
import org.jmesa.facade.TableFacade;
import org.jmesa.facade.TableFacadeFactory;
import org.jmesa.view.html.component.HtmlTable;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;

import com.founder.cst.common.StringFilterMatcher;

@Controller
@RequestMapping
public class DynaController {

@RequestMapping
public String books(final HttpServletRequest request, HttpServletResponse response, ModelMap model){

  DynaClass bookClass = createBasicDynaClass();
  try {
   List results = new ArrayList();
   DynaBean book11 = bookClass.newInstance();
   book11.set("id", "1");
   book11.set("name", "Spring");
   book11.set("price", "18.29");
   results.add(book11);
   DynaBean book22 = bookClass.newInstance();
   book22.set("id", "2");
   book22.set("name", "Hibernate");
   book22.set("price", "12.29");
   results.add(book22);
   DynaBean book33 = bookClass.newInstance();
   book33.set("id", "3");
   book33.set("name", "Python");
   book33.set("price", "17.32");
   results.add(book33);

   TableFacade tableFacade = TableFacadeFactory.createTableFacade("booksTable", request);

   tableFacade.setColumnProperties("id", "name", "price");
   tableFacade.setMaxRows(10);
   tableFacade.setMaxRowsIncrements(10, 20, 30);
   tableFacade.setItems(results);
   HtmlTable table = (HtmlTable) tableFacade.getTable();
   table.getTableRenderer().setWidth("558px");
   table.getRow().setUniqueProperty("id");
   String html = tableFacade.render();
   model.addAttribute("html", html);
  } catch (IllegalAccessException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  } catch (InstantiationException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
  return "books";
}

public DynaClass createBasicDynaClass() {
  DynaClass dynaClass = null;
        //create basic field for dynaClass
        DynaProperty[] dynaProps = new DynaProperty[3];
        dynaProps[0] = new DynaProperty("id");
        dynaProps[1] = new DynaProperty("name", String.class);
        dynaProps[2] = new DynaProperty("price", String.class);
        //create map filed for dynaClass
        dynaClass = new BasicDynaClass("first", BasicDynaBean.class, dynaProps);
        return dynaClass;
    }

}

下面第二种:
@RequestMapping
public String bookslist(final HttpServletRequest request, HttpServletResponse response, ModelMap model){
  List> books = new ArrayList>();
  Map book1 = new HashMap();
  book1.put("id", "1");
  book1.put("name", "Spring");
  book1.put("price", "18.29");
  books.add(book1);

  Map book2 = new HashMap();
  book2.put("id", "2");
  book2.put("name", "Hibernate");
  book2.put("price", "28.98");
  books.add(book2);

  Map book3 = new HashMap();
  book3.put("id", "3");
  book3.put("name", "Python");
  book3.put("price", "38.22");
  books.add(book3);

  model.addAttribute("books", books);
  return "booklist";
}

页面为:

     id="booksTable"
     items="${books}"
     maxRows="10"
     maxRowsIncrements="10,20,30"
     var="book">



       ${b.key}" title="${b.key}" filterable="false"/>





这里注意property中的值.

今天查看源码, 和昨天想象一样, jmesa在渲染单元格的时候, 分两种, 一种就是map类型, 使用get(key)来取值, 另一种就是普通的javabean对象, 使用getPropertyName()取值渲染.

/*
* Copyright 2004 original author or authors.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package org.jmesa.util;

import Java.util.Collection;
import Java.util.Map;

import org.apache.commons.beanutils.PropertyUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

/**
* General utilities to process the Collecton of Beans or the Collection of
* Maps. Most methods wrap or add value to the commons Beanutils.
*
* @since 2.1
* @author Jeff Johnston
*/
public class ItemUtils {

private static final Logger logger = LoggerFactory.getLogger(ItemUtils.class);
public static final String JMESA_ITEM = "jmesa-item";

    private ItemUtils() {
        // hide constructor
    }

    /**
     * Get the value from the Bean or Map by property.
     *
     * @param item The Bean or Map.
     * @param property The Bean attribute or Map key.
     * @return The value from the Bean or Map.
     */
    public static Object getItemValue(Object item, String property) {
        Object itemValue = null;

        try {
            if (item instanceof Map) {
                itemValue = ((Map) item).get(property);
                if (itemValue != null) {
                    return itemValue;
                }

                // ports such as the tags will store the original bean
                Object bean = ((Map) item).get(JMESA_ITEM);                if (bean == null) {
                    logger.debug("the map does not have property " + property);
                    return null;
                }

                itemValue = getItemValue(bean, property);
            } else {
                itemValue = PropertyUtils.getProperty(item, property);
            }
        } catch (Exception e) {
            logger.debug("item class " + item.getClass().getName() + " does not have property " + property);
        }

return itemValue;
}

    /**
     * Get the Class for the property.
     *
     * @param items The Collection of Beans or Maps.
     * @param property The Bean attribute or Map key.
     * @return The Class for the property.
     */
    public static Class getPropertyClassType(Collection items, String property)
        throws Exception {

Object item = items.iterator().next();

        if (item instanceof Map) {
            for (Object object : items) {
                Map map = (Map) object;
                Object val = map.get(property);

                if (val == null) {
                    continue;
                }

                return val.getClass();
            }
        }

return PropertyUtils.getPropertyType(item, property);
}
}

Eric.Zhou 2009-03-19 17:43 发表评论

Jmesa中让Toolbar和Statusbar在同一行

Eric.Zhou — Tue, 17 Mar 2009 14:32:00 GMT

需要statusbar和toolbar在同一行. 这里需要自定义toolbar

package com.founder.cst.common;

import Java.util.List;

import org.jmesa.view.ViewUtils;
import org.jmesa.view.component.Row;
import org.jmesa.view.html.HtmlBuilder;
import org.jmesa.view.html.HtmlSnippetsImpl;
import org.jmesa.view.html.component.HtmlTable;
import org.jmesa.view.html.toolbar.AbstractToolbar;
import org.jmesa.view.html.toolbar.MaxRowsItem;
import org.jmesa.view.html.toolbar.ToolbarItem;
import org.jmesa.view.html.toolbar.ToolbarItemType;

public class CustomToolbar extends AbstractToolbar {
@Override
public String render() {
  //addToolbarItem(ToolbarItemType.PAGE_NUMBER_ITEMS);
  addToolbarItem(ToolbarItemType.FIRST_PAGE_ITEM);
  addToolbarItem(ToolbarItemType.PREV_PAGE_ITEM);
  addToolbarItem(ToolbarItemType.NEXT_PAGE_ITEM);
  addToolbarItem(ToolbarItemType.LAST_PAGE_ITEM);
  addToolbarItem(ToolbarItemType.SEPARATOR);
  MaxRowsItem maxRowsItem = (MaxRowsItem) addToolbarItem(ToolbarItemType.MAX_ROWS_ITEM);
  if (getMaxRowsIncrements() != null) {
   maxRowsItem.setIncrements(getMaxRowsIncrements());
  }
  boolean exportable = ViewUtils.isExportable(getExportTypes());
  if (exportable) {
   addToolbarItem(ToolbarItemType.SEPARATOR);
   addExportToolbarItems(getExportTypes());
  }
  Row row = getTable().getRow();
  List columns = row.getColumns();
  boolean filterable = ViewUtils.isFilterable(columns);
  if (filterable) {
   addToolbarItem(ToolbarItemType.SEPARATOR);
   addToolbarItem(ToolbarItemType.FILTER_ITEM);
   addToolbarItem(ToolbarItemType.CLEAR_ITEM);
  }

  HtmlSnippetsImpl statusBar = new HtmlSnippetsImpl((HtmlTable)this.getTable(), this, this.getCoreContext());
  // super render
  HtmlBuilder html = new HtmlBuilder();

        html.table(2).border("0").cellpadding("0").cellspacing("1").close();

        html.tr(3).close();
        html.td(4).close();
        html.append(statusBar.statusBarText());
        html.tdEnd();
        for (ToolbarItem item : this.getToolbarItems()) {
            html.td(4).close();
            html.append(item.getToolbarItemRenderer().render());
            html.tdEnd();
        }

html.trEnd(3);

        html.tableEnd(2);
        html.newline();
        html.tabs(2);

return html.toString();
}
}

Eric.Zhou 2009-03-17 22:32 发表评论

Jmesa- create a custom view

Eric.Zhou — Wed, 11 Mar 2009 07:15:00 GMT

If you want to display a table without the pagination you need to set the max rows to the total rows, and then create a custom view to remove the toolbar. In addition, for this example, lets say that we also want to remove the statusbar? That makes sense as it will not offer any pagination information anyway.

First we need to set the max rows to the total amount of items that we want to display.

tableFacade.setMaxRows(items.size());

Then we need to implement a custom view. If you compare this view to the HtmlView in the API you can see that I just removed two lines of code. One to remove the toolbar and one for the status bar.

public class CustomView  extends AbstractHtmlView {

    public Object render() {

        HtmlSnippets snippets = getHtmlSnippets();



        HtmlBuilder html = new HtmlBuilder();



        html.append(snippets.themeStart());



        html.append(snippets.tableStart());



        html.append(snippets.theadStart());



        html.append(snippets.filter());



        html.append(snippets.header());



        html.append(snippets.theadEnd());



        html.append(snippets.tbodyStart());



        html.append(snippets.body());



        html.append(snippets.tbodyEnd());



        html.append(snippets.footer());



        html.append(snippets.tableEnd());



        html.append(snippets.themeEnd());



        html.append(snippets.initJavascriptLimit());



        return html.toString();

    }

}

Lastly, just plug your custom view into the TableFacade.

API

tableFacade.setView(new CustomView());

Jmesa中的Limit使用

Eric.Zhou — Fri, 06 Mar 2009 13:39:00 GMT

TableFacade tableFacade = TableFacadeFactory.createTableFacade("structuresTable", request);
  tableFacade.setColumnProperties("chkbox", "id", "formula", "molTable.molName", "molTable.cas", "mdlNumber", "molWeight");
  tableFacade.setEditable(true);
  tableFacade.setMaxRows(10);
  tableFacade.setMaxRowsIncrements(10, 20, 30);

  tableFacade.setTotalRows(cd_ids.size());

  Limit limit = tableFacade.getLimit();
  int rowStart = limit.getRowSelect().getRowStart();
  int rowEnd = limit.getRowSelect().getRowEnd();

  List curResultIds = cd_ids.subList(rowStart, rowEnd);

  List curStructures   = structureService.getACD1StructuresByIds(curResultIds);

  tableFacade.setItems(curStructures);

  HtmlTable table = (HtmlTable) tableFacade.getTable();
  table.getTableRenderer().setWidth("1000px");
  table.getRow().setUniqueProperty("id");

  HtmlColumn smilesColumn = table.getRow().getColumn("id");
  smilesColumn.setEditable(false);
  smilesColumn.setTitle(messageSource.getMessage("chemical.structure.title", null, request.getLocale()));

  HtmlColumn formulaColumn = table.getRow().getColumn("formula");
  formulaColumn.setEditable(false);
  formulaColumn.setTitle(messageSource.getMessage("chemical.formula.title", null, request.getLocale()));

  HtmlColumn molNameColumn = table.getRow().getColumn("molTable.molName");
  molNameColumn.setEditable(false);
  molNameColumn.setTitle(messageSource.getMessage("chemical.name.title", null, request.getLocale()));

  HtmlColumn casColumn = table.getRow().getColumn("molTable.cas");
  casColumn.setEditable(false);
  casColumn.setTitle(messageSource.getMessage("chemical.cas.title", null, request.getLocale()));

  HtmlColumn mdlNumberColumn = table.getRow().getColumn("mdlNumber");
  mdlNumberColumn.setEditable(false);
  mdlNumberColumn.setTitle(messageSource.getMessage("chemical.mdl.title", null, request.getLocale()));

  HtmlColumn molWeightColumn = table.getRow().getColumn("molWeight");
  molWeightColumn.setEditable(false);
  molWeightColumn.setTitle(messageSource.getMessage("chemical.mw.title", null, request.getLocale()));

  //for smiles column

  smilesColumn.setFilterable(false);
  smilesColumn.setSortable(false);
  smilesColumn.getCellRenderer().setCellEditor(new CellEditor() {
            public Object getValue(Object item, String property, int rowcount) {
                Object value = new BasicCellEditor().getValue(item, property, rowcount);
                String bgcolor = (rowcount % 2 == 0) ? "e3e3e3" : "ffffff";
                HtmlBuilder html = new HtmlBuilder();
                html.append("");
                html.aEnd();
                return html.toString();
            }
        });

  //for checkbox column
  HtmlColumn chkbox = table.getRow().getColumn("chkbox");
  chkbox.getCellRenderer().setWorksheetEditor(new CheckboxWorksheetEditor());
  chkbox.setTitle(" ");
  chkbox.setFilterable(false);
  chkbox.setSortable(false);

  //render
  String html = tableFacade.render();

Eric.Zhou 2009-03-06 21:39 发表评论

Jmesa2.4.1小例子

Eric.Zhou — Wed, 04 Mar 2009 14:21:00 GMT

action层返回一个对象的List格式，比如如下代码：
List structures = structureService.getAllStructures();

在JSP页面中代码为：
<%@ page language="Java" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="/WEB-INF/tld/jmesa.tld" prefix="jmesa"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>

 <spring:message code="chemical.cst" />

Eric.Zhou 2009-03-04 22:21 发表评论

jQuery中一些不常用的方法属性【转载】

Eric.Zhou — Tue, 03 Mar 2009 13:24:00 GMT

index(subject)

搜索与参数表示的对象匹配的元素，并返回相应元素的索引值。如果找到了匹配的元素，从0开始返回；如果没有找到匹配的元素，返回-1。

data()

data(elem)：为页面对象添加唯一标识。

data(name, value)：将数据保存在元素的一个key里面。$("#box").data("shape","rectangle")。

data(name)：获取值。$("#box").data("shape") //"rectangle"。

removeData(name)：删除通过data()方法赋予的值。$("#box").removeData("shape")。

attr(key,fn)

为所有匹配的元素设置一个计算的属性值。不提供值，而是提供一个函数，由这个函数计算的值作为属性值。

hasClass(class)

检查当前的元素是否含有某个特定的类，如果有，则返回true。这其实就是is("." + class)。

val(val)

设置每一个匹配元素的值。在 jQuery 1.2, 这也可以为select元件赋值。参数val(String)要设置的值。

check,select,radio等都能使用为之赋值。参数val(Array)用于 check/select 的值。

slice(start,[end])

选取一个匹配的子集。

add(expr)

把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。

参数expr(String, DOMElement, Array)用于匹配元素并添加的表达式字符串，或者用于动态生成的HTML代码，如果是一个字符串数组则返回多个元素。

nextAll([expr])

查找当前元素之后的所有元素。

prev([expr])

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

prevAll([expr])

查找当前元素之前所有的同辈元素。

andSelf()

将先前所选的加入当前元素中。

replaceWith(content)

将所有匹配的元素替换成指定的HTML或DOM元素。参数content(String, Element, jQuery):用于将匹配元素替换掉的内容。

replaceAll(selector)

用匹配的元素替换掉所有 selector匹配到的元素。参数selector(选择器)用于查找所要被替换的元素。

clone([true])

克隆匹配的DOM元素并且选中这些克隆的副本。设置参数[true]是对象的所有事件处理一并克隆。

offset()

获取匹配元素在当前视口的相对偏移。返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。

返回Object{top,left}。

one(type,[data],fn)

为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。

toggle(fn,fn2,[fn3,fn4,...])

每次点击时切换要调用的函数。函数数目可以是多个。

stop()

停止所有在指定元素上正在运行的动画。如果队列中有等待执行的动画，他们将被马上执行。

queue([callback/queue])

queue：返回指向第一个匹配元素的队列(将是一个函数数组。

queue(callback)：在匹配的元素的动画队列中添加一个函数。

queue(queue)：将匹配元素的动画队列用新的一个队列来代替(函数数组)。

dequeue()

从动画队列中移除一个队列函数。

jQuery.browser.version

浏览器渲染引擎版本号。

jQuery.boxModel

当前页面中浏览器是否使用标准盒模型渲染页面。

PS:以前很少用这些方法属性，很多还不知道。这跟中文CHM版jQuery API不无关系，那本广为流传的中文版手册已经过时，建议直接阅读官方文档。

Eric.Zhou 2009-03-03 21:24 发表评论

连动出发事件在jQuery中是如此简单与优美

Eric.Zhou — Tue, 03 Mar 2009 13:15:00 GMT

当页面加载完需要对一些数据进行操作时候，我这里当取完供应商列表，需要默认选择第一个供应商，然后再去第一个供应商相关信息。
if ($('#suppliertable').find('tr:eq(0)') != undefined) {
$('#suppliertable').find('tr:eq(0)').trigger('click');
}

上面为table格式形式的列表。但如果为select元素呢，比如做级联下拉菜单则可以这样写：
if ($('#chemical_regn').get(0) != undefined) {
$('#chemical_regn').get(0).options[0].selected = true; // $('#chemical_regn').[0].selectedIndex = 0;
$('#chemical_regn').trigger('click');
}

Eric.Zhou 2009-03-03 21:15 发表评论

jQuery基础教程笔记

Eric.Zhou — Sat, 14 Feb 2009 12:25:00 GMT

第一章:入门

$()取得页面中的元素

$(document).ready(function(){
$('.poem-stanza').addClass('emphasized');
});

说明:

$('.poem-stanza') 　　　　　　//取得页面中添加了类poem-stanza的元素
.addClass('emphasized');　　　//添加Css样式，emphasized为类样式
.removeClass();

第二章:选择符

$(document).ready(function(){
//CSS选择符
$('#selectedplays>li').addClass('horizontal');　　　　　　　　　　//查找id为selectedplays元素的顶层子元素li，添加样式
$('#selectedplays>li:not(.horizotal)').addClass('sublevel');　　　 //查找id为selectedplays元素的顶层子元素li，并且没有类horizotal　

//XPath选择符
$('a[@href^="mailto:"]').addClass('mailto');　　　　　　　　　　 //查找锚元素中属性href以“mailto:”开头的元素
$('a[@href$=".pdf"]').addClass('pdflink');　　　　　　　　　　　 //查找锚元素中属性href以“.pdf”结尾的元素
$('a[@href*="mysite.com"]').addClass('mysite');　　　　　　　 //查找锚元素中属性href中包含“mysite.com”的元素（任意位置）

//自定义选择符
$('tr:odd').addClass('odd');　　　　　　　　　　　　　　　　　 //查找奇数行
$('tr:even').addClass('even');　　　　　　　　　　　　　　　　 //查找偶数行
//注：:odd()和:even()选择符使用的都是Javascript本身的从0开始得编号方式。表格的第1行编号为0（偶数），而第2行编号为1（奇数）
$('td:contains("Henry")').addClass('highlight'); 　　 //查找td中包含"Henry"的

//DOM遍历方法
$('th').parent().addClass('tableheading');　　　　　　　　　　//查找th的父元素即标题行
$('tr:not([th]):even').addClass('even');　　　　　　　　　　//查找tr元素中不包含子为th的，并且是偶数行
$('tr:not([th]):odd').addClass('odd');　　　　　　　　　　
$('td:contains("Henry")').next().addClass('highlight'); 　　　//查找td中包含“Henry”的单元格的下一个单元格
$('td:contains("Comedy")').siblings().addClass('highlight');　　//查找td中包含“Comedy”的同级单元格
$('td:contains("Comedy")').parent().find('td:gt(0)').addClass('highlight');
//查找td中包含“Comedy”的父，再去查找td单元格编号大于0的单元格
$('td:contains("Comedy)').parent().find('td').not(':contains("Comedy")').addClass('highlight');
//查找td中包含“Comedy”的父，再去查找td单元格不包含“Comedy”的单元格

//访问DOM元素
var tag = $('#myelement').get(0).tagName;
});

第三章：事件――扣动扳机

绑定事件：

.bind(‘click’,function(){})
$(‘#switcher-large’).bind(‘click’,function(){…});给id为switcher-large的元素绑定click事件

可简写为
$(‘#switcher-large’).click(function(){…});

方法：
.toggle(function(){},function(){})

接受两个参数（都是函数）第一次点击调用第一个函数，第二次点击调用第二个
$(‘#switcher h3’).toggle(function(){
$(‘#switcher .button’).addClass(‘hidden’);

},function(){
$(‘#switcher .button’).removeClass(‘hidden’);

});

.toggleClass()是一种跟优雅得方案，但对于交替执行的操作而言，.toggle()的适用性更强

$(‘#switcher h3’).click(function(){
$(‘#switcher .button’).toggleClass(‘hidden’); //自动检查该类是否存在
});

.hover(function(){},function(){})

接受两个函数参数，第一个指针进入，第二个指针离开

$(‘#switcher .button’).hover(function(){
$(this).addClass(‘hover’);
},function(){
$(this).removeClass(‘hover’);
});

.unbind(‘click’)

移除事件
.trigger(‘click’)

模拟用户操作
$(‘#switcher’).trigger(‘click’); 模拟点击了一次switcher

第四章：效果――为操作添加艺术性

1.修改内联CSS

语法：
.css(‘property’,’value’);
.css(‘property’:’value’,’property’:’value’);

用法：
var currentSize = $(‘div.speech’).css(‘fontSize’);//得到div.speech得字体大小
var num = parasFloat(currentSize,10); //将currentSize转换为Float型
var unit = currentSize.slice(-2); //返回从指定的字符开始的一个子字符串，-2为倒数第二个
num *= 1.5;
$(‘div.speech’).css(‘fontSize’,num+unit); //设置样式

2.基本的显示和隐藏

.show();
.hide();

用法：
$(‘p:eq(1)’).hide(); //将第二个段落隐藏

3.效果和速度
指定显示速度
3种：slow、normal和fast 时间：0.6、0,4、0.2。也可以指定.show(850)
$(‘p:eq(2)’).show(‘slow’);

淡入和淡出

.fadeIn(); //淡出
.fadeOut(); //淡出

$(‘p:eq(2)’).fadeIn(‘slow’);

4.多重效果

语句：.animate({param1:’value1’,parame2:’value2’},speed,function(){回调});

用法：$(‘p:eq(1)’).animate({height:’show’,width:’show’,opacity:’show’},’slow’);

这里使用简写的show将高度、宽度回复到被隐藏之前的值

5.并发与排队效果
处理一组元素
$(‘div.buttont’).animate({left:650},’slow’).animate({height:38},’slow’);
先移动到left为650的位置，在将高度设置为38
$(‘div.button’)
       .fadeTo(‘slow’,0.5)                            //先淡化
       .animate({left:650},’slow’)           //在移动
       .fadeTo(‘slow’,1.0)                            //在淡出
       .slideUp(‘slow’)                          //最后滑到上方隐藏

注意：排队不适用于其他的非效果方法，例如：.css()
处理多组元素

$(‘p:eq(2)’).slideUp(‘slow’).next().slideDown(‘slow’); 段落3向上滑出，同时段落4向下滑入

回调函数：

Var $thisPara = $(‘p:eq(2)’);
$(‘p:eq(2)’).next().slideDown(‘slow’,function(){

$thisPara.slideUp(‘slow’);

});

段落4下滑完成后，段落3才开始上滑

第五章：DOM操作-基于命令改变页面

1.操作属性
非css属性

$(document).ready(function(){
    $('div.chapter a[@href*=wikipedia]').each(function(index){
        var $thisLink = $(this);
        $thisLink.attr({
            'rel': 'external',
            'id': 'wikilink-' + index,
            'title': 'learn more about ' + $thisLink.text() + ' at wikipedia'
        });
    });
});

//遍历div.chapter 下面所以锚元素href中包含wikipedia，为其添加属性
深入理解$()工厂函数
$('back to top'); 创建新元素

2.插入新元素

.insertBefore()
.before()

作用相同，区别取决于将它们与其他方法进行连缀

.insertAfter()
.after()

// $('div.chapter p').after('back to top');

// $('div.chapter p').before('back to top');

$('back to top').insertAfter('div.chapter p');

$('').prependTo('body');

.perpendTo插入了作为目标的锚

// $('back to top').insertBefore('div.chapter p');

3.移动元素

$('span.footnote').insertBefore('#footer');
将span中类为footnote的插入到id为footer的前面
标注、编号和链接到上下文
    $('span.footnote').each(function(index){
        $(this)
            .before('^{' + (index+1) +

                    '}')；
    });
$('span.footnote').insertBefore('#footer');

遍历span.footnote，在各个元素前加标注后，在将span.footnote添加到#footer前

插入脚注

$('

').insertAfter('div.chapter');
$('span.footnote').each(function(index){
        $(this)
            .before('^{' + (index+1) +

                    '}')
            .appendTo('#notes')
            .append(' (context)');
});

先创建一个ol元素notes，并添加到div.chapter后面，遍历span.footnote，先添加标注，然后通过appendTo其添加到ol末尾，最后又通过append添加一个锚元素。

4.包装元素

.wrap()
.wrap('

5.复制元素

.clone()

$('div.chapter p:eq(0)').clone().insertBefore('div.chapter');

将div.chapter中得第一段复制后插入在div.chapter前面

深度复制

$('div.chapter p:eq(0)').clone(false)

只复制结构，内部的文本没有复制过来，因为文本也是DOM节点

通过复制创建突出引用

var $parentParagraph = $(this).parent('p');

$parentParagraph.css('position','relative');

$(this).clone()

.addClass('pulled')

.prependTo($parentParagraph);

修饰突出引用

$clonedCopy.addClass('pulled')
.find('span.drop')
    .html('…')
    .end()
    .prependTo($parentParagraph)
    .wrap('

');

var clonedText = $clonedCopy.text();

$clonedCopy.html(clonedText);

第六章：AJAX 让网站与时俱进

1.基于请求加载数据
追加HTML

//载入远程 HTML 文件代码并插入至 DOM 中

$('#dictionary').load('a.html',function(){
Alert(“加载完毕！”);//回调函数
})

操作JavaScript对象

JSON：
[
{
    "term": "BACKBITE",
    "part": "v.t.",
    "definition": "To speak of a man as you find him when he can't find you."
},
{
    "term": "BEARD",
    "part": "n.",
    "definition": "The hair that is commonly cut off by those who justly execrate the absurd Chinese custom of shaving the head."
}
]

JQuery:

$.getJSON('b.json',function(data){ //通过 HTTP GET 请求载入 JSON 数据
$.each(data,function(entryIndex,entry){
var html = '

';
html += '

' + entry['term'] + '

';
html += '

' + entry['part'] + '

';
html += '

';
                html += entry['definition'];
                if(entry['quote']){
                    html += '

';
$.each(entry['quote'],function(lineIndex,line){
html += '

' + line + '

';
                    });
                    if(entry['author']){
                        html += '

' + entry['author'] + '

';
}
html += '

';
html += '

';
});

执行脚本

通过 HTTP GET 请求载入并执行一个 JavaScript 文件

$.getScript('c.js',function(){
Alert(“加载完毕”);//回调函数
});

加载XML文档

//通过远程 HTTP GET 请求载入信息。

$.get('d.xml',function(data){
        $(data).find('entry').each(function(){
                var $entry = $(this);
                var html = '

';
html += '

' + $entry.attr('term') + '

';
html += '

' + $entry.attr('part') + '

';
html += '

'
                html += $entry.find('definition').text();
                var $quote = $entry.find('quote');
                if($quote.length){
                    html += '

';
$quote.find('line').each(function(){
html += '

' + $(this).text() + '

';
                    });
                    if($quote.attr('author')){
                        html += '

' + $quote.attr('author') + '

';
}
html += '

';
html += '

';
                $('#dictionary').append($(html));
            });
        });

2.选择数据格式

3.向服务器传递数据

4.关注请求

方法：

.ajaxStart()
.ajaxStop()

当AJAX请求开始且尚未进行其他传输时，会触发.ajaxStart()的回调函数，相反，当最后一次活动请求终止时，则会执行通过.ajaxStop()注册的回调函数。

示例：

//当请求时，显示#loading，结束时，隐藏loading

$(document).ready(function(){
$('#loading').ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
});
});

5.Ajax和事件

限制函数绑定的作用域

$(document).ready(function(){
var bindBehaviors = function(scope){
     $('h3',scope).click(function(){
         $(this).toggleClass('highlighted');
     });
};

bindBehaviors(this);

//这里的绑定作用域是document

$(document).ready(function(){
     $('#letter-a .button').click(function(){
         $('#dictionary').hide().load('a.html',function(){
             bindBehaviors(this);
//这里的是文档中的所以

元素
             $(this).fadeIn();
         });
     });
});

});

6.安全限制

Eric.Zhou 2009-02-14 20:25 发表评论

强烈推荐：240多个jQuery插件

Eric.Zhou — Thu, 12 Feb 2009 13:39:00 GMT

jQuery is definitely my favourite Javascript Library and this ultimate jQuery Plugin List is for all other jQuery Lovers out there. At the moment there are about 240+ awesome Plugins in the List I’m sure that there are a lot of other plugins out there - so if you knew one that’s not in the list please post a comment and i will add it. Thanks!

Lightbox JS v2.0

Eric.Zhou — Mon, 01 Sep 2008 12:17:00 GMT

概要：

Lightbox JS 是一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本. 它能被快速安装并且运作于所有流行的浏览器.

最新更新 Version 2.0

图片集: 分组相关的图片并且能轻松的导航它们
视觉特效: 奇特的自适应调整
向后兼容: yes!

点击这里查看实例演示

如何使用:

步骤 1 - 安装

1、Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果库. 你将需要外调这三个 Javascript 文件在你的 header.

2、外调 Lightbox CSS 文件 (或添加 Lightbox 样式到你现行的样式表中).

3、检查 CSS 并确定调用的 prev.gif 和 next.gif 文件在正确的位置. 同样要确定调用的 loading.gif 和 close.gif 文件及 lightbox.js 文件在正确的位置.

步骤 2 - 激活

1、添加 rel="lightbox" 属性到任何一个链接标签去激活lightbox. 例如:
image #1
可选择项: 使用 title 属性加上说明.

2、如果你有一套你想分组的相关图片, 接着上一部并且又在 rel 属性中添加一个带方括号的组名. 例如:
image #1
image #2
image #3

3、没有限定每个页面的图片组数量和每个图片组图片的数量. 疯了！

下载: Lightbox v2.04

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

为jmesa表格的date类型数据加filter

Eric.Zhou — Fri, 20 Jun 2008 06:59:00 GMT

<jmesa:htmlColumn 

    property="born"

    pattern="MM/yyyy" 

    cellEditor="org.jmesa.view.editor.DateCellEditor"/>

package com.founder.web.ext;

import Java.util.Date;
import Java.util.HashMap;
import Java.util.Map;

import org.jmesa.core.filter.DateFilterMatcher;
import org.jmesa.core.filter.FilterMatcher;
import org.jmesa.core.filter.FilterMatcherMap;
import org.jmesa.core.filter.MatcherKey;

public class DateFilterMatcherMap implements FilterMatcherMap {

public Map getFilterMatchers() {
  Map filterMatcherMap = new HashMap();
  filterMatcherMap.put(new MatcherKey(Date.class, "born"), new DateFilterMatcher("MM/dd/yyyy"));
  return filterMatcherMap;
}

}

现在需要修改tableFacade标签为

<jmesa:tableFacade

    id="tag" 

    filterMatcherMap="com.founder.web.ext.DateFilterMatcherMap"

Eric.Zhou 2008-06-20 14:59 发表评论

JavaScript类库 - Rico

Eric.Zhou — Tue, 13 May 2008 07:28:00 GMT

Apache License的，一个免费使用的东东。
Rico (http://openrico.org/)是开源的JavaScript类库，用来创建丰富的internet应用。
1、可以方便地制作很玄地圆角矩形。
2、可以设置TAB面板
3、支持DRAG&DROP
4、提供一个LiveGrid的数据表格，支持Title Sorting和Page splite
5、提供一个Ajax引擎。
6、提供一个色彩库，默认一些色彩。
7、主页是http://openrico.org/rico/home.page。

因为Rico是建立在Prototype类库之上的，所以你在使用Rico的时候必须对Prototype进行引用：

Eric.Zhou 2008-05-13 15:28 发表评论

jMaki

Eric.Zhou — Tue, 08 Apr 2008 07:10:00 GMT

jMaki是SUN支持的一个AJAX框架。这个项目的是让Java开发人员在其基于Java的应用程序中(不管是JSP标签库还是JSF组件)都能使用AJAX技术。jMaki使用了Java与JavaScript中最优秀的部分以此来提供一些Rich AJAX style widgets。jMaki当前提供的bootstrap widget是来自Dojo,Scriptaculus,Yahoo UI Widgets,Spry,DHTML Goodies,和Google等组件库。jMaki提供为这些widget组件库提供了一个公共接口以便让你可以在同一页面中一起使用这些组件库。如果你有兴趣利用jMaki项目来快速开发Web应用程序，可以使用NetBeans 5.5的jMaki插件。这个插件可以直接把jMaki组件拖放到JSP页面中。如果不熟悉该插件可以通过其网站提供一段视频来学习。

Eric.Zhou 2008-04-08 15:10 发表评论

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 发表评论

在使用struts2的datetimepicker标签时候遇到JS错误:dojo未定义错误

Eric.Zhou — Mon, 25 Feb 2008 02:18:00 GMT

在一个action跳转页面时:
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="../../commons/taglibs.jsp"%>

时间控件没有显示出来,而报JS错误:dojo未定义错误

解决办法：
在页面的标签中加入　就可以了
。。。

Struts 2 Cool Tags - Others
.....

。。。

Eric.Zhou 2008-02-25 10:18 发表评论

在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 发表评论

Adobe AIR正式版三月推出要做RIA技术领导者

Eric.Zhou — Wed, 20 Feb 2008 08:29:00 GMT

Adobe 2月18日表示，将在三月发布Adobe AIR（Adobe Integrated Runtime）正式版，要和微软的Silverlight竞逐丰富网络应用程序RIA（Rich Internet Application）市场。

所谓RIA就是以动画、影音等多样性打造网站的技术，而其底层除了微软已在去年推出的Silverlight之外，就属Adobe开发代号为Apollo的AIR，目前仍在Beta版。不过Adobe香港暨台湾区总经理黄耀辉今天表示，AIR正式版将在三月推出，希望在RIA技术中取得市场领导地位。

RIA可以在网站中做出交互式的应用程序，也可以说是实现Web 2.0概念的工具。例如可以做到交互式的电子下单系统、航空公司订票系统等等。微软在去年发表Silverlight时就展示出宝来证券、中华航空等企业应用。而Adobe希望利用AIR做为开发平台，再加上Flex和Flash两种工具，做到RIA的应用程序。

除了Adobe要以AIR做为RIA技术领导者外，微软也积极耕耘这块市场，去年才首度正式发表名为「银光」的Silverlight 1.0，要抢攻Adobe耕耘已久的网站开发、设计市场。随着Adobe即将推出AIR正式版，两家厂商将展开正面对决。

对此微软则是自信满满。台湾微软开发工具暨平台推广处产品营销经理胡德民表示，微软三月时会在美国的Mix 08大会上发表Silverlight 2.0的产品蓝图，预计在今年就会正式发表。微软原本只将更新版本命名为Silverlight 1.1，不过由于功能比前一版改进太多，因此在去年12月宣布直接发表Silverlight 2.0。

而去年9月首次发表的Silverlight 1.0版本，目前微软尚不愿透露在台湾地区的使用状况，表示要晚一点才会公布。胡德民认为，RIA技术的成功必须视企业进入这项技术的状况而定，微软今年七、八月份将在台湾举行的Mix大会，会展示更多利用Silverlight打造的成功案例。另外胡德民也表示，AIR的目标群众在于开发者（developer），而微软则是希望开发者和设计者（designer）都能使用微软技术。

微软自去年开始积极抢攻原是Adobe天下的开发市场，推出网页设计工具平台Expression Studio，其中有网页建置工具、互动设计工具等等，都被视为和Adobe的Flash打对台。不过Adobe今天公布2007年的台湾区营业成长为30%，黄耀辉说，仍持续稳定成长，并没有受到微软加入开发市场的影响。

另外，Adobe今年在台湾除了深耕RIA技术外，仍持续发展Acrobat、Creative Suite 3等产品，并在政府、金融、制造业间深耕Acrobat。手机端的应用也会有新的进展，和中华电信在手机上的Flash Cast服务今年就会推出

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

Jmesa

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

Jmesa是ExtremeTable项目重新开发一个的Html表格组件，提供过滤、排序、分页、数据导出等功能。Jmesa非常易于使用，可按自己的需求进行扩展。JMesa需要JDK1.5以上的环境。
该项目主页:http://code.google.com/p/jmesa/

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

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

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

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

模块介绍：jRating

Eric.Zhou — Thu, 29 Nov 2007 03:49:00 GMT

简介：

这个模块使用 jQuery 技术为节点提供评分功能，当 javascript 被禁止时，使用标准形式，如果启用 javascript 就可以通过图片 (如五星) 动态进行评分。

这个模块能够与 views 模块协作，它提供一个 views 字段，让评分结果可以通过 views 显示。

链接：

http://drupal.org/project/jrating

Eric.Zhou 2007-11-29 11:49 发表评论

BlogJava-

生命科学领域的专业信息解决方案！

高性能网站建设-示例

jQuery获取重名input的数组值

jQuery的Validation插件[转载]

Extjs－displayfield格式化日期

ExtJS的xtype列表

jquery 中对checkbox的一些操作

Jmesa中加入checkbox列和导出功能

ajax请求时的缓存的问题[转载]

防止jQuery Load使用缓存的方法[转载]

Jmesa中处理Map的List对象

Jmesa中让Toolbar和Statusbar在同一行

Jmesa- create a custom view

API

Tags

Jmesa中的Limit使用

Jmesa2.4.1小例子

jQuery中一些不常用的方法属性【转载】

index(subject)

data()

attr(key,fn)

hasClass(class)

val(val)

slice(start,[end])

add(expr)

nextAll([expr])

prev([expr])

prevAll([expr])

andSelf()

replaceWith(content)

replaceAll(selector)

clone([true])

offset()

one(type,[data],fn)

toggle(fn,fn2,[fn3,fn4,...])

stop()

queue([callback/queue])

dequeue()

jQuery.browser.version

jQuery.boxModel

连动出发事件在jQuery中是如此简单与优美

jQuery基础教程笔记

' + entry['term'] + '

' + $entry.attr('term') + '

元素 $(this).fadeIn(); }); }); }); }); 6.安全限制 Eric.Zhou 2009-02-14 20:25 发表评论

强烈推荐：240多个jQuery插件

File upload

Form Validation

Form - Select Box stuff

Form Basics, Input Fields, Checkboxes etc.

Time, Date and Color Picker

Rating Plugins

Search Plugins

Inline Edit & Editors

Audio, Video, Flash, SVG, etc

Photos/Images/Galleries

Google Map

Games

Tables, Grids etc.

Charts, Presentation etc.

Border, Corners, Background

Text and Links

Tooltips

Menus, Navigations

Accordions, Slide and Toggle stuff

Drag and Drop

XML XSL JSON Feeds

Browserstuff

Alert, Prompt, Confirm Windows

CSS

DOM, Ajax and other jQuery plugins

Lightbox JS v2.0

为jmesa表格的date类型数据加filter

JavaScript类库 - Rico

jMaki

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

元素
$(this).fadeIn();
});
});
});

});

6.安全限制

Eric.Zhou 2009-02-14 20:25 发表评论

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

Adobe AIR正式版三月推出要做RIA技术领导者