jQuery UI 介紹

jQuery UI 介紹

最近寫新專案的時候找了一大堆的plug-in,統一整理了一下,我覺得比較好用的。

幾乎都是支援 IE6- IE8 & Firefox,特別提醒一下:通常為了讓IE6也可以正常運作,通常會判斷是否為IE6的的瀏覽器來加掛for IE6的CSS,不過判斷標準如果包含以XMLHttpRequest來判斷,要特別注意是否有加掛MicrosoftAjax.js,因為MicrosoftAjax.js裡面宣告了:


	window.XMLHttpRequest=function()
	{
		var b=["Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP"];
		for(var a=0,c=b.length;a<c;a++)
			try
				return new ActiveXObject(b[a])}
			catch(d)
			{
			
			}
		return 	null
	};

原本IE6是沒有XMLHttpRequest物件的,可是因為這隻js,所以無法再以XMLHttpRequest來判斷是否為IE6瀏覽器哦!請自行改為其它的判斷方式(看是用版本什麼之類的…)

 

排版相關:

1. Masonry

通常我們利用CSS float來進行排版的時候,如果每個區塊的大小不同,很容易造成版面有空缺;但是利用Masonry可以把版面簡單的排滿。

image

 

多媒體相關:

1.Media Plugin

有需要外掛多媒體到網站內?利用Media Plugin可以輕鬆的處理各種的多媒體哦。支援的格式包含了:

image

 

循環效果:

1. jQuery Cycle Plugin

支援了pause-on-hover, auto-stop, auto-fit, before/after各種事件,而且也有多達七種不同循環效果,很適合拿來做跑馬燈或輪播的效果。

 

2. jCarousel

很適合用來做圖片展示效果,可以自動播放、點擊播放、也可以控制一次轉動張數。

image

 

頁籤效果:

1. tabs

應該很多人都看過,jQuery UI 最基本的Tab

image

 

2. JQuery TabContainer Theme with Tab Transition Animations

想要一個和ASP.NET Ajax Toolkit一樣有動畫的tab嗎?那就試試這套吧!DEMO

image

 

表格相關:

1. tablesorter

嗯,看名稱就知道是幹麼的plug-in

image

 

日曆、日期相關:

1. FullCalendar

這套是非常適合拿來做行事曆的外掛,除了月,還有週、日的顯示方式,支援的事件也很多種。而且還可以以拖曳的方式來修改事件日期,也可以跨天哦!。

image

 

我想大家對日期選擇套件應該看到都很花了,所以這邊只介紹同時可以選時間的:

2. Timepicker

利用jQuery UI的日曆加上自建的時間條。

image

 

選單相關:

1. ContextMenu

滑鼠右鍵選單。

image

2. jQuery Context Menu Plugin

可以更彈性的控制顯示的按鈕。

image

 

3. MenuMatic

想要漂亮的動態選單效果嗎?不管是直的橫的都可以哦~

image

image

4. LavaLamp

顯示目前選單選取狀態的UI,非常小哦!滑動效果非常的Smooth(作者還特地用紅字寫了只有700bytes…)

image

image

 

顯示訊息相關:

1. jGrowl

相要動態呈現給使用者的訊息嗎?jGrowl提供了動態訊息顯示,不管訊息要在右上右下,往上面長,往下面長,都可以利用jGrowl輕鬆控制哦。

image

 

2. Messenger

Outlook的通知效果!

 

圖表相關:

1. jQuery Visualize

如果已經有統計表格了,想要加上統計圖表,可以試試這套哦!(含折線、直條、圓餅圖)

image

 

 

2. Flot

image

 

表單相關:

1. formValidator

想找個漂亮的表單驗證嗎?這套可以幫你把錯誤訊息標示在該輸入項上,不用擔心版面會被破壞哦!

image

 

2. Form Plug-in

非同步送出表單,可以同時配合jQuery 的validation哦!


{
	submitHandler: function(form)
	{
		$("#form").ajaxSubmit({ success: function(data)
		{
			//......
		}});
	}
});

檔案上傳:

1. Ajax Upload

想要個一個動作就做完非同步上傳的功能?然後還要同時附帶資料?也許這套就是你要找的哦。不管是按鈕,連結,還是需自訂的小視窗。

image

 

控制項相關:

1. MultiSelect

想要個很炫的下拉式選單然後還要可以勾選項目的功能嗎?

image

 

2. State Switch

想要有個不太一樣的radio?State Switch可以依照不同的值來顯示目前目前狀態哦!

image

 

3. AutoComplete

以前有寫過使用方法,請看這裡→ASP.NET MVC with jQuery Auto-complete Textbox

 

lightbox效果:

1. colorbox

除了圖片,還可以顯示內嵌的DIV,或是以iFrame顯示外掛網頁,功能相當豐富的一套UI。

image

 

快捷鍵相關:

1. Ctrl + Key Combination

就是…綁快捷鍵的plug-in

 

綜合:

我想jQuery UI應該不用介紹了,這邊介紹另外一個網站,和jQuery UI有異曲同工之妙的…jQuery Tools ,另外還發現了一篇比較文(?)

jQuery Tools vs jQuery UI ,有興趣的人可以自己看一下。

 

DotBlogs 的標籤:,