综合久久伊人,色8久久精品久久久久久蜜,欧美黑人巨大

高性能網(wǎng)站建設(shè)-示例

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

Eric.Zhou 2011-03-31 13:29 發(fā)表評(píng)論

jQuery獲取重名input的數(shù)組值

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

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

Eric.Zhou 2011-03-29 09:22 發(fā)表評(píng)論

jQuery的Validation插件[轉(zhuǎn)載]

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的官方網(wǎng)站上面獲得,jQuery下載驗(yàn)證插件的地址是http://plugins.jquery.com/在打開頁(yè)面的左上角’Search’框中輸入validation就可以找到我們想要的驗(yàn)證插件了,在http://plugins.jquery.com/project/validate下,我們找到了目前最新的版本(2009年6月17日)官方推出的1.5.5版的validate.js.

Validation插件式歷史悠久的jQuery插件之一,經(jīng)過(guò)了全球各種項(xiàng)目的驗(yàn)證,得到了很多WEB開發(fā)者的好評(píng),作為一個(gè)表單驗(yàn)證的解決方案,Validation有很多的優(yōu)點(diǎn),比如:內(nèi)置的驗(yàn)證規(guī)則,可以自定義驗(yàn)證規(guī)則,簡(jiǎn)單而且強(qiáng)大的驗(yàn)證信息提示,實(shí)時(shí)進(jìn)行驗(yàn)證的功能.都可以令前臺(tái)開發(fā)變得非常的簡(jiǎn)單.Validation具有內(nèi)置的必填,數(shù)字,Email,URL等多種驗(yàn)證規(guī)則.實(shí)時(shí)驗(yàn)證方面,通過(guò)blur和keyup時(shí)間來(lái)觸發(fā)驗(yàn)證規(guī)則,可以達(dá)到實(shí)時(shí)驗(yàn)證的目的.

下面是一個(gè)簡(jiǎn)單的例子,HTML和jQuery代碼如下:

jQuery之驗(yàn)證插件

一個(gè)簡(jiǎn)單的帶有提示的評(píng)論例子

姓名*

電子郵件*

網(wǎng)址*

你的評(píng)論*

上面的代碼實(shí)現(xiàn)了如下的驗(yàn)證:

1) 對(duì)”姓名”的必填和長(zhǎng)度至少為2為的驗(yàn)證

2) 對(duì)”電子郵件”的驗(yàn)證和是否為E-mail格式的驗(yàn)證

3) 對(duì)”網(wǎng)址”是否為url的驗(yàn)證

4) 對(duì)”你的評(píng)論”的必填驗(yàn)證

5) 提供了在用戶輸入的時(shí)候?qū)﹂L(zhǎng)度的實(shí)時(shí)驗(yàn)證

只需要完成如下幾步,就可以將一個(gè)普通的表單變成一個(gè)可以進(jìn)行驗(yàn)證的表單:

1) 引入jQuery庫(kù)和Validation插件

view plaincopy to clipboardprint?

2) 確定是哪一個(gè)表單需要被驗(yàn)

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

//確定哪一個(gè)表單需要進(jìn)行驗(yàn)證

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

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

//確定哪一個(gè)表單需要進(jìn)行驗(yàn)證

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

});

3) 針對(duì)不同的字段,進(jìn)行驗(yàn)證規(guī)則的編碼,設(shè)置字段相應(yīng)的屬性

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'/> 將所有的驗(yàn)證規(guī)則寫到class屬性里: 在實(shí)際的開發(fā)中,有的時(shí)候?qū)Ⅱ?yàn)證規(guī)則寫到class=’required email’有的時(shí)候?qū)懙絤inlength=’2’里面,這樣非常的不方便,有沒(méi)有一種方式可以將所有的驗(yàn)證規(guī)則放到一個(gè)地方去呢?這個(gè)答案是肯定的.jQuery充分考慮到了這一點(diǎn),我們可以通過(guò)另外一個(gè)JavaScript庫(kù)來(lái)將所有的驗(yàn)證規(guī)則放到一個(gè)class文件當(dāng)中去.這樣就大大方面了對(duì)驗(yàn)證規(guī)則的管理. 1) 在下載的\jquery-validate\lib文件夾下面找到j(luò)query.metadata.js.放到項(xiàng)目當(dāng)中,然后引入該jQuery插件.jquery.metadate.js是一個(gè)支持固定格式解析的jQuery插件,Validation插件將其很好的融合到驗(yàn)證規(guī)則編碼當(dāng)中. 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) 改變調(diào)用的驗(yàn)證方法 view plaincopy to clipboardprint? <mce:script type='text/javascript'></mce:script> <mce:script type='text/javascript'></mce:script> 3) 將所有的驗(yàn)證規(guī)則都通過(guò)類似{validate:{required:true,email:true}}的形式,寫到class屬性當(dāng)中,詳細(xì)的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之驗(yàn)證插件</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(){ //確定那個(gè)表單進(jìn)行驗(yàn)證(改變調(diào)用的驗(yàn)證方法) $('#commentForm').validate({meta: "validate"}); }); </script> </head> <body> <form class='cmxform' id='commentForm' method='get' action='#'> <fieldset> <legend>一個(gè)簡(jiǎn)單的帶有提示的評(píng)論例子</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'>網(wǎng)址</label>* <input id='curl' name='url' size='25' class='{validate:{url:true}}' value=''/> <label for='ccomment'>你的評(píng)論</label>* <textarea id='ccomment' name='comment' cols='25' class='{validate:{required:true}}'>

將驗(yàn)證行為和HTML結(jié)構(gòu)完全脫離的一種驗(yàn)證寫法:

上面的兩種寫法,一種是通過(guò)給標(biāo)簽添加屬性來(lái)完成驗(yàn)證,一種是通過(guò)jquery.metadate.js的幫助將所有的驗(yàn)證規(guī)則添加到class屬性中,都沒(méi)有符合jQuery提倡的”行為和操作分離”的一個(gè)原則,下面的方法就補(bǔ)足了這個(gè)缺陷,可以讓HTML結(jié)構(gòu)和驗(yàn)證規(guī)則很好的分離出來(lái)

HTML代碼如下:

jQuery之驗(yàn)證插件

一個(gè)簡(jiǎn)單的帶有提示的評(píng)論例子

姓名*

電子郵件*

網(wǎng)址*

你的評(píng)論*

在這種”HTML和驗(yàn)證完全分離”的驗(yàn)證規(guī)則寫法的步驟如下:

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

2) 通過(guò)每個(gè)字段的name屬性來(lái)匹配驗(yàn)證規(guī)則

3) 定義驗(yàn)證規(guī)則,比如required:true,email:true,minlength:2等等.

將默認(rèn)的英文驗(yàn)證信息變成中文:

