70個新鮮實用的JavaScript和Ajax技術[收藏]

文章目錄

• 8.預覽映像：執行個體和示範
• 9.檔案上傳：執行個體和示範
• 10.自動填滿：執行個體和示範
• 11.Lightbox：執行個體和示範
• 12.Form：執行個體和示範
• 13.Table：執行個體和示範
• 14.Worth Checking Out:執行個體和示範
• 15.Ajax：執行個體和示範

聲明：JavaEye新聞文章的著作權屬於JavaEye網站所有，嚴禁任何網站轉載本文，否則必將追究法律責任！

隨著互連網的不斷髮展，網頁的製作也充滿了活力，開發人員使用各種各樣的技術使網頁變得更加豐富，我們將為你推薦70個新鮮實用的JavaScript和Ajax技術。這是本文的第二部分，第一部分：70個新鮮實用的JavaScript和Ajax技術（上）

 

8.預覽映像：執行個體和示範

• imgPreview

imgPreview是一個jQuery 外掛程式，可以讓使用者在點選連結前對映像進行預覽。 如果圖片已經被點擊過，當再次懸浮的時候，就會即時出現，因為已經載入過。

 

• FancyZoom

用來查看網頁中內嵌的照片和映像的完整大小圖片，而不需要單獨的網頁載入。
Fancyzoom主要為使用者提供一個簡潔實用的圖片展示過程。

 

• Dojo Zoomer

這是一個不錯的JavaScript做的圖片展示，不需要使用Flash，可以隨便的挑選局部放大，並且還可以分頁。

 

9.檔案上傳：執行個體和示範

• 多檔案上傳

讓您建立一個form，允許使用者上傳多個檔案

 

• FancyUpload

FancyUpload是一個採用Flash與Ajax（MooTools）技術實現包含上傳進度條的多檔案上傳組件，類似於SWFUpload。

 

• Extension:UploadForm

UploadForm基於ext開發的檔案上傳組件。可以把多個檔案添加到上傳隊列裡面，也可以從隊列裡面移除不需要的檔案，或都清空整個隊列。

 

10.自動填滿：執行個體和示範

•  JavaScrip AtutoComplete

一個獨立的控制項，擁有自動填滿功能。

• AutoComplete Control

建立一個google推薦的filter，使用自動填滿控制。

 

• Autocomplete

協助頁面使用者的文字框輸入， 顯示提示資訊

 

• Proto! 文字框列表的自動填滿
  
   

 

11.Lightbox：執行個體和示範

 

• Lightview

高可配置性的具有投影片功能Javascript庫

• Sexy LightBox 2

Sexy Lightbox 2是一個精美的Lightbox複製，不過它更小巧。 支援顯示圖片和HTML元素，並且完全相容HTML， 也就是說它可以顯示條目，頁面，視頻和所有其它你想要顯示的東西。

 

• FancyBox

一個jQuery外掛程式，擁有許多強大的功能：自動調整，以適應映像的視窗；一個不錯的陰影縮放效果；可通過自訂設定和CSS，內嵌內容顯示等……

 

• LightWindow

LightWindow 是一個高度可配置支援任何媒體顯示的Lightbox燈箱效果，基於Prototype & script.aculo.us建立。它可以支援任何媒體內容顯示，包括Flash, Quicktime, Youtube視頻或者是一個外部網頁。另外，它還擁有Gallery功能支援，模態視窗可定製的位置和自動調整大小以適合內容。

 

12.Form：執行個體和示範

• FancyForm

FancyForm是一個基於mootools的強大選擇框指令碼，它為選擇框提供最大的靈活性用來替找HTML原來面貌和功能的表單元素。其使用簡單，且支援各大主流瀏覽器。

 

• 使用jQuery改變form的輸入樣式

本教程可以協助您在您選擇的form上添加css類和預設值。

• Form.Check

Form.Check是一個方便你處理用戶端表單校正的MooTools外掛程式。

 

• fValidator

fValidator是一個用於處理表單校正的JavaScript工具。

 

• 使用輸入值作為提示

• 自訂表格單元素

這個指令碼增強了表單元素包括：選項按鈕，複選框，檔案上傳，文本，文字框，映像，還有選擇，提交和重設按鈕。

 

13.Table：執行個體和示範

• TableGear

