byterat

當(dāng)談到表格數(shù)據(jù)的設(shè)計(jì)時，沒有太多的網(wǎng)頁設(shè)計(jì)師會有太大的興趣。今天我們已經(jīng)收集了20多個功能超大且看上去挺漂亮的Ajax/CSS表格設(shè)計(jì)，并且教你一些表格設(shè)計(jì)中所運(yùn)用的技巧，例如表格數(shù)據(jù)的排序和過濾等。

OK，讓我們來看一下這些表格:

1. Tablecloth

Tablecloth 由CSS Globe 開發(fā)，是一個輕巧易于使用的表格，簡潔的將表格樣式添加到你的HTML 表格元素中。

2. Ask the CSS Guy Table

Ask the CSS Guy Table教給我們要如何去創(chuàng)建能夠清晰顯出去資料之間的相關(guān)聯(lián)系的表格，例如:點(diǎn)擊一個表格元素時，將突了顯示這個元素，并且在縱列和橫列都顯示出相關(guān)的類別關(guān)系。

#3. A CSS styled table version 2

Veerle Duoh 為我們展示了一個漂亮的表格設(shè)計(jì)，并教我們?nèi)绾问褂肅SS來吸引用戶的眼球。

#4. Sortable Table

Sortable Table 演示了如何按升序或降序排列以及如何過濾表格中的數(shù)據(jù)。

5. Row Locking with CSS and JavaScript

Css Guy再次對表格使用了聚焦高亮的效果，除非用戶再次點(diǎn)擊，否則表單數(shù)據(jù)將一直保持亮高。

他還給了我們另一個示例:another example to Lock rows with radios .

#6. Vertical scrolling tables

如果您有大量的表格數(shù)據(jù)，但卻沒有太大的空間來展示它，這可能是個比較好的方法:一個純CSS的表格與固定的標(biāo)題和頁腳，以及滾動顯示的內(nèi)容。

7. Replicating a Tree table

這是一個使用HTML 和CSS 設(shè)計(jì)的樹形狀表格。

8 ) Paginate, sort and search a table with Ajax and Rails

這個表格提供了一個動態(tài)的界面，而不需要重新刷新整個頁面。

9. Collapsible tables with DOM and CSS

此表格加上箭頭形象的腳本提示，用來控制表格的伸展和收縮。

10. TableSorter plug-in for jQuery

它的主要特性包括多列排序，支持<TH>的rowspan和colspan屬性以及許多其他功能。

11. Stripe your tables the OO way

使用了Javascript 為表格中的行進(jìn)行顏色交替，并且添加了onmouseover 和onmouseout 事件，當(dāng)鼠標(biāo)點(diǎn)擊時，切換背景顏色。

12. MooTools Table Row & Column highlighting

基于MooTools 框架，高亮顯示鼠標(biāo)懸停時的單元格所在的行和列。

13. CSS Table Gallery

93 styled tables是一個專門收集表格樣式的站點(diǎn)，下面是來自一個表格樣式的截圖:

14. jQuery Table Filter

可以對數(shù)據(jù)進(jìn)行各種不同的排序、過濾。

15. Sortable/Resizable/Editable TableKit

TableKit基于Prototype框架，專門收集各種HTML表格，可以利用Ajax實(shí)時的進(jìn)行表格欄目大小、排序等編輯。

16. Make all your tables sortable

17. Zebra Tables

alistapart為我們提供了一個極好的例子，如何使用JavaScript和DOM的改變背景色風(fēng)格，以突出顯示單元格。

18. Standardista Table Sorting

Standardista Table Sorting 是一個Javascript模塊，讓您可以對HTML數(shù)據(jù)表的任何欄目進(jìn)行排序。

19. GridView3 Example

20. Mootable

21. Drag & Drop Sortable Lists with JavaScript and CSS

可能還會有一些你更想尋找的詳細(xì)資料，下面是一些相關(guān)的資源鏈接:

• Bring on the Tables
• Accessible Data Tables
• Designing Data Tables
• Brainjar Table Sort
• Table Sorter

如果你知道其它更強(qiáng)大的Ajax/CSS表格，歡迎在此留言。

/**
 * 加碼解碼工具
 * @author lwm
 *
 */

public class Encode {
 