validation插件默認(rèn)的驗(yàn)證信息是英文的,要想將validation驗(yàn)證插件給出的驗(yàn)證信息變成中文就可以到j(luò)query-validate\localization文件夾下面找到messages_cn.js文件,這個(gè)就是中文的驗(yàn)證信息庫(kù),我們只需要在代碼中將這個(gè)文件導(dǎo)入就可以實(shí)現(xiàn)中文驗(yàn)證信息的輸出了.在jquery-validate\localization這個(gè)文件夾下面,還有很多種語(yǔ)言,我們可以選擇適當(dāng)?shù)恼Z(yǔ)言引入到我們的項(xiàng)目當(dāng)中,實(shí)現(xiàn)提示信息的本地化.

view plaincopy to clipboardprint?

改變千篇一律的驗(yàn)證信息:

validaion驗(yàn)證插件可以非常方便的進(jìn)行自定義驗(yàn)證規(guī)則,這樣可以用來(lái)代替千篇一律的驗(yàn)證信息,具體修改好的HTML代碼如下:

jQuery之驗(yàn)證插件

一個(gè)簡(jiǎn)單的帶有提示的評(píng)論例子

姓名*

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

required:'姓名是必須要輸入的',

minlength:'請(qǐng)輸入不少于兩個(gè)字符的姓名'}}}"

size='25' />

電子郵件*

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

required:'郵箱是必須要輸入的',

email:'請(qǐng)輸入符合格式的Email地址'}}}"

size='25' />

網(wǎng)址*

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

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

size='25' value=''/>

你的評(píng)論*

class="{validate:{ required:true,messages:{required:'多少也寫點(diǎn)評(píng)論哦'}}}" cols='25'>

具體來(lái)說(shuō),上面的代碼就是在class的屬性中增加了類似messages:{required:’’,email:’’}形式的一塊代碼,這樣就可以顯示我們自定義的驗(yàn)證信息了.

自己來(lái)定義表單驗(yàn)證的業(yè)務(wù)規(guī)則:

通常在開發(fā)項(xiàng)目中,驗(yàn)證規(guī)則與實(shí)際的業(yè)務(wù)邏輯是息息相關(guān)的,一個(gè)好的驗(yàn)證插件必須要支持自定義驗(yàn)證機(jī)制,當(dāng)然jQuery就提供了多種機(jī)制來(lái)滿足用戶的業(yè)務(wù)需要.

我們添加以下代碼到上面的HTML代碼中,方便進(jìn)行驗(yàn)證碼的功能實(shí)現(xiàn).

view plaincopy to clipboardprint?

驗(yàn)證碼

=7+9

驗(yàn)證碼

=7+9

為了實(shí)現(xiàn)”驗(yàn)證碼”的功能,我們需要以下幾個(gè)步驟:

1) 自定義一個(gè)驗(yàn)證規(guī)則

view plaincopy to clipboardprint?
$.validator.addMethod(

    "formula",                       //驗(yàn)證方法的名稱

    function(value,element,param){   //驗(yàn)證規(guī)則

       return value==eval(param);

       },

      '請(qǐng)輸入正確的結(jié)果'                //提示驗(yàn)證信息

);
$.validator.addMethod(

"formula", //驗(yàn)證方法的名稱

function(value,element,param){ //驗(yàn)證規(guī)則

return value==eval(param);

'請(qǐng)輸入正確的結(jié)果' //提示驗(yàn)證信息

);

2) 在代碼中引用以上驗(yàn)證規(guī)則

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"}

    }

})

本文來(lái)自CSDN博客，轉(zhuǎn)載請(qǐng)標(biāo)明出處：http://blog.csdn.net/ziwen00/archive/2009/09/14/4551346.aspx

Eric.Zhou 2010-01-25 21:04 發(fā)表評(píng)論

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:'申購(gòu)日期',
     xtype : 'displayfield',
     name : 'orderDate',
     formatValue: function(value){return new Date(value).format("Y-m-d");}
    }]

Eric.Zhou 2009-11-30 22:25 發(fā)表評(píng)論

ExtJS的xtype列表

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

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

xtype Class

基本組件：

box Ext.BoxComponent 具有邊框?qū)傩缘慕M件

button Ext.Button 按鈕

colorpalette Ext.ColorPalette 調(diào)色板

component Ext.Component 組件

container Ext.Container 容器

cycle Ext.CycleButton

dataview Ext.DataView 數(shù)據(jù)顯示視圖

datepicker Ext.DatePicker 日期選擇面板

editor Ext.Editor 編輯器

editorgrid Ext.grid.EditorGridPanel 可編輯的表格

grid Ext.grid.GridPanel 表格

paging Ext.PagingToolbar 工具欄中的間隔

panel Ext.Panel 面板

progress Ext.ProgressBar 進(jìn)度條

splitbutton Ext.SplitButton 可分裂的按鈕

tabpanel Ext.TabPanel 選項(xiàng)面板

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 工具條項(xiàng)目

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

tbspacer Ext.Toolbar.Spacer 工具欄空白

tbsplit Ext.Toolbar.SplitButton 工具欄分隔按鈕

tbtext Ext.Toolbar.TextItem 工具欄文本項(xiàng)

表單及字段組件：

form Ext.FormPanel Form 面板

checkbox Ext.form.Checkbox checkbox 錄入框

combo Ext.form.ComboBox combo 選擇項(xiàng)

datefield Ext.form.DateField 日期選擇項(xiàng)

field Ext.form.Field 表單字段

fieldset Ext.form.FieldSet 表單字段組

hidden Ext.form.Hidden 表單隱藏域

htmleditor Ext.form.HtmlEditor html 編輯器

numberfield Ext.form.NumberField 數(shù)字編輯器

radio Ext.form.Radio 單選按鈕

textarea Ext.form.TextArea 區(qū)域文本框

textfield Ext.form.TextField 表單文本框

timefield Ext.form.TimeField 時(shí)間錄入項(xiàng)

trigger Ext.form.TriggerField 觸發(fā)錄入項(xiàng)

Eric.Zhou 2009-11-20 09:04 發(fā)表評(píng)論

jquery 中對(duì)checkbox的一些操作

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

設(shè)置單個(gè)checkbox的值:
$('#checkall').attr('checked', 'true'); 選擇
$('#checkall').attr('checked', ''); 不選

選擇多個(gè)checkbox:
$('#suppliersTable input[@type=checkbox]').trigger('click');

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

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

觸發(fā)所有未選中的checkbox的onclick事件:
$('#suppliersTable input[@type=checkbox][@checked=""]').trigger('click');

計(jì)算所有選中的checkbox個(gè)數(shù):
$('#suppliersTable tbody input[@type=checkbox][@checked="true"]').length;

