Aquaron包含了10个相当不错的jQuery插件。并附有源代码，实例和详细的开发文档。
post插件——简单地实现AJAX提交数据功能。
JavaScript:
-
$. post ( '/script.cgi', 'q=searchstring', function ($j ) {
-
var _o = eval ($j );
-
alert (_o. status );
-
}
代码对script.cgi进行AJAX调用，以q=searchstring作为参数数据。然后执行回调函数。
cloudinizr插件——实现从某个元素内容中生成一组标签云。
JavaScript:
-
$ ( '#example' ). html ($ ( 'textarea' ). val ( ) ). cloudinizr ( );
-
$ ( '#example span' ). hover (
-
function ( ) { $ ( this ). css ( 'backgroundColor', '#fff' ) },
-
function ( ) { $ ( this ). css ( 'backgroundColor', 'transparent' ) } )
-
. click ( function ( ) { $ ( this ). css ( {fontWeight: 'bold',color: '#888' } ) } );
代码将textarea这个多列文本框中的所有单词进行组合，并在id="example"的元素里生成组合后的标签云。然后设置标签云中的单个标签的悬浮效果。
vertigro插件——实现输入框随着字数增加自动改变高度。
JavaScript:
-
$ ( 'textarea' ). vertigro ( );
定义多列文本框进行自动变高。
aqPaging插件——实现分页功能。
JavaScript:
-
// create paging container
-
$ ( '#example' ). aqPaging ( {
-
current: 1, pages: 10, flip: true,
-
cb: function (p ) { $ ( '.brownbox b' ). html ( 'Page '+p ); }
-
} );
-
-
// submit the form to call the flipping function
-
$ ( '#example' ). aqPaging ( {current: 1, pages: 11 } );
定义id="example"为分页容器，并设置当前页为1，总页数为10，启用跳页回调函数功能，回调函数执行弹出显示当前页号的对话框。
aqMenu插件——创建一个菜单。
JavaScript:
-
$ ( '#example' ). aqMenu ( [
-
[ 'hom', 'Home', "$('#example').aqMenu('hom');" ],
-
[ 'bed', 'Bed', "$('#example').aqMenu('bed');" ],
-
[ 'gar', 'Garage', "$('#example').aqMenu('gar');" ]
-
], {currentID: 'hom' } );
代码定义id="example"为菜单容器，然后用一个多维数组定义各菜单项。
aqString插件——用于处理字符串。比如：
JavaScript:
-
var str = ",a,,b,c,d,,e,,,,f,g,";
-
var list = $. aqString. trim (str, ',' );
清除变量str中多余的逗号字符。
aqCookie插件——用于获取或设置Cookie。
JavaScript:
-
var f = document. forms [ 'fex' ];
-
$. aqCookie. set (f. key. value,f. val. value );
-
var arry = $. aqCookie. get (f. key. value );
-
alert (arry [f. key. value ] );
-
$. aqCookie. del (f. key. value );
从表单里得到或设置一些Cookie值。
aqFloater插件——使一个元素浮动，并依附于浏览器窗口。
JavaScript:
-
$ ( 'button' ). click ( function ( ) {
-
$ ( '#example' ). aqFloater ( {attach: 'nw' } );
-
} );
点击按钮，并让id="example"元素浮动依附在窗口的左上角。
aqLayer插件——创建一个样式化的层，并依附在某个元素上。用于提示信息的呈现作用。
JavaScript:
-
$ ( '#example1' ). aqLayer ( {closeBtn: true,attach: 'se' } )
-
. click ( function ( ) {
-
$ ( this ). aqLayer ( 'lower-right corner; try moving this box around' )
-
} );
将样式层依附在id="example1"的右下方。
aqTip插件——用于当鼠标移至某个元素时，在旁边弹出一个信息框。
JavaScript:
-
$ ( '#example1' ). aqTip ( 'Tip me' );
-
-
$ ( '#example2' ). hover (
-
function ( ) {
-
var p = $ ( this ). position ( );
-
$ ( this ). aqTipOne ( 'top: '+p. top+ '<br>left: '+p. left, {marginX: 20 } ) },
-
function ( ) { $ ( this ). aqTipOne ( ) }
-
);
当鼠标移至id="example1"元素时，在旁边弹出“Tip me”。当鼠标移至id="example2"的元素时，弹出元素的位置信息。