 /*
  * 對應(yīng)javascript的escape()函數(shù), 加碼后的串可直接使用javascript的unescape()進(jìn)行解碼
  */
 public static String escape(String src) {
  int i;
  char j;
  StringBuffer tmp = new StringBuffer();
  tmp.ensureCapacity(src.length() * 6);
  for (i = 0; i < src.length(); i++) {
   j = src.charAt(i);
   if (Character.isDigit(j) || Character.isLowerCase(j)
     || Character.isUpperCase(j))
    tmp.append(j);
   else if (j < 256) {
    tmp.append("%");
    if (j < 16)
     tmp.append("0");
    tmp.append(Integer.toString(j, 16));
   } else {
    tmp.append("%u");
    tmp.append(Integer.toString(j, 16));
   }
  }
  return tmp.toString();
 }

 /*
  * 對應(yīng)javascript的unescape()函數(shù), 可對javascript的escape()進(jìn)行解碼
  */
 public static String unescape(String src) {
  StringBuffer tmp = new StringBuffer();
  tmp.ensureCapacity(src.length());
  int lastPos = 0, pos = 0;
  char ch;
  while (lastPos < src.length()) {
   pos = src.indexOf("%", lastPos);
   if (pos == lastPos) {
    if (src.charAt(pos + 1) == 'u') {
     ch = (char) Integer.parseInt(src
       .substring(pos + 2, pos + 6), 16);
     tmp.append(ch);
     lastPos = pos + 6;
    } else {
     ch = (char) Integer.parseInt(src
       .substring(pos + 1, pos + 3), 16);
     tmp.append(ch);
     lastPos = pos + 3;
    }
   } else {
    if (pos == -1) {
     tmp.append(src.substring(lastPos));
     lastPos = src.length();
    } else {
     tmp.append(src.substring(lastPos, pos));
     lastPos = pos;
    }
   }
  }
  return tmp.toString();
 }

}

讀 YUI ，EXT等源碼的時候看JS天旋地轉(zhuǎn)，那可不是51JS上那種挪挪位置就能理解的，此刻如果沒有JavaScrip的基礎(chǔ)，更是像沒有星光的黑夜…….

自以為覺得Js對象是很好理解的東東，然而真實(shí)踐起來卻一片糊涂。
通過查閱經(jīng)典書籍《Professional JavaScript For Web Developers》稍微有些理解了

JavaScript的基本類型
原始類型如: Undefined Null Boolean Number String 等 用 typeof方法能辨別之
引用類型如: Object Function Array Boolean Number String Date等，用insanceof方法辨別之

嚴(yán)格來講，JavaScript沒有對象(Object),但是由于和OO術(shù)語對應(yīng)，所以也稱之為對象。所以Array,Function，基本類型，引用類型，函數(shù)，以及函數(shù)的屬性 等等這些都是對象。

而對象分類，則可以分為內(nèi)置對象(Built-in Object) 和宿主對象(host object)。
內(nèi)置對象如 Math,Data啊。
宿主對象則如 BOM,DOM之類.

重新回顧了下這些基本概念之后，在做簡單實(shí)踐就有些理解了。
因此對象的使用，創(chuàng)建方式不盡相同，最簡單的歸類如下:

1 基本創(chuàng)建方式

function Class() {
window.alert("Hello Class!");
}
var clz= new Class();

2 訪問對象成員