Eric.Zhou 2009-06-05 09:56 發(fā)表評(píng)論

Jmesa中加入checkbox列和導(dǎo)出功能

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

加入checkbox的步驟如下:
需要在htmlRow標(biāo)簽中加入 uniqueProperty屬性值, 并且修改tableFacade標(biāo)簽為可編輯的
         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就可以使用了.
下面實(shí)現(xiàn)導(dǎo)出功能, 首先如上代碼, 需要設(shè)置 exportTypes="excel", 這里設(shè)置導(dǎo)出excel格式文件.
對(duì)應(yīng)導(dǎo)出還需要增加一個(gè)onInvokeExportAction,
function onInvokeExportAction(id) {
       var parameterString = createParameterStringForLimit(id);
       window.open(path+'/supplier/export.do?' + parameterString);
}

下面來(lái)看看后來(lái)代碼如果處理被選擇的行:
@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);
}
主要是綠色代碼如果獲取頁(yè)面上的一些信息.

Eric.Zhou 2009-06-04 17:06 發(fā)表評(píng)論

ajax請(qǐng)求時(shí)的緩存的問(wèn)題[轉(zhuǎn)載]

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

ajax請(qǐng)求同一個(gè)url地址時(shí)，如果發(fā)現(xiàn)url地址沒(méi)有變而緩存里有就會(huì)直接去取值，不會(huì)再去請(qǐng)求服務(wù)器。這種情況會(huì)在不同的機(jī)器不同的IE上各有不同，解決的方式是在ajax請(qǐng)求的地址里加上一個(gè)隨機(jī)的參數(shù)例如(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每次請(qǐng)求的地址不一樣就可以的。

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

Eric.Zhou 2009-06-03 10:33 發(fā)表評(píng)論

防止jQuery Load使用緩存的方法[轉(zhuǎn)載]

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

緩存這東西，在一定程度上加快了頁(yè)面的裝載，但是也常常給我們帶來(lái)麻煩。我在上篇文章里簡(jiǎn)單介紹了jQuery中Load方法的使用。在實(shí)際運(yùn)用中，我們可能會(huì)碰到瀏覽器緩存的問(wèn)題。比如我就在IE7里碰到這個(gè)問(wèn)題。

jQuery Load樣本代碼：

$(document).ready(function(){

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

  //在頁(yè)面裝載時(shí)，在ID為#labels的DOM元素里插入labels.html的內(nèi)容。

});

當(dāng)我更新了labels.html以后，在IE7里load方法仍舊在使用舊的labels.html，就算我按刷新鍵也不管用。好在jQuery提供一個(gè)防止ajax使用緩存的方法，把下面的語(yǔ)句加在head的javascript文件里，就可以解決問(wèn)題。

$.ajaxSetup ({

    cache: false //關(guān)閉AJAX相應(yīng)的緩存

});

此外我再介紹幾種方法解決緩存的方法。注意：我沒(méi)有在jQuery load的問(wèn)題上測(cè)試過(guò)，這些方法僅供參考！

1.更改文件名，比如把labels.html改成lables_new.html，但是這是沒(méi)有辦法的辦法，一般沒(méi)有人這么做。

2.在labels.html后加上特定時(shí)間，比如lables.html?20081116。在實(shí)際工作中，在我更新css/javascript文件后，我都是用這種辦法來(lái)防止文件被緩存。

3.在labels.html文件的頂部加入以下聲明：

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

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

4.load函數(shù)不僅可以調(diào)用HTML，也可以調(diào)用script，比如labels.php，可以在php文件里使用header函數(shù)：

php

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

?>

Eric.Zhou 2009-03-23 13:50 發(fā)表評(píng)論

Jmesa中處理Map的List對(duì)象

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

目前需求, 客戶上傳excel文件, 有列名, 列名不固定, 想預(yù)覽數(shù)據(jù), 使用Jmesa做table, 有兩種實(shí)現(xiàn)方法. 第一種使用動(dòng)態(tài)類, 封裝map對(duì)象. 第二種是一種巧妙的方法. 下面先介紹第一種方法:
使用動(dòng)態(tài)類:

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";
}

頁(yè)面為:

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



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





這里注意property中的值.

今天查看源碼, 和昨天想象一樣, jmesa在渲染單元格的時(shí)候, 分兩種, 一種就是map類型, 使用get(key)來(lái)取值, 另一種就是普通的javabean對(duì)象, 使用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 發(fā)表評(píng)論

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 發(fā)表評(píng)論

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 發(fā)表評(píng)論

Jmesa2.4.1小例子

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

action層返回一個(gè)對(duì)象的List格式，比如如下代碼：
List structures = structureService.getAllStructures();

在JSP頁(yè)面中代碼為：
<%@ 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 發(fā)表評(píng)論

jQuery中一些不常用的方法屬性【轉(zhuǎn)載】

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

index(subject)

搜索與參數(shù)表示的對(duì)象匹配的元素，并返回相應(yīng)元素的索引值。如果找到了匹配的元素，從0開始返回；如果沒(méi)有找到匹配的元素，返回-1。

data()

data(elem)：為頁(yè)面對(duì)象添加唯一標(biāo)識(shí)。

data(name, value)：將數(shù)據(jù)保存在元素的一個(gè)key里面。$("#box").data("shape","rectangle")。

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

removeData(name)：刪除通過(guò)data()方法賦予的值。$("#box").removeData("shape")。

attr(key,fn)

為所有匹配的元素設(shè)置一個(gè)計(jì)算的屬性值。不提供值，而是提供一個(gè)函數(shù)，由這個(gè)函數(shù)計(jì)算的值作為屬性值。

hasClass(class)

檢查當(dāng)前的元素是否含有某個(gè)特定的類，如果有，則返回true。這其實(shí)就是is("." + class)。

val(val)

設(shè)置每一個(gè)匹配元素的值。在 jQuery 1.2, 這也可以為select元件賦值。參數(shù)val(String)要設(shè)置的值。

check,select,radio等都能使用為之賦值。參數(shù)val(Array)用于 check/select 的值。

slice(start,[end])

選取一個(gè)匹配的子集。

add(expr)

把與表達(dá)式匹配的元素添加到j(luò)Query對(duì)象中。這個(gè)函數(shù)可以用于連接分別與兩個(gè)表達(dá)式匹配的元素結(jié)果集。

參數(shù)expr(String, DOMElement, Array)用于匹配元素并添加的表達(dá)式字符串，或者用于動(dòng)態(tài)生成的HTML代碼，如果是一個(gè)字符串?dāng)?shù)組則返回多個(gè)元素。

nextAll([expr])

查找當(dāng)前元素之后的所有元素。

prev([expr])

取得一個(gè)包含匹配的元素集合中每一個(gè)元素緊鄰的前一個(gè)同輩元素的元素集合。

