jquery插件 - Aquaron jQuery插件集

Aquaron包含了10個相當不錯的jQuery插件。并附有源代碼，執行個體和詳細的開發文檔。

post插件——簡單地實作AJAX送出資料功能。

PLAIN TEXT

JavaScript:

1. $.post('/script.cgi', 'q=searchstring', function($j) {
2. var _o = eval($j);
3. alert(_o.status);
4. }

代碼對script.cgi進行AJAX調用，以q=searchstring作為參數資料。然後執行回調函數。

cloudinizr插件——實作從某個元素内容中生成一組标簽雲。

1. $('#example').html($('textarea').val()).cloudinizr();
2. $('#example span').hover(
3. function() { $(this).css('backgroundColor','#fff') },
4. function() { $(this).css('backgroundColor','transparent') })
5. .click(function(){ $(this).css({fontWeight: 'bold',color: '#888'}) });

代碼将textarea這個多列文本框中的所有單詞進行組合，并在id="example"的元素裡生成組合後的标簽雲。然後設定标簽雲中的單個标簽的懸浮效果。

vertigro插件——實作輸入框随着字數增加自動改變高度。

1. $('textarea').vertigro();

定義多列文本框進行自動變高。

aqPaging插件——實作分頁功能。

1. // create paging container
2. $('#example').aqPaging({
3. current: 1, pages: 10, flip: true,
4. cb: function(p){ $('.brownbox b').html('Page '+p); }
5. });
6. // submit the form to call the flipping function
7. $('#example').aqPaging({current: 1, pages: 11});

定義id="example"為分頁容器，并設定目前頁為1，總頁數為10，啟用跳頁回調函數功能，回調函數執行彈出顯示目前頁号的對話框。

aqMenu插件——建立一個菜單。

1. $('#example').aqMenu([
2. ['hom', 'Home',  "$('#example').aqMenu('hom');"],
3. ['bed', 'Bed',   "$('#example').aqMenu('bed');"],
4. ['gar', 'Garage',"$('#example').aqMenu('gar');"]
5. ],{currentID: 'hom'});

代碼定義id="example"為菜單容器，然後用一個多元數組定義各菜單項。

aqString插件——用于處理字元串。比如：

1. var str = ",a,,b,c,d,,e,,,,f,g,";
2. var list = $.aqString.trim(str,',');

清除變量str中多餘的逗号字元。

aqCookie插件——用于擷取或設定Cookie。

1. var f = document.forms['fex'];
2. $.aqCookie.set(f.key.value,f.val.value);
3. var arry = $.aqCookie.get(f.key.value);
4. alert(arry[f.key.value]);
5. $.aqCookie.del(f.key.value);

從表單裡得到或設定一些Cookie值。

aqFloater插件——使一個元素浮動，并依附于浏覽器視窗。

1. $('button').click(function(){
2. $('#example').aqFloater({attach: 'nw'});

點選按鈕，并讓id="example"元素浮動依附在視窗的左上角。

aqLayer插件——建立一個樣式化的層，并依附在某個元素上。用于提示資訊的呈現作用。

1. $('#example1').aqLayer({closeBtn:true,attach:'se'})
2. .click(function(){
3. $(this).aqLayer('lower-right corner; try moving this box around')

1. $('#example1').aqTip('Tip me');
2. $('#example2').hover(
3. function(){
4. var p = $(this).position();
5. $(this).aqTipOne('top: '+p.top+'<br>left: '+p.left,{marginX: 20}) },
6. function(){ $(this).aqTipOne() }
7. );