若使用者在輸入文字方塊時可以自動完成使用者所輸入的文字,那對使用者來說會是一項便利的事。先來看一個簡單的範例:
範例
範例中,只要輸入某個字元則會自動出現下拉選單並列出使用者可能會輸入的文字,而這些文字清單可以寫在javascript文件中,或是動態取得這些文字,這個範例就是動態取得這些文字。此範例語法如下:
jQuery.getJSON(url, function(data){
jQuery("#example").autocomplete(data);
});
其中,.autocomplete(data)
就是實現此功能的語法,參數data就是剛剛所提到的自動文字清單資料,而data的資料型態為陣列。例如:
var data = ['test1', 'test2', 'test3', 'test4'];
.getJSON()
就是透過Ajax的方式取的JSON資料,data就是取得JSON資料後decode的結果,也就是陣列型態,亦即.autocomplete()
所需要的參數。
至於資料方面,如果資料量較龐大,則可以預先記錄在資料庫裡,等到有需要時,再動態取得。
詳細使用請參閱jQuery plugin: Autocomplete
Cycle是一套架構在jQuery下的輪播機制plugin。例如我們可以建立一套自己的電子相片,或是也可以用來當作幻燈片展示。請看以下簡單範例:
範例
只需兩步驟即完成,步驟如下:
1. 在<body>裡面建立一個<div>標籤,並給予一個辨識id,裡面置入要輪播的圖片<img>,如下所示:
<div id="example">
<img src="images/pic1.jpg" width="300" height="250" />
<img src="images/pic2.jpg" width="300" height="250" />
<img src="images/pic3.jpg" width="300" height="250" />
.
.
.
</div>
2. 於網頁載入時執行以下javascript語法:
jQuery("#example").cycle({fx: 'fade'});
其中fx物件表示輪播效果,可以更換成其他效果。
詳細使用請參閱jQuery Cycle Plugin
若要線上改變網頁背景顏色,文字顏色,邊框顏色等,或是其他有關顏色的CSS,可以透過表單填入或選擇色碼來改變,但更直覺的方式就是選取目標顏色來改變。
Farbtastic是一套方便又好用的顏色選擇器(color picker),而它是架構在jQuery library下,非常容易使用,請看以下範例:
範例
範例中,可以透過這個界面來即時改變目標物件的背景顏色,這樣是不是更直覺了。
而使用的語法也很簡單,如下所示:
jQuery.farbtastic('#cp', function(color){
//事件觸發後的程式碼
});
這裡的第一個參數#cp ,是對應到DOM中的<div id="cp"></div>
,也就是選擇器要置入的地方,第二個參數則是callback function,也就是事件觸發器,可以把觸發後的程式碼放到這裡。
另外,如果要設定選取顏色可使用以下物件方法:
.setColor(color) //color必須是16進位表示法的字串,例如:#ffffff
詳細使用請參閱Farbtastic官網