prevAll([expr])

查找當(dāng)前元素之前所有的同輩元素。

andSelf()

將先前所選的加入當(dāng)前元素中。

replaceWith(content)

將所有匹配的元素替換成指定的HTML或DOM元素。參數(shù)content(String, Element, jQuery):用于將匹配元素替換掉的內(nèi)容。

replaceAll(selector)

用匹配的元素替換掉所有 selector匹配到的元素。參數(shù)selector(選擇器)用于查找所要被替換的元素。

clone([true])

克隆匹配的DOM元素并且選中這些克隆的副本。設(shè)置參數(shù)[true]是對(duì)象的所有事件處理一并克隆。

offset()

獲取匹配元素在當(dāng)前視口的相對(duì)偏移。返回的對(duì)象包含兩個(gè)整形屬性：top 和 left。此方法只對(duì)可見(jiàn)元素有效。

返回Object{top,left}。

one(type,[data],fn)

為每一個(gè)匹配元素的特定事件（像click）綁定一個(gè)一次性的事件處理函數(shù)。

在每個(gè)對(duì)象上，這個(gè)事件處理函數(shù)只會(huì)被執(zhí)行一次。其他規(guī)則與bind()函數(shù)相同。這個(gè)事件處理函數(shù)會(huì)接收到一個(gè)事件對(duì)象，可以通過(guò)它來(lái)阻止（瀏覽器）默認(rèn)的行為。如果既想取消默認(rèn)的行為，又想阻止事件起泡，這個(gè)事件處理函數(shù)必須返回false。

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

每次點(diǎn)擊時(shí)切換要調(diào)用的函數(shù)。函數(shù)數(shù)目可以是多個(gè)。

stop()

停止所有在指定元素上正在運(yùn)行的動(dòng)畫。如果隊(duì)列中有等待執(zhí)行的動(dòng)畫，他們將被馬上執(zhí)行。

queue([callback/queue])

queue：返回指向第一個(gè)匹配元素的隊(duì)列(將是一個(gè)函數(shù)數(shù)組。

queue(callback)：在匹配的元素的動(dòng)畫隊(duì)列中添加一個(gè)函數(shù)。

queue(queue)：將匹配元素的動(dòng)畫隊(duì)列用新的一個(gè)隊(duì)列來(lái)代替(函數(shù)數(shù)組)。

dequeue()

從動(dòng)畫隊(duì)列中移除一個(gè)隊(duì)列函數(shù)。

jQuery.browser.version

瀏覽器渲染引擎版本號(hào)。

jQuery.boxModel

當(dāng)前頁(yè)面中瀏覽器是否使用標(biāo)準(zhǔn)盒模型渲染頁(yè)面。

PS:以前很少用這些方法屬性，很多還不知道。這跟中文CHM版jQuery API不無(wú)關(guān)系，那本廣為流傳的中文版手冊(cè)已經(jīng)過(guò)時(shí)，建議直接閱讀官方文檔。

Eric.Zhou 2009-03-03 21:24 發(fā)表評(píng)論

連動(dòng)出發(fā)事件在jQuery中是如此簡(jiǎn)單與優(yōu)美

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

當(dāng)頁(yè)面加載完需要對(duì)一些數(shù)據(jù)進(jìn)行操作時(shí)候，我這里當(dāng)取完供應(yīng)商列表，需要默認(rèn)選擇第一個(gè)供應(yīng)商，然后再去第一個(gè)供應(yīng)商相關(guān)信息。
if ($('#suppliertable').find('tr:eq(0)') != undefined) {
$('#suppliertable').find('tr:eq(0)').trigger('click');
}

上面為table格式形式的列表。但如果為select元素呢，比如做級(jí)聯(lián)下拉菜單則可以這樣寫：
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 發(fā)表評(píng)論

jQuery基礎(chǔ)教程筆記

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

第一章:入門

$()取得頁(yè)面中的元素

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

說(shuō)明:

$('.poem-stanza') 　　　　　　//取得頁(yè)面中添加了類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，并且沒(méi)有類horizotal　

//XPath選擇符
$('a[@href^="mailto:"]').addClass('mailto');　　　　　　　　　　 //查找錨元素中屬性href以“mailto:”開頭的元素
$('a[@href$=".pdf"]').addClass('pdflink');　　　　　　　　　　　 //查找錨元素中屬性href以“.pdf”結(jié)尾的元素
$('a[@href*="mysite.com"]').addClass('mysite');　　　　　　　 //查找錨元素中屬性href中包含“mysite.com”的元素（任意位置）

//自定義選擇符
$('tr:odd').addClass('odd');　　　　　　　　　　　　　　　　　 //查找奇數(shù)行
$('tr:even').addClass('even');　　　　　　　　　　　　　　　　 //查找偶數(shù)行
//注：:odd()和:even()選擇符使用的都是Javascript本身的從0開始得編號(hào)方式。表格的第1行編號(hào)為0（偶數(shù)），而第2行編號(hào)為1（奇數(shù)）
$('td:contains("Henry")').addClass('highlight'); 　　 //查找td中包含"Henry"的

//DOM遍歷方法
$('th').parent().addClass('tableheading');　　　　　　　　　　//查找th的父元素即標(biāo)題行
$('tr:not([th]):even').addClass('even');　　　　　　　　　　//查找tr元素中不包含子為th的，并且是偶數(shù)行
$('tr:not([th]):odd').addClass('odd');　　　　　　　　　　
$('td:contains("Henry")').next().addClass('highlight'); 　　　//查找td中包含“Henry”的單元格的下一個(gè)單元格
$('td:contains("Comedy")').siblings().addClass('highlight');　　//查找td中包含“Comedy”的同級(jí)單元格
$('td:contains("Comedy")').parent().find('td:gt(0)').addClass('highlight');
//查找td中包含“Comedy”的父，再去查找td單元格編號(hào)大于0的單元格
$('td:contains("Comedy)').parent().find('td').not(':contains("Comedy")').addClass('highlight');
//查找td中包含“Comedy”的父，再去查找td單元格不包含“Comedy”的單元格

//訪問(wèn)DOM元素
var tag = $('#myelement').get(0).tagName;
});

第三章：事件――扣動(dòng)扳機(jī)

綁定事件：

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