TableGear將獲得的資料存入一個網頁，它處理提交的資料都來自於AJAX的調用和傳遞，並將資料傳回應用程式。

 

• JavaScript table sorter

這是一個能夠將標準Table轉換成可排序Grid的JavaScript程式。它能夠自動識別每列的資料類型，指定需要排序的列。

 

• DrasticGrid

DrasticGrid 是一個以Ajax 為基礎的可編輯DataGrid

• Sorttable

sorttable 是一個js庫用來對錶格做排序，使用超級簡單

 

14.Worth Checking Out:執行個體和示範

 

• typeface.js

提供了一個字型的解決方案，你能使用任何字型顯示，不管用戶端是否安裝了這種字型，且不使用Flash。

 

• 可拖曳排序的列表

• Starbox

Starbox 可以協助你很容易地建立各種各樣的星形評分條。它基於prototype 架構，還可以簡單地通過定製CSS 樣式檔案來改變預設和懸停時星星的顏色。

• jQuery alert dialogs

jQuery Alert Dialogs類比了alert、confirm、prompt的效果，這樣在IE上prompt不再出現煩人的阻擋訊息。

 

• 建立互動式的地圖，使用jQuery替代Flash

這個地圖儘可能使用平滑的動態效果和清晰的映像。

 

• jQuery Fade In.Fade Out

這是一個用於讓圖片產生淡入淡出效果的jQuery外掛程式。

• 使用script.aculo.us改變透明度

此教程詳細的說明了如何使用script.aculo.us來實現改變透明度的效果。

 

• mouseenter/mouseleave的Morph效果

在這個指南中，您將會瞭解如何添加一些驚人的效果，滑鼠移至上方和滑鼠離開時的效果。

 

• Editable

這是一個可定製的jQuery editable plugin。當前它能夠將任意不可編輯的標籤（span、div、p...等）轉換成可編輯的text input、password、textarea、下拉式清單（drop-down list）等標籤。你可以利用它的editableFactory對象來擴充添加自己所需的input type。

 

15.Ajax：執行個體和示範

• Ajax使用者可用性檢查，使用MooTools

這個執行個體可以告訴您如何驗證使用者名稱的是否可用。

• Ajaxify

它是一個jQuery外掛程式，能夠將一個頁面中的所有連結轉換成Ajax載入和提交請求。

• AJAX file upload

Ajax檔案上傳外掛程式讓使用者能夠很方便地上傳多個檔案而無需重新整理頁面。此外，可以使用任何元素（圖片，文字，按紐等）來觸發檔案選擇視窗。

 

• Ajax頁面載入，使用MooTools Fx.Explode

一個很炫的MooTools效果：點擊任何Fx.Explode的元素，將會關閉螢幕。再次點擊，又會奇蹟般的重新出現。

 

• 動態Ajax記錄缺失，使用MooTools

瞭解如何在WordPress中建立這樣的效果，當你單擊刪除檔案是，該功能表項目將會變為紅色然後消失，這裡將告訴您如何使用MooTools JavaScript實現這一功能。

 

• 大小: 23.5 KB

• 大小: 18.5 KB

• 大小: 31.4 KB

• 大小: 15.9 KB

• 大小: 11.5 KB

• 大小: 22.9 KB

• 大小: 21.7 KB

• 大小: 19.8 KB

• 大小: 20.6 KB

• 大小: 21.3 KB

• 大小: 17.5 KB

• 大小: 24.3 KB

• 大小: 18.1 KB

• 大小: 27.9 KB

• 大小: 11.7 KB

• 大小: 6.2 KB

• 大小: 14.8 KB

• 大小: 17.5 KB

• 大小: 12.5 KB

• 大小: 9.2 KB

• 大小: 15.6 KB

• 大小: 31.3 KB

• 大小: 39.8 KB

• 大小: 27.6 KB

• 大小: 14.2 KB

• 大小: 13.6 KB

• 大小: 9.8 KB

• 大小: 24.4 KB

• 大小: 52.3 KB

• 大小: 9.5 KB

• 大小: 8.1 KB

• 大小: 27 KB

• 大小: 46.5 KB

• 大小: 12.4 KB

• 大小: 29.5 KB

• 大小: 26.9 KB

• 大小: 22.1 KB

• 大小: 24.1 KB

• 查看圖片附件

來自: smashingmagazine