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插件——实现从某个元素内容中生成一组标签云。

PLAIN TEXT

JavaScript:

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插件——实现输入框随着字数增加自动改变高度。

PLAIN TEXT

JavaScript:

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

定义多列文本框进行自动变高。

aqPaging插件——实现分页功能。

PLAIN TEXT

JavaScript:

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.  
7. // submit the form to call the flipping function
8. $ ( '#example' ). aqPaging ( {current: 1, pages: 11 } );

定义id="example"为分页容器，并设置当前页为1，总页数为10，启用跳页回调函数功能，回调函数执行弹出显示当前页号的对话框。

aqMenu插件——创建一个菜单。

PLAIN TEXT

JavaScript:

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插件——用于处理字符串。比如：

PLAIN TEXT

JavaScript:

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

清除变量str中多余的逗号字符。

aqCookie插件——用于获取或设置Cookie。

PLAIN TEXT

JavaScript:

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插件——使一个元素浮动，并依附于浏览器窗口。

PLAIN TEXT

JavaScript:

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

点击按钮，并让id="example"元素浮动依附在窗口的左上角。

aqLayer插件——创建一个样式化的层，并依附在某个元素上。用于提示信息的呈现作用。

PLAIN TEXT

JavaScript:

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

将样式层依附在id="example1"的右下方。

aqTip插件——用于当鼠标移至某个元素时，在旁边弹出一个信息框。

PLAIN TEXT

JavaScript:

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

当鼠标移至id="example1"元素时，在旁边弹出“Tip me”。当鼠标移至id="example2"的元素时，弹出元素的位置信息。