70個新鮮實用的JavaScript和Ajax技術（上、下）

文章目錄

• 1. 日曆與時間：執行個體和示範
• 2.導航的執行個體和示範
• 3.Tool Tip執行個體和示範
• 4.Menu：執行個體和示範
• 5.Slider：執行個體和示範
• 6.投影片：執行個體和示範
• 7.映像裁剪：執行個體和示範
• 8.預覽映像：執行個體和示範
• 9.檔案上傳：執行個體和示範
• 10.自動填滿：執行個體和示範
• 11.Lightbox：執行個體和示範
• 12.Form：執行個體和示範
• 13.Table：執行個體和示範
• 14.Worth Checking Out:執行個體和示範
• 15.Ajax：執行個體和示範

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

1. 日曆與時間：執行個體和示範

• Timeframe
  
  

“可拖曳的，可選擇的，更佳的日曆”，點擊查看示範：here

。

• 使用jQuery，建立一個類似於iCal的日曆
  
  

  類似於iPhone的行事曆程式，滑鼠觸碰時顯示事件的描述。

• Dateslider
  
  

這個元素可以讓您使用簡單的滑動條選擇日期。

• Elegant animated weekly timeline
  
  

設定一個明智的每周時間表，提醒你每天需要做的事情

• Unobtrusive datePicker widget
  
  

這個unobtrusive datePicker可以使用鍵盤，不需要嵌入JavaScript的模組，不使用彈出式視窗。

 

• Date Picker
  
  

它是一個日期選擇空間，支援多種日期格式，可以通過CSS自訂外觀，讓一星期中的某些天失效，讓預約的日期加亮顯示

2.導航的執行個體和示範

• 自動滾動頁面導航
  
  

如何使用script.aculo.us 建立一個自動滾動的頁面導航。

• 使用jQuery建立過濾
  
  

本指南將告訴你，如何使“按類別過濾”變的更有缺，只需要使用一點jQuery。

 

• 使用MooTools建立一個簡單強大的高亮效果
  
  

瞭解如何使用MooTools JavaScript架構，建立一個靈活的工具，突出你網站的產品和服務。

• Ext Accordion
  
  

一個Accordion小工具，InfoPanel使用Ext JS Library。它可以用於網頁導航，工具視窗，隱藏詳細資料，log-in forms，選擇對話，即使提示等…

• jQuery ListNav 外掛程式
  
  

ListNav，是一個jQuery外掛程式，它提供一種簡單的方法 用來建立基於字母的導航。建立後，可以使用CSS來進行樣式定義，放置到列表上方，顯示字母A到Z在列表的上方，點擊某個字母后，則過濾顯示以該字母開頭的條目。這個外掛程式比較適合用來最佳化那種比較長的列表，支援UL或OL列表。

3.Tool Tip執行個體和示範

• 使用MooTools重現jQuery首頁的Tool Tips
  
  

jQuery首頁的tool tip效果很漂亮，這裡我們將告訴你如何使用MooTools來創造相同的效果。

• Prototip
  
  

可以讓你輕鬆的建立即簡單又複雜的tool tips，基於Prototype JavaScript架構。你可以輕鬆的進行自訂，控制tool tip的位置並擷取配置的圓角。與Scriptaculous搭配使用，還可為其加入些漂亮的動畫效果。

• Simpletip
  
  

一個輕巧（只有3.4Kb便攜）jQuery外掛程式創造好的提示 。它允許你輕鬆建立工具提示的任何內容網頁上使用的力量， jQuery的選取器和事件管理。 該工具提示可以靜態，動態，甚至通過載入的AJAX與多種不同的視覺效果。

• Coda pop-up bubbles
  
  

當你的滑鼠放在一個可下載的圖片上時，如何重新創造出puff popup bubble，如所示。

4.Menu：執行個體和示範

• 使用jQuery平滑動態導覽功能表
  
  

漂亮的jQuery菜單，使用平滑動態效果。

• Fading菜單-替代文本
  
  

點按鈕後其他按鈕變暗

• jQuery Context Menu 外掛程式
  
  

用來顯示操作功能表（響應滑鼠右鍵）的外掛程式

 

• e24TabMenu – Ajax的下拉Tab菜單
  
  

它是script.aculo.us的擴充，用於產生Ajax下拉Tab菜單。可以將菜單平穩的展開與收縮。

5.Slider：執行個體和示範

• 有兩個旋鈕的MooTools滑塊
  
  

這個MooTools的滑塊有兩個旋鈕（最大值和最小值旋鈕），有刻度值

• MooTools CSS風格的捲軸
  
  

 

• 超多功能滑塊
  
  

有一個簡單的教程，使用MooTools，一步一步的教您實現超多功能的滑塊和水平滾動的動畫效果。

 

• 更好的分頁效果
  
  

一個小指令碼，可以將頁碼數字變得更美觀。

6.投影片：執行個體和示範

• noobSlide
  
  

noobSlide是一款基於mootools的投影片畫廊指令碼, 包含七種不同風格的投影片展示特效，運行流暢。

• Easy Slider
  
  

Easy Slider 是一個滑動門外掛程式，支援任何圖片或內容，當點擊時實現橫向或縱向滑動。它擁有一系列豐富的參數設定，可通過CSS來進行完全的控制。

 

• Supersized - 全螢幕背景/投影片jQuery外掛程式
  
  

Supersized 是一個jQuery外掛程式 ，可以自動調整背景映像的大小在瀏覽器視窗並運行它們作為一個投影片 ，沒有額外的空白，沒有捲軸-整個瀏覽器視窗總是填補。

• 動態JavaScript 投影片
  
  

這個輕量級的JavaScript動畫投影片指令碼 包含一系列很酷的功能來樣式化你的內容： 描述支援，連結支援，沒有命名限制，肖像圖片支援，縮圖狀態等等。

• Moving Boxes
  
  

一個帶按鈕的jQuery滑塊，可更換模板或調整面板的大小。

• Prototype Carousel with script.aculo.us
  
  

可快速的瀏覽項目，可以縱向，橫向或分組。

7.映像裁剪：執行個體和示範

• UvumiTools Crop
  
  

UvumiTools是一個功能強大的圖片剪裁控制項，基於Mootools架構開發。可以配置圖片剪裁最小尺寸，保持剪裁地區長寬比例，即時預覽剪裁圖片等功能。

• Kroppr
  
  

映像即時旋轉和縮放

• Jcrop
  
  

Jcrop是一個跨瀏覽器的jQuery圖片剪下外掛程式（jQuery image crop plugin）。支援對剪下框加CSS樣式，當選取或拖動時添加回調事件（Callbacks），剪下時能夠約束寬度與高度。

---------------------------------------------------------------------------------------------------------------------------------------

70個新鮮實用的JavaScript和Ajax技術（下）
2009-03-16 14:55
by 副主編 zly06

評論(9)

有10423人瀏覽

聲明：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
  A
  tutoComplete
  

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

• 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

• 查看圖片附件