精做高難度防水抓漏/壁癌/油漆等工程
責任施工、合約保固!
裝潢免費提供紙箱及拆裝、24H全省服務
合約保障、提供您平價又專業的搬家服務

首頁  •  tw 論壇 • 程式設計討論     • 

[JQuery] jQuery Plugin – Autocomplete

房東:阿魯
發表時間:2011-05-04
[檢舉]



jQuery Plugin – Autocomplete



若使用者在輸入文字方塊時可以自動完成使用者所輸入的文字,那對使用者來說會是一項便利的事。先來看一個簡單的範例:


範例


範例中,只要輸入某個字元則會自動出現下拉選單並列出使用者可能會輸入的文字,而這些文字清單可以寫在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



 



jQuery Plugin – Cycle



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



 



jQuery Plugin – Farbtastic



若要線上改變網頁背景顏色,文字顏色,邊框顏色等,或是其他有關顏色的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官網







  • 贊助網站       

    廣利不動產-新板特區指名度最高、值得您信賴的好房仲
    您的托付,廣利用心為您服務
    廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲
    完整房訊,房屋、店面熱門精選物件,廣利不動產 優質仲介,房屋租賃、買賣資訊透明,交易真安心!



  •  共 0 人回應

    姓名:
    佈告內容: