21+ Ajax/CSS表格設計

轉:http://blog.csdn.net/ria2008/archive/2009/06/09/4254873.aspx

1) Tablecloth - Css Globe has decided to present Tablecloth. Which is a lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements.

Tablecloth 由CSS Globe 開發,是一個輕巧易於使用的表格,簡潔的將表格樣式添加到你的HTML 表格元素中。

2) Create a table like Orbitz’s airline flights- The Css Guy taught us how to create a table that would give an indication of relationships among the information provided for example - clicking on a cell should highlight the associated cell in the top row and left most column.

Ask the CSS Guy Table教給我們要如何去創建能夠清晰顯出去資料之間的相關聯繫的表格,例如:點擊一個表格元素時,將突了顯示這個元素,並且在縱列和橫列都顯示出相關的類別關係。

3) A CSS styled table- Veerle Duoh has demonstrated a beautiful usage of tables, for tabular data while implementing them with accessibility in mind and how to make them appealing for the eye using CSS.

Veerle Duoh 爲我們展示了一個漂亮的表格設計,並教我們如何使用CSS來吸引用戶的眼球。

4) Sortable Table Sort the columns in a table and filter elements in the table.

Sortable Table 演示瞭如何按升序或降序排列以及如何過濾表格中的數據。

5) Row Locking with CSS and JavaScript

- Again The Css Guy refered to this technique as ‘row locking’, since the effect stays in place until the user re-clicks (or unlocks) the row.

Css Guy再次對錶格使用了聚焦高亮的效果,除非用戶再次點擊,否則表單數據將一直保持亮高。

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

6) Vertical scrolling tablesIf you have a lot of table data but not much room to display it, then this might be the answer. A css only styled table with fixed column headings and footer and scrolling content.

如果您有大量的表格數據,但卻沒有太大的空間來展示它,這可能是個比較好的方法:一個純CSS的表格與固定的標題和頁腳,以及滾動顯示的內容。

7) Replicating a Tree table-The aim is to replicate a graphic table tree using HTML.

這是一個使用HTML 和CSS 設計的樹形狀表格。

8 ) Paginate, sort and search a table with Ajax and Rails-This example provide a dynamic interface which doesn’t need to reload the entire page when the table changes.

這個表格提供了一個動態的界面,而不需要重新刷新整個頁面。

9) Collapsible tables with DOM and CSS-This script add the arrow images in the footer allowing the table to be collapsed and expanded.
此表格加上箭頭形象的腳本提示,用來控制表格的伸展和收縮。

10) TableSorter plug-in for jQuery-Its main features include Multi-column sorting, Support for rowspan and colspan on TH elements and many other features

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

11) Stripe your tables the OO way-The ‘stripe’ method runs through each row in the specified table and applies the ‘alt’ class, then adds onmouseover and onmouseout functions.

使用了Javascript 爲表格中的行進行顏色交替,並且添加了onmouseoveronmouseout 事件,當鼠標點擊時,切換背景顏色。

12) MOOTOOLS javascript Table Row & Column highlighting-This shows an mootools javascript example that highlights the table row and column of the cell you are hovering over.

基於MooTools 框架,高亮顯示鼠標懸停時的單元格所在的行和列。

13) CSS Table Gallery-This is a showcase of 93 styled tables.

93 styled tables是一個專門收集表格樣式的站點,下面是來自一個表格樣式的截圖:

14) jQuery Table FilterThis example sorts/filters multiple columns

基於jQuery框架可以對數據進行各種不同的排序、過濾。

15) Sortable/Resizable/Editable TableKit TableKit is a collection of HTML table enhancements using the Prototype framework. TableKit currently implements row striping, column sorting, column resizing and cell editing using Ajax.

TableKit基於Prototype框架,專門收集各種HTML表格,可以利用Ajax實時的進行表格欄目大小、排序等編輯。

16) Make all your tables sortable



17) Zebra TablesAlistapart has provided us an excellent example of using JavaScript and the DOM to apply background-color styles to table cells.

alistapart爲我們提供了一個極好的例子,如何使用JavaScript和DOM的改變背景色風格,以突出顯示單元格。

18 ) Standardista Table Sorting is a JavaScript module that lets you sort an HTML data table by any column.

Standardista Table Sorting 是一個Javascript模塊,讓您可以對HTML數據表的任何欄目進行排序。

19) GridView3 Example

20) Mootable Because they are made from standard tables, they degrade nicely.

21) Drag & Drop Sortable Lists with JavaScript and CSS

可能還會有一些你更想尋找的詳細資料,下面是一些相關的資源鏈接:

如果你知道其它更強大的Ajax/CSS表格,歡迎在此留言。

發佈了42 篇原創文章 · 獲贊 0 · 訪問量 9萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章