可簡(jiǎn)寫為
$(‘#switcher-large’).click(function(){…});

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

接受兩個(gè)參數(shù)（都是函數(shù)）第一次點(diǎn)擊調(diào)用第一個(gè)函數(shù)，第二次點(diǎn)擊調(diào)用第二個(gè)
$(‘#switcher h3’).toggle(function(){
$(‘#switcher .button’).addClass(‘hidden’);

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

});

.toggleClass()是一種跟優(yōu)雅得方案，但對(duì)于交替執(zhí)行的操作而言，.toggle()的適用性更強(qiáng)

$(‘#switcher h3’).click(function(){
$(‘#switcher .button’).toggleClass(‘hidden’); //自動(dòng)檢查該類是否存在
});

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

接受兩個(gè)函數(shù)參數(shù)，第一個(gè)指針進(jìn)入，第二個(gè)指針離開

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

.unbind(‘click’)

移除事件
.trigger(‘click’)

模擬用戶操作
$(‘#switcher’).trigger(‘click’); 模擬點(diǎn)擊了一次switcher

第四章：效果――為操作添加藝術(shù)性

1.修改內(nèi)聯(lián)CSS

語(yǔ)法：
.css(‘property’,’value’);
.css(‘property’:’value’,’property’:’value’);

用法：
var currentSize = $(‘div.speech’).css(‘fontSize’);//得到div.speech得字體大小
var num = parasFloat(currentSize,10); //將currentSize轉(zhuǎn)換為Float型
var unit = currentSize.slice(-2); //返回從指定的字符開始的一個(gè)子字符串，-2為倒數(shù)第二個(gè)
num *= 1.5;
$(‘div.speech’).css(‘fontSize’,num+unit); //設(shè)置樣式

2.基本的顯示和隱藏

.show();
.hide();

用法：
$(‘p:eq(1)’).hide(); //將第二個(gè)段落隱藏

3.效果和速度
指定顯示速度
3種：slow、normal和fast 時(shí)間：0.6、0,4、0.2。也可以指定.show(850)
$(‘p:eq(2)’).show(‘slow’);

淡入和淡出

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

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

4.多重效果

語(yǔ)句：.animate({param1:’value1’,parame2:’value2’},speed,function(){回調(diào)});

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

這里使用簡(jiǎn)寫的show將高度、寬度回復(fù)到被隱藏之前的值

5.并發(fā)與排隊(duì)效果
處理一組元素
$(‘div.buttont’).animate({left:650},’slow’).animate({height:38},’slow’);
先移動(dòng)到left為650的位置，在將高度設(shè)置為38
$(‘div.button’)
       .fadeTo(‘slow’,0.5)                            //先淡化
       .animate({left:650},’slow’)           //在移動(dòng)
       .fadeTo(‘slow’,1.0)                            //在淡出
       .slideUp(‘slow’)                          //最后滑到上方隱藏

注意：排隊(duì)不適用于其他的非效果方法，例如：.css()
處理多組元素

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

回調(diào)函數(shù)：

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

$thisPara.slideUp(‘slow’);

});

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

第五章：DOM操作-基于命令改變頁(yè)面

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，為其添加屬性
深入理解$()工廠函數(shù)
$('back to top'); 創(chuàng)建新元素

2.插入新元素

.insertBefore()
.before()

作用相同，區(qū)別取決于將它們與其他方法進(jìn)行連綴

.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插入了作為目標(biāo)的錨

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

3.移動(dòng)元素

