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"的元素时，弹出元素的位置信息。