function Class(){
this.x = " this is x";
this.y = "this is y";
this.z = viewXY;
function viewXY(){
alert("x+","+y);
}
}
var clz= new Class();
clz.viewXY();

3 對象繼承

function Parent() {
this.type= "human!";
}
function Child(){
this.age = "26";
this.sex ="male";
this.say= myInfo;
function myInfo(msg){
alert(msg+this.type+ ","+this.age+","+this.sex);
}
}
Child.prototype = new Parent();
var clild = new Child();
clild.say("I'm ");

4.重用原對象 (書上的例子太好了，搬來了)

Funcion.prototype.toString() = function(){
return "Function code hidden";
}
function sayHi(){
alert("hi");
}
alert(sayHi.toString());

希望能做到以下幾點(diǎn):

1. 在Java服務(wù)端架構(gòu)的設(shè)計(jì), 選型, 方案等方面有所突破! -- 這是最主要的!
2. 也想玩一玩Web前端的AJAX編程, RIA(富互聯(lián)網(wǎng)應(yīng)用)等等
3. 熟悉Linux/Unix系統(tǒng)的命令行操作
4. 在Java中跑腳本語言Python, JRuby等等
5. 項(xiàng)目管理

暫時就這么多吧!

圖像的預(yù)加載

       瀏覽器通常的工作方式是：只有當(dāng)要求加載圖像的HTTP請求被發(fā)送的時候，圖像才會被加載，而不論它是被動地通過<img>標(biāo)記加載，還是主動地通過方法調(diào)用加載。所以，如果你有一段JavaScript，需要在鼠標(biāo)懸停的時候切換圖像，或者在超時之后自動地更換圖像，那么你就可能會在從服務(wù)器取回圖像的時候隨時碰到等待，時間會從數(shù)秒鐘到幾分鐘不等。當(dāng)你以較慢的速度連接到Internet上的時候，或者被取回的圖像非常巨大的時候，這種狀況尤其顯著，而這種數(shù)據(jù)延遲通常都會毀掉你所期望的效果。

        有些瀏覽器會試圖轉(zhuǎn)嫁這一問題，比如把圖像保存在本地緩沖區(qū)里，這樣以后對它的調(diào)用就能夠很快進(jìn)行了，但是需要第一次調(diào)用圖像的時候仍然會產(chǎn)生延遲。預(yù)加載是一項(xiàng)在需要圖像之前就把它下載到緩沖區(qū)里的技術(shù)。通過這種方式，當(dāng)真的需要圖像的時候，它可以被從緩沖區(qū)里取出來，并立即顯示出來。

Image()對象
        預(yù)加載圖像最簡單的方法用JavaScript將一個新的Image()對象實(shí)例化，并把你想要預(yù)加載的圖像的URL傳遞給它。假設(shè)我們有一個叫做http://www.host01.com/Get/jsp/00040004/heavyimagefile.jpg的圖像，我們希望，當(dāng)用戶把鼠標(biāo)放在一個已經(jīng)顯示過的圖像上的時，系統(tǒng)能夠顯示出這個圖像。為了預(yù)加載這個圖像，以便實(shí)現(xiàn)更快的響應(yīng)時間，我們只用創(chuàng)建一個新的Image()對象，將其命名為heavyImage，并使用onLoad()事件處理程序把它同時加載到頁面上。

1 < html >< head >< script  language  = "JavaScript" > function  preloader()  {heavyImage  =   new  Image(); heavyImage.src = " http://www.host01.com/Get/jsp/00040004/heavyimagefile.jpg " ;} </ script ></ head >< body  onLoad ="javascript:preloader()" >< a  href ="#"  onMouseOver ="javascript:document.img01.src='http://www.host01.com/Get/jsp/00040004/heavyimagefile.jpg'" >< img  name ="img01"  src =http://www.host01.com/Get/jsp/00040004/"justanotherfile.jpg" ></ a ></ body ></ html >
2

          要注意的是，圖像標(biāo)記自身并不會處理onMouseOver()和onMouseOut()事件，這就是為什么上面例子里的<img>標(biāo)記被放在一個<a>標(biāo)記里，后者的確加入了對這些事件類型的支持。
用數(shù)組加載多個圖像

           在實(shí)際操作中，你可能需要預(yù)加載一幅以上的圖像；例如，在包含有多個圖像翻滾（rollover）的菜單條里，或者如果你正在嘗試創(chuàng)建平滑的動態(tài)效果。這并不困難；你所需要做的就是使用JavaScript的數(shù)組，就像下面例子里的一樣：

1 < script language = " JavaScript " > function  preloader()  {  //  counter var i = 0; // create object imageObj = new Image(); // set image list images = new Array(); images[0]="image1.jpg" images[1]="image2.jpg" images[2]="image3.jpg" images[3]="image4.jpg" // start preloading for(i=0; i<=3; i++) { imageObj.src=images[i]; }
2 }   </ script >

         在上面的例子里，你先定義變量i和叫做imageObj的Image()對象。然后定義一個叫做images[]的新數(shù)組，在這個數(shù)組里，每個數(shù)組元素都保存著需要預(yù)加載的圖像來源。最后，創(chuàng)建一個for()循環(huán)，讓它在數(shù)組里循環(huán)，并將它們中的每一個都指派給Image()對象，這樣就能夠把它預(yù)加載到緩沖區(qū)里。
onLoad()事件處理程序
        就和JavaScript里的其它很多對象一樣，Image()對象也帶有多個事件處理程序。這其中最有用的毫無疑問的就是onLoad()處理程序了，它會在完成圖像加載的時候被調(diào)用。這個處理程序可以與自定義的函數(shù)一起使用，以便在完成圖像加載之后進(jìn)行特定的任務(wù)。下面的例子通過在圖像加載的時候顯示“請等待（please wait）”提示信息來說明這個問題，然后在圖像完成加載之后就向?yàn)g覽器發(fā)送一個新的URL。