$('span.footnote').insertBefore('#footer');
將span中類為footnote的插入到id為footer的前面
標(biāo)注、編號(hào)和鏈接到上下文
    $('span.footnote').each(function(index){
        $(this)
            .before('^{' + (index+1) +

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

遍歷span.footnote，在各個(gè)元素前加標(biāo)注后，在將span.footnote添加到#footer前

插入腳注

$('

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

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

先創(chuàng)建一個(gè)ol元素notes，并添加到div.chapter后面，遍歷span.footnote，先添加標(biāo)注，然后通過(guò)appendTo其添加到ol末尾，最后又通過(guò)append添加一個(gè)錨元素。

4.包裝元素

.wrap()
.wrap('

5.復(fù)制元素

.clone()

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

將div.chapter中得第一段復(fù)制后插入在div.chapter前面

深度復(fù)制

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

只復(fù)制結(jié)構(gòu)，內(nèi)部的文本沒(méi)有復(fù)制過(guò)來(lái)，因?yàn)槲谋疽彩荄OM節(jié)點(diǎn)

通過(guò)復(fù)制創(chuàng)建突出引用

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 讓網(wǎng)站與時(shí)俱進(jìn)

1.基于請(qǐng)求加載數(shù)據(jù)
追加HTML

//載入遠(yuǎn)程 HTML 文件代碼并插入至 DOM 中

$('#dictionary').load('a.html',function(){
Alert(“加載完畢！”);//回調(diào)函數(shù)
})

操作JavaScript對(duì)象

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){ //通過(guò) HTTP GET 請(qǐng)求載入 JSON 數(shù)據(jù)
$.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 += '

';
});

執(zhí)行腳本

通過(guò) HTTP GET 請(qǐng)求載入并執(zhí)行一個(gè) JavaScript 文件

$.getScript('c.js',function(){
Alert(“加載完畢”);//回調(diào)函數(shù)
});

加載XML文檔

//通過(guò)遠(yuǎn)程 HTTP GET 請(qǐng)求載入信息。

$.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.選擇數(shù)據(jù)格式

3.向服務(wù)器傳遞數(shù)據(jù)

4.關(guān)注請(qǐng)求

方法：

.ajaxStart()
.ajaxStop()

當(dāng)AJAX請(qǐng)求開始且尚未進(jìn)行其他傳輸時(shí)，會(huì)觸發(fā).ajaxStart()的回調(diào)函數(shù)，相反，當(dāng)最后一次活動(dòng)請(qǐng)求終止時(shí)，則會(huì)執(zhí)行通過(guò).ajaxStop()注冊(cè)的回調(diào)函數(shù)。

示例：

//當(dāng)請(qǐng)求時(shí)，顯示#loading，結(jié)束時(shí)，隱藏loading

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

5.Ajax和事件

限制函數(shù)綁定的作用域

$(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 發(fā)表評(píng)論

強(qiáng)烈推薦：240多個(gè)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 是一個(gè)簡(jiǎn)單而又謙恭的用來(lái)把圖片覆蓋在當(dāng)前頁(yè)面上的腳本. 它能被快速安裝并且運(yùn)作于所有流行的瀏覽器.

最新更新 Version 2.0

圖片集: 分組相關(guān)的圖片并且能輕松的導(dǎo)航它們
視覺(jué)特效: 奇特的自適應(yīng)調(diào)整
向后兼容: yes!

點(diǎn)擊這里查看實(shí)例演示

如何使用:

步驟 1 - 安裝

1、Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果庫(kù). 你將需要外調(diào)這三個(gè) Javascript 文件在你的 header.

2、外調(diào) Lightbox CSS 文件 (或添加 Lightbox 樣式到你現(xiàn)行的樣式表中).

3、檢查 CSS 并確定調(diào)用的 prev.gif 和 next.gif 文件在正確的位置. 同樣要確定調(diào)用的 loading.gif 和 close.gif 文件及 lightbox.js 文件在正確的位置.

步驟 2 - 激活

1、添加 rel="lightbox" 屬性到任何一個(gè)鏈接標(biāo)簽去激活lightbox. 例如:
image #1
可選擇項(xiàng): 使用 title 屬性加上說(shuō)明.

2、如果你有一套你想分組的相關(guān)圖片, 接著上一部并且又在 rel 屬性中添加一個(gè)帶方括號(hào)的組名. 例如:
image #1
image #2
image #3

3、沒(méi)有限定每個(gè)頁(yè)面的圖片組數(shù)量和每個(gè)圖片組圖片的數(shù)量. 瘋了！

下載: Lightbox v2.04

Eric.Zhou 2008-09-01 20:17 發(fā)表評(píng)論

為jmesa表格的date類型數(shù)據(jù)加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;
}

}

現(xiàn)在需要修改tableFacade標(biāo)簽為

<jmesa:tableFacade

    id="tag" 

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

Eric.Zhou 2008-06-20 14:59 發(fā)表評(píng)論

JavaScript類庫(kù) - Rico

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

Apache License的，一個(gè)免費(fèi)使用的東東。
Rico (http://openrico.org/)是開源的JavaScript類庫(kù)，用來(lái)創(chuàng)建豐富的internet應(yīng)用。
1、可以方便地制作很玄地圓角矩形。
2、可以設(shè)置TAB面板
3、支持DRAG&DROP
4、提供一個(gè)LiveGrid的數(shù)據(jù)表格，支持Title Sorting和Page splite
5、提供一個(gè)Ajax引擎。
6、提供一個(gè)色彩庫(kù)，默認(rèn)一些色彩。
7、主頁(yè)是http://openrico.org/rico/home.page。

因?yàn)镽ico是建立在Prototype類庫(kù)之上的，所以你在使用Rico的時(shí)候必須對(duì)Prototype進(jìn)行引用：

Eric.Zhou 2008-05-13 15:28 發(fā)表評(píng)論

jMaki

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

jMaki是SUN支持的一個(gè)AJAX框架。這個(gè)項(xiàng)目的是讓Java開發(fā)人員在其基于Java的應(yīng)用程序中(不管是JSP標(biāo)簽庫(kù)還是JSF組件)都能使用AJAX技術(shù)。jMaki使用了Java與JavaScript中最優(yōu)秀的部分以此來(lái)提供一些Rich AJAX style widgets。jMaki當(dāng)前提供的bootstrap widget是來(lái)自Dojo,Scriptaculus,Yahoo UI Widgets,Spry,DHTML Goodies,和Google等組件庫(kù)。jMaki提供為這些widget組件庫(kù)提供了一個(gè)公共接口以便讓你可以在同一頁(yè)面中一起使用這些組件庫(kù)。如果你有興趣利用jMaki項(xiàng)目來(lái)快速開發(fā)Web應(yīng)用程序，可以使用NetBeans 5.5的jMaki插件。這個(gè)插件可以直接把jMaki組件拖放到JSP頁(yè)面中。如果不熟悉該插件可以通過(guò)其網(wǎng)站提供一段視頻來(lái)學(xué)習(xí)。

Eric.Zhou 2008-04-08 15:10 發(fā)表評(píng)論

ajax jsp 無(wú)刷新上傳文件

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

首先要說(shuō)的就是 ajax 是無(wú)法實(shí)現(xiàn)上傳文件的，可以想一下ajax與后臺(tái)通信都是通過(guò)傳遞字符串，怎么能傳遞文件呢？其實(shí)出于安全考慮js是不能操作文件的，所以就不要再說(shuō)用ajax來(lái)實(shí)現(xiàn)文件的上傳了，這是不可能的。
    而本文實(shí)現(xiàn)的文件上傳也是無(wú)頁(yè)面刷新的，可以說(shuō)是一種"類似AJAX"方法。
    開始之前先說(shuō)兩句無(wú)關(guān)的，其實(shí)在ajax出現(xiàn)之前，web應(yīng)用也可以是無(wú)刷新的，那時(shí)大多通過(guò)IFrame來(lái)做到這一點(diǎn)。當(dāng)然Ajax出現(xiàn)之后，人們一窩蜂地投奔Ajax 的陣營(yíng)了，iFrame 就乏人問(wèn)津了。但是用iFrame來(lái)實(shí)現(xiàn)無(wú)刷新上傳文件確實(shí)一個(gè)很好的選擇。ps：Ajax技術(shù)基本上可以說(shuō)是由google公司帶起來(lái)的，但少Gmail中上傳文件用的還是 IFrame，所以說(shuō)使用IFrame來(lái)上傳文件是最好的選擇。
    我在這里這里用的技術(shù)是jsp，其實(shí)asp，php等也是一樣可以這么實(shí)現(xiàn)的
    一共兩個(gè)文件就可實(shí)現(xiàn)：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 中主要要做的就是寫一個(gè) form 和 iframe ，并把 form 的 target 設(shè)為 iframe 的名字，注意要把 iframe 設(shè)為不可見(jiàn)，其他的都是正常的文件上傳的寫法，這樣刷新的頁(yè)面就是這個(gè)隱藏的 Iframe ，而在 index.html 中是不會(huì)有頁(yè)面刷新的，js的 callback 方法是回調(diào)方法。用于清空文件上傳框和顯示后臺(tái)信息，注意清空文件上傳框的方法，和普通方法有點(diǎn)不一樣。

--upload.jsp

＜%@ page language="Java" contentType="text/html; charset=gb2312" %＞
＜%@ page import="com.jspsmart.upload.SmartUpload"%＞
＜%
//新建一個(gè)SmartUpload對(duì)象
SmartUpload su = new SmartUpload();
//上傳初始化
su.initialize(pageContext);
// 設(shè)定上傳限制
//1.限制每個(gè)上傳文件的最大長(zhǎng)度。
su.setMaxFileSize(10000000);
//2.限制總上傳數(shù)據(jù)的長(zhǎng)度。
su.setTotalMaxFileSize(20000000);
//3.設(shè)定允許上傳的文件（通過(guò)擴(kuò)展名限制）,僅允許doc,txt文件。
su.setAllowedFilesList("doc,txt,jpg,rar,mid,waw,mp3,gif");
boolean sign = true;
//4.設(shè)定禁止上傳的文件（通過(guò)擴(kuò)展名限制）,禁止上傳帶有exe,bat,jsp,htm,html擴(kuò)展名的文件和沒(méi)有擴(kuò)展名的文件。
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 中只要注意最后輸出的格式就可以了。其實(shí)原理就是輸出一段js代碼到 iframe 中，然后在iframe中來(lái)控制它的父頁(yè)面。

OK，至此一個(gè)無(wú)刷新的頁(yè)面上傳組件就做好了，不要忘了在 WEB-INF/lib 下加上必須的 jspSmartUpload.jar 包。
需要說(shuō)明的是使用Iframe來(lái)上傳，狀態(tài)欄還是會(huì)有刷新的，因?yàn)閕frame 中的頁(yè)面刷新了嘛，但是外部頁(yè)面，就是你所看到的頁(yè)面是沒(méi)有刷新的，所以也可以說(shuō)是類似Ajax上傳。