< html >< head >< script  language ="JavaScript" > //  create an image objectobjImage = new Image(); // set what happens once the image has loaded objImage.onLoad=imagesLoaded(); // preload the image fileobjImage.src='http://www.host01.com/Get/jsp/00040004/images/image1n.gif';// function invoked on image loadfunction imagesLoaded(){ document.location.href='index2.html';}</script></head><body>Please wait, loading images</body></html>

       當(dāng)然，你還可以創(chuàng)建一個圖像數(shù)組，對它進(jìn)行循環(huán)，預(yù)加載每個圖像，并在每個階段對已加載圖像的數(shù)量保持跟蹤。一旦加載了所有的圖像，事件處理程序就能夠按照設(shè)定把瀏覽器帶到下一個頁面（或者進(jìn)行其他的任務(wù)）。

預(yù)加載與多狀態(tài)菜單

          現(xiàn)在，把你剛剛學(xué)到的理論付諸真正的實(shí)踐怎么樣？下面一部分內(nèi)容就是我碰巧編寫的一段代碼——一個由多個按鈕（圖像鏈接）組成的菜單條——其中每個按鈕都可能處于三種狀態(tài)中的一種：正常（normal）、hover（懸停）和點(diǎn)擊（click）。由于所有的按鈕都有多個狀態(tài)，所以就有必要使用圖像預(yù)加載來確保菜單能夠根據(jù)其切換到的狀態(tài)進(jìn)行快速的響應(yīng)。列表A里的代碼就說了這一點(diǎn)。

           列表A里的HTML代碼會建立一個由四個按鈕組成的菜單條，每個按鈕都有三種狀態(tài)：正常、懸停和點(diǎn)擊。其要求如下：

          但鼠標(biāo)移動到處于正常狀態(tài)的按鈕上時，按鈕會變?yōu)閼彝顟B(tài)。當(dāng)鼠標(biāo)移開的時候，按鈕又會恢復(fù)到正常狀態(tài)。當(dāng)鼠標(biāo)點(diǎn)擊按鈕的時候，按鈕就會變?yōu)辄c(diǎn)擊狀態(tài)。它會一直保持這個狀態(tài)，直到另外一個按鈕被點(diǎn)擊。如果有一個按鈕被點(diǎn)擊，那么其他的按鈕就都不能處于點(diǎn)擊狀態(tài)。其他的按鈕只能夠處于懸停或者正常狀態(tài)。一次只能有一個按鈕可以被點(diǎn)擊。一次只能有一個按鈕處于懸停狀態(tài)。
        第一項(xiàng)任務(wù)是建立保存有菜單每個狀態(tài)的圖像的數(shù)組。與這些數(shù)組元素相對應(yīng)的<img>元素也都在HTML文檔的主體里被創(chuàng)建，并按順序命名。要注意的是，對數(shù)組值的索引是從0開始的，而相應(yīng)的<img>元素是從1開始命名的——這就需要在腳本后面的一段里進(jìn)行某種計(jì)算上的調(diào)整。

        PreloadImages()函數(shù)會負(fù)責(zé)把所有的圖像都加載到緩沖區(qū)里，這樣的話對鼠標(biāo)移動的響應(yīng)時間會被減到最小。一個for()循環(huán)被用在第一步里創(chuàng)建的圖像里進(jìn)行迭代，并預(yù)加載每一個圖像。

            ResetAll()函數(shù)是把所有圖像恢復(fù)都到它們正常狀態(tài)的方便方法。這是有必要的，因?yàn)楫?dāng)菜單的項(xiàng)目被點(diǎn)擊的時候，菜單里其他所有的項(xiàng)目都必須在被點(diǎn)擊項(xiàng)目能夠切換到點(diǎn)擊狀態(tài)之前恢復(fù)到正常狀態(tài)。

        SetNormal()、setHover()和setClick()函數(shù)負(fù)責(zé)把特定圖像（圖像的編號被作為函數(shù)的自變量進(jìn)行傳遞）的來源分別改為正常、懸停或者點(diǎn)擊狀態(tài)。由于被點(diǎn)擊的圖像必須一直保持點(diǎn)擊狀態(tài)，直到另外一個圖像被點(diǎn)擊（見第二項(xiàng)要求），所以它們暫時不會對鼠標(biāo)移動作出反應(yīng)；這樣的話，如果按鈕還不是處在點(diǎn)擊狀態(tài)，那么setNormal()和setHover()函數(shù)所包括的代碼就只能用來改變按鈕的狀態(tài)。

         上面所提到的預(yù)加載只是提高你JavaScript效果響應(yīng)時間的多種方法之一。就在你的網(wǎng)站上使用上面列出的技巧，并根據(jù)你的要求在需要的地方更改它們吧。祝你好運(yùn)！