Eric.Zhou 2008-03-19 10:23 發(fā)表評(píng)論

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 發(fā)表評(píng)論

在使用struts2的datetimepicker標(biāo)簽時(shí)候遇到JS錯(cuò)誤:dojo未定義錯(cuò)誤

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

在一個(gè)action跳轉(zhuǎn)頁(yè)面時(shí):
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="../../commons/taglibs.jsp"%>

時(shí)間控件沒(méi)有顯示出來(lái),而報(bào)JS錯(cuò)誤:dojo未定義錯(cuò)誤

解決辦法：
在頁(yè)面的標(biāo)簽中加入　就可以了
。。。

Struts 2 Cool Tags - Others
.....

。。。

Eric.Zhou 2008-02-25 10:18 發(fā)表評(píng)論

在Struts 2中使用JSON Ajax支持

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

JSON插件提供了一種名為json的ResultType，一旦為某個(gè)Action指定了一個(gè)類型為json的Result，則該Result無(wú)需映射到任何視圖資源。因?yàn)镴SON插件會(huì)負(fù)責(zé)將Action里的狀態(tài)信息序列化成JSON格式的數(shù)據(jù)，并將該數(shù)據(jù)返回給客戶端頁(yè)面的JavaScript。

　　簡(jiǎn)單地說(shuō)，JSON插件允許我們?cè)贘avaScript中異步調(diào)用Action，而且Action不再需要使用視圖資源來(lái)顯示該Action里的狀態(tài)信息，而是由JSON插件負(fù)責(zé)將Action里的狀態(tài)信息返回給調(diào)用頁(yè)面——通過(guò)這種方式，就可以完成Ajax交互。

　　Struts2提供了一種可插拔方式來(lái)管理插件，安裝Struts2的JSON插件與安裝普通插件并沒(méi)有太大的區(qū)別，一樣只需要將Struts2插件的JAR文件復(fù)制到Web應(yīng)用的WEB-INF/lib路徑下即可。

　　安裝JSON插件按如下步驟進(jìn)行：

　　(1)登陸http://code.google.com/p/jsonplugin/downloads/list站點(diǎn)，下載Struts2的JSON插件的最新版本，當(dāng)前最新版本是0.7，我們可以下載該版本的JSON插件。

　　(2)將下載到的jsonplugin-0.7.jar文件復(fù)制到Web應(yīng)用的WEB-INF路徑下，即可完成JSON插件的安裝。

　　實(shí)現(xiàn)Actio邏輯

　　假設(shè)wo,en輸入頁(yè)面中包含了三個(gè)表單域，這三個(gè)表單域?qū)τ谌齻€(gè)請(qǐng)求參數(shù)，因此應(yīng)該使用Action來(lái)封裝這三個(gè)請(qǐng)求參數(shù)。三個(gè)表單域的name分別為field1、field2和field3。

　　處理該請(qǐng)求的Action類代碼如下：　　

public class JSONExample
　　{
　　//封裝請(qǐng)求參數(shù)的三個(gè)屬性
　　private String field1;
　　private transient String field2;
　　private String field3;
　　//封裝處理結(jié)果的屬性
　　private int[] ints = {10, 20};
　　private Map map = new HashMap();
　　private String customName = "custom";
　　//三個(gè)請(qǐng)求參數(shù)對(duì)應(yīng)的setter和getter方法
　　public String getField1()
　　{
　　return field1;
　　}
　　public void setField1(String field1)
　　{
　　this.field1 = field1;
　　}
　　//此處省略了field1和field2兩個(gè)字段的setter和getter方法
　　...
　　//封裝處理結(jié)果的屬性的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;
　　}
　　//使用注釋語(yǔ)法來(lái)改變?cè)搶傩孕蛄谢蟮膶傩悦?
　　@JSON(name="newName")
　　public String getCustomName()
　　{
　　return this.customName;
　　}
　　public String execute()
　　{
　　map.put("name", "yeeku");
　　return Action.SUCCESS;
　　}
　　}

　　在上面代碼中，使用了JSON注釋，注釋時(shí)指定了name域，name域指定Action屬性被序列化成JSON對(duì)象的屬性名。除此之外，JSON注釋還支持如下幾個(gè)域：

serialize：設(shè)置是否序列化該屬性

　　deserialize：設(shè)置是否反序列化該屬性。

　　format：設(shè)置用于格式化輸出、解析日期表單域的格式。例如"yyyy-MM-dd'T'HH:mm:ss"。

　　配置該Action與配置普通Action存在小小的區(qū)別，應(yīng)該為該Action配置類型為json的Result。而這個(gè)Result無(wú)需配置任何視圖資源。

　　配置該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＞　　

　　在上面配置文件中有兩個(gè)值得注意的地方：

　　第一個(gè)地方是配置struts.i18n.encoding常量時(shí)，不再是使用GBK編碼，而是UTF-8編碼，這是因?yàn)锳jax的POST請(qǐng)求都是以UTF-8的方式進(jìn)行編碼的。

　　第二個(gè)地方是配置包時(shí)，自己的包繼承了json-default包，而不再繼承默認(rèn)的default包，這是因?yàn)橹挥性谠摪虏庞衘son類型的Result。

Eric.Zhou 2008-02-20 17:02 發(fā)表評(píng)論

Adobe AIR正式版三月推出要做RIA技術(shù)領(lǐng)導(dǎo)者

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

Adobe 2月18日表示，將在三月發(fā)布Adobe AIR（Adobe Integrated Runtime）正式版，要和微軟的Silverlight競(jìng)逐豐富網(wǎng)絡(luò)應(yīng)用程序RIA（Rich Internet Application）市場(chǎng)。

所謂RIA就是以動(dòng)畫、影音等多樣性打造網(wǎng)站的技術(shù)，而其底層除了微軟已在去年推出的Silverlight之外，就屬Adobe開發(fā)代號(hào)為Apollo的AIR，目前仍在Beta版。不過(guò)Adobe香港暨臺(tái)灣區(qū)總經(jīng)理黃耀輝今天表示，AIR正式版將在三月推出，希望在RIA技術(shù)中取得市場(chǎng)領(lǐng)導(dǎo)地位。

RIA可以在網(wǎng)站中做出交互式的應(yīng)用程序，也可以說(shuō)是實(shí)現(xiàn)Web 2.0概念的工具。例如可以做到交互式的電子下單系統(tǒng)、航空公司訂票系統(tǒng)等等。微軟在去年發(fā)表Silverlight時(shí)就展示出寶來(lái)證券、中華航空等企業(yè)應(yīng)用。而Adobe希望利用AIR做為開發(fā)平臺(tái)，再加上Flex和Flash兩種工具，做到RIA的應(yīng)用程序。

除了Adobe要以AIR做為RIA技術(shù)領(lǐng)導(dǎo)者外，微軟也積極耕耘這塊市場(chǎng)，去年才首度正式發(fā)表名為「銀光」的Silverlight 1.0，要搶攻Adobe耕耘已久的網(wǎng)站開發(fā)、設(shè)計(jì)市場(chǎng)。隨著Adobe即將推出AIR正式版，兩家廠商將展開正面對(duì)決。

對(duì)此微軟則是自信滿滿。臺(tái)灣微軟開發(fā)工具暨平臺(tái)推廣處產(chǎn)品營(yíng)銷經(jīng)理胡德民表示，微軟三月時(shí)會(huì)在美國(guó)的Mix 08大會(huì)上發(fā)表Silverlight 2.0的產(chǎn)品藍(lán)圖，預(yù)計(jì)在今年就會(huì)正式發(fā)表。微軟原本只將更新版本命名為Silverlight 1.1，不過(guò)由于功能比前一版改進(jìn)太多，因此在去年12月宣布直接發(fā)表Silverlight 2.0。

而去年9月首次發(fā)表的Silverlight 1.0版本，目前微軟尚不愿透露在臺(tái)灣地區(qū)的使用狀況，表示要晚一點(diǎn)才會(huì)公布。胡德民認(rèn)為，RIA技術(shù)的成功必須視企業(yè)進(jìn)入這項(xiàng)技術(shù)的狀況而定，微軟今年七、八月份將在臺(tái)灣舉行的Mix大會(huì)，會(huì)展示更多利用Silverlight打造的成功案例。另外胡德民也表示，AIR的目標(biāo)群眾在于開發(fā)者（developer），而微軟則是希望開發(fā)者和設(shè)計(jì)者（designer）都能使用微軟技術(shù)。

微軟自去年開始積極搶攻原是Adobe天下的開發(fā)市場(chǎng)，推出網(wǎng)頁(yè)設(shè)計(jì)工具平臺(tái)Expression Studio，其中有網(wǎng)頁(yè)建置工具、互動(dòng)設(shè)計(jì)工具等等，都被視為和Adobe的Flash打?qū)ε_(tái)。不過(guò)Adobe今天公布2007年的臺(tái)灣區(qū)營(yíng)業(yè)成長(zhǎng)為30%，黃耀輝說(shuō)，仍持續(xù)穩(wěn)定成長(zhǎng)，并沒(méi)有受到微軟加入開發(fā)市場(chǎng)的影響。

另外，Adobe今年在臺(tái)灣除了深耕RIA技術(shù)外，仍持續(xù)發(fā)展Acrobat、Creative Suite 3等產(chǎn)品，并在政府、金融、制造業(yè)間深耕Acrobat。手機(jī)端的應(yīng)用也會(huì)有新的進(jìn)展，和中華電信在手機(jī)上的Flash Cast服務(wù)今年就會(huì)推出

Eric.Zhou 2008-02-20 16:29 發(fā)表評(píng)論

Jmesa

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

Jmesa是ExtremeTable項(xiàng)目重新開發(fā)一個(gè)的Html表格組件，提供過(guò)濾、排序、分頁(yè)、數(shù)據(jù)導(dǎo)出等功能。Jmesa非常易于使用，可按自己的需求進(jìn)行擴(kuò)展。JMesa需要JDK1.5以上的環(huán)境。
該項(xiàng)目主頁(yè):http://code.google.com/p/jmesa/

Eric.Zhou 2008-01-17 09:24 發(fā)表評(píng)論

如何在dwr的回調(diào)函數(shù)中傳遞多個(gè)參數(shù)

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

Eric.Zhou 2007-12-28 23:42 發(fā)表評(píng)論

模塊介紹：jRating

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

簡(jiǎn)介：

這個(gè)模塊使用 jQuery 技術(shù)為節(jié)點(diǎn)提供評(píng)分功能，當(dāng) javascript 被禁止時(shí)，使用標(biāo)準(zhǔn)形式，如果啟用 javascript 就可以通過(guò)圖片 (如五星) 動(dòng)態(tài)進(jìn)行評(píng)分。

這個(gè)模塊能夠與 views 模塊協(xié)作，它提供一個(gè) views 字段，讓評(píng)分結(jié)果可以通過(guò) views 顯示。

鏈接：

http://drupal.org/project/jrating

Eric.Zhou 2007-11-29 11:49 發(fā)表評(píng)論

综合久久伊人,色8久久精品久久久久久蜜,欧美黑人巨大

高性能網(wǎng)站建設(shè)-示例

jQuery獲取重名input的數(shù)組值

jQuery的Validation插件[轉(zhuǎn)載]

Extjs－displayfield格式化日期

ExtJS的xtype列表

jquery 中對(duì)checkbox的一些操作

Jmesa中加入checkbox列和導(dǎo)出功能

ajax請(qǐng)求時(shí)的緩存的問(wèn)題[轉(zhuǎn)載]

防止jQuery Load使用緩存的方法[轉(zhuǎn)載]

Jmesa中處理Map的List對(duì)象

Jmesa中讓Toolbar和Statusbar在同一行

Jmesa- create a custom view

API

Tags

Jmesa中的Limit使用

Jmesa2.4.1小例子

jQuery中一些不常用的方法屬性【轉(zhuǎn)載】

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

連動(dòng)出發(fā)事件在jQuery中是如此簡(jiǎn)單與優(yōu)美

jQuery基礎(chǔ)教程筆記

' + entry['term'] + '

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

元素 $(this).fadeIn(); }); }); }); }); 6.安全限制 Eric.Zhou 2009-02-14 20:25 發(fā)表評(píng)論

強(qiáng)烈推薦：240多個(gè)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類型數(shù)據(jù)加filter

JavaScript類庫(kù) - Rico

jMaki

ajax jsp 無(wú)刷新上傳文件

Ajax.Updater

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

Options

在使用struts2的datetimepicker標(biāo)簽時(shí)候遇到JS錯(cuò)誤:dojo未定義錯(cuò)誤

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

});

6.安全限制

Eric.Zhou 2009-02-14 20:25 發(fā)表評(píng)論

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

Adobe AIR正式版三月推出要做RIA技術(shù)領(lǐng)導(dǎo)者