以下为引用内容:

---

所有效果说明：

基本的鼠标互动：

拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing)

各种互动效果：

手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条

(sliders)、表格排序(table sorters)、页签(tabs)

放大镜效果(magnifier)、阴影效果(shadow)

第一部分：鼠标交互

1.1 Draggables:拖拽

所需文件：

ui.mouse.js

ui.draggable.js

ui.draggable.ext.js

用法：文件载入后，可以拖拽class = “block”的层

$(document).ready(function(){

$(”.block”).draggable();

});

draggable(options)可以跟很多选项

选项说明：http://docs.jquery.com/UI/Draggables/draggable#options

选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/draggable.html

1.2 Droppables

所需要文件，drag drop

ui.mouse.js

ui.draggable.js

ui.draggable.ext.js

ui.droppable.js

ui.droppable.ext.js

用法：

$(document).ready(function(){

$(”.block”).draggable({helper: ‘clone’});

$(”.drop”).droppable({

accept: “.block”,

activeClass: ‘droppable-active’,

hoverClass: ‘droppable-hover’,

drop: function(ev, ui) {

$(this).append(”
Dropped!”);

}

});

});

选项说明：http://docs.jquery.com/UI/Droppables/droppable#options

选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/droppable.html

1.3　Sortables　排序

所需要的文件

jquery.dimensions.js

ui.mouse.js

ui.draggable.js

ui.droppable.js

ui.sortable.js

用法：

$(document).ready(function(){

$(”#myList”).sortable({});

});

dimensions文档http://jquery.com/plugins/project/dimensions

选项说明：http://docs.jquery.com/UI/Sortables/sortable#options

选项实例：http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.sortable.html

1.4 Selectables 选择

所需要的文件

jquery.dimensions.js

ui.mouse.js

ui.draggable.js

ui.droppable.js

ui.selectable.js

用法：

$(document).ready(function(){

$(”#myList”).selectable();

});

选项说明：http://docs.jquery.com/UI/Selectables/selectable#options

选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/selectable.html

1.5　Resizables改变大小

所需要的文件　，此例子需要几个css文件

jquery.dimensions.js

ui.mouse.js

ui.resizable.js

用法：

$(document).ready(function(){

$(”#example”).resizable();

});

CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css

选项说明：http://docs.jquery.com/UI/Resizables/resizable#options

选项实例：http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.resizable.html

第二部分：互动效果

2.1 Accordion 折叠菜单

所需要的文件:

ui.accordion.js

jquery.dimensions.js

用法：

$(document).ready(function(){

$(”#example”).accordion();

});

CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css

选项说明：http://docs.jquery.com/UI/Accordion/accordion#options

选项实例：http://dev.jquery.com/view/trunk/plugins/accordion/?p=1.1.1

2.2 dialogs 对话框

所需要的文件：

jquery.dimensions.js

ui.dialog.js

ui.resizable.js

ui.mouse.js

ui.draggable.js

用法：

$(document).ready(function(){

$(”#example”).dialog();

});

CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css

选项说明：http://docs.jquery.com/UI/Dialog/dialog#options

选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/dialog.html

2.3 sliders 滑动条

所需要的文件

jquery.dimensions.js

ui.mouse.js

ui.slider.js

用法：

$(document).ready(function(){

$(”#example”).slider();

});

CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css

选项说明：http://docs.jquery.com/UI/Slider/slider#options

选项实例：http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.slider.html

2.4 Tablesorter表格排序

所需要的文件

ui.tablesorter.js

用法：

$(document).ready(function(){

$(”#example”).tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});

});

CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css

选项说明：http://docs.jquery.com/Plugins/Tablesorter/tablesorter#options

选项实例：http://tablesorter.com/docs/#Demo

2.5 tabs页签(对IE支持不是很好)

所需要的文件

ui.tabs.js

用法：

$(document).ready(function(){

$(”#example > ul”).tabs();

});

CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css

选项说明：http://docs.jquery.com/UI/Tabs/tabs#initialoptions

选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/tabs.html

tabs ext http://stilbuero.de/jquery/tabs_3/rotate.html

第三部分：效果

3.1 Shadow 阴影

实例http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.shadow.html

3.2 Magnifier 放大

实例http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.magnifier.html

---

via http://www.javaeye.com/topic/157382

http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

http://docs.jquery.com/Plugins/Validation

有错误，供参考之用。

</p> <p> 1. <%@ page language="java" import="java.util.*" pageEncoding="GBK"%> </p> <p> 2. </p> <p> 3. </p> <p> 4. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> </p> <p> 5. <html> </p> <p> 6. <head> </p> <p> 7. </p> <p> 8. </p> <p> 9. </p> <p> 10. <meta http-equiv="pragma" content="no-cache"> </p> <p> 11. <meta http-equiv="cache-control" content="no-cache"> </p> <p> 12. <meta http-equiv="expires" content="0"> </p> <p> 13. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> </p> <p> 14. <meta http-equiv="description" content="This is my page"> </p> <p> 15. <!-- </p> <p> 16. <link rel="stylesheet" type="text/css" href="styles.css"> <p> 17. –> </p> <p> 18. <script type="text/javascript"> </p> <p> 19. window.onerror = function(a,b,c) { </p> <p> 20. alert(a+b+c); </p> <p> 21. return true; </p> <p> 22. } </p> <p> 23. </script> </p> <p> 24. <script type="text/javascript" src="jquery.js"></script> </p> <p> 25. <script type="text/javascript"> </p> <p> 26. </p> <p> 27. $(function() { </p> <p> 28. var height = document.body.offsetHeight; </p> <p> 29. var width = document.body.offsetWidth; </p> <p> 30. height = parseInt(height); </p> <p> 31. width = parseInt(width); </p> <p> 32. height = height / 2 - 30; </p> <p> 33. width = width / 2 - 100; </p> <p> 34. $("#div").css("top",height+"px"); </p> <p> 35. $("#div").css("left",width+"px"); </p> <p> 36. $("#div").show(); </p> <p> 37. </p> <p> 38. $.ajax({ </p> <p> 39. url: 'http://b9426f32195d423:8080/ajax/servlet/ajax?math='+Math.random(), </p> <p> 40. type: 'GET', </p> <p> 41. dataType: 'xml', </p> <p> 42. timeout: 1000, </p> <p> 43. error: function(){ </p> <p> 44. alert('Error loading XML document'); </p> <p> 45. }, </p> <p> 46. success: function(xml){ </p> <p> 47. $("#div").remove(); </p> <p> 48. alert($(xml).find("stu").size()); //这里报错，说对象不支持此属性或方法，实在看不出来是哪里错了，请高人指教！谢谢！ </p> <p> 49. } </p> <p> 50. }); </p> <p> 51. }); </p> <p> 52. </p> <p> 53. </script> </p> <p> 54. </p> <p> 55. </head> </p> <p> 56. </p> <p> 57. <body> </p> <p> 58. <div id="div" </p> <p> 59. style="display: none; text-align: center; position: absolute; color: #333333; font-size: 12px"> </p> <p> 60. <img src="slideshow_loader.gif" /> </p> <p> 61. </p> <p> 62. 正在加载….. </p> <p> 63. </p></div> <p> 64. </p> <p> 65. </p> <p> 66. </body> </p> <p> 67. </html>

via http://www.javaeye.com/topic/158428

转自 http://www.ibm.com/developerworks/cn/xml/x-ajaxjquery.html

使用 jQuery 将使 Ajax 变得及其简单。jQuery 提供有一些函数，可以使简单的工作变得更加简单，复杂的工作变得不再复杂。

Ajax 最常见的用法就是把一块 HTML 代码加载到页面的某个区域中去。为此，只需简单地选择所需的元素，然后使用 load() 函数即可。下面是一个用于更新统计信息的示例：

$(’#stats’).load(’stats.html’);

通常，我们只需简单地把一些参数传递给服务器中的某个页面。正如您所预料的，使用 jQuery 实现这一操作非常地简单。您可以使用 $.post() 或者 $.get()，这由所需的方法决定。如果需要的话，您还可以传递一个可选的数据对象和回调函数。清单 4 显示了一个发送数据和使用回调的简单示例。

清单 4. 使用 Ajax 向页面发送数据

$.post(’save.cgi’, {

text: ‘my string’,

number: 23

}, function() {

alert(’Your data has been saved.’);

});

如果您确实需要编写一些复杂的 Ajax 脚本，那么需要用到 $.ajax() 函数。您可以指定 xml、script、html 或者 json，jQuery 将自动为回调函数准备合适的结果，这样您便可以立即使用该结果。还可以指定 beforeSend、error、success 或者 complete 回调函数，向用户提供更多有关 Ajax 体验的反馈。此外，还有一些其它的参数可供使用，您可以使用它们设置 Ajax 请求的超时，也可以设置页面 “最近一次修改” 的状态。清单 5 显示了一个使用一些我所提到的参数检索 XML 文档的示例。

清单 5. $.ajax() 使 Ajax 由复杂变简单

$.ajax({

url: ‘document.xml’,

type: ‘GET’,

dataType: ‘xml’,

timeout: 1000,

error: function(){

alert(’Error loading XML document’);

},

success: function(xml){

// do something with xml

}

});

当 success 回调函数返回 XML 文档后，您可以使用 jQuery 检索这个 XML 文档，其方式与检索 HTML 文档是一样的。这样使得处理 XML 文档变得相当地容易，并且把内容和数据集成到了您的 Web 站点里面。清单 6 显示了 success 函数的一个扩展，它为 XML 中的每个 元素都添加了一个列表项到 Web 页面中。

清单 6. 使用 jQuery 处理 XML 文档

success: function(xml){

$(xml).find(’item’).each(function(){

var item_text = $(this).text();

$(’

‘)

.html(item_text)

.appendTo(’ol’);

});

}

类似于 undo 函数，用于返回到调用 find() 或 parents() 函数（或者其它遍历函数）之前的 jQuery 对象。

$(’form#login’)</p> <p>// hide all the labels inside the form with the ‘optional’ class</p> <p>.find(’label.optional’).hide().end()</p> <p>// add a red border to any password fields in the form</p> <p>.find(’input:password’).css(’border’, ‘1px solid red’).end()</p> <p>// add a submit handler to the form</p> <p>.submit(function(){</p> <p>return confirm(’Are you sure you want to submit?’);</p> <p>});

所有空 td 加入 -

$(’td:empty’).html(’-');

非 class=”required” 隐藏

$(’input:not(.required)’).hide();

jquery show() hide() 函数

$(’ul, ol, dl’).hide();

table class=”stried” 下所有 odd（偶数）tr 背景色

$(’table.striped > tr:odd’).css(’background’, ‘#999999′);

jquery 插件例子

$.fn.background = function(bg){

return this.css(’background’, bg);

};

$(”body”).background(”#c00″)

可以使用 jQuery 处理基本的动画和显示效果。animate() 函数是动画代码的核心，它用于更改任何随时间变化的数值型的 CSS 样式值。比方说，您可以变化高度、宽度、不透明度和位置。还可以指定动画的速度，定为毫秒或者预定义的速度：慢速，中速或快速。

下面是一个同时变化某个元素高度和宽度的示例。请注意，这些参数没有开始值，只有最终值。开始值取自元素的当前尺寸。同时我也附加了一个回调函数。

$(’#grow’).animate({ height: 500, width: 500 }, “slow”, function(){

alert(’The element is done growing!’);

});

jQuery 的内置函数使更多常见的动画更容易完成。可以使用 show() 和 hide() 元素，立即显示或者以特定的速度显示。还可以通过使用 fadeIn() 和 fadeOut()，或者 slideDown() 和 slideUp() 显示和隐藏元素，这取决于您所需要的显示效果。下面的示例定义了一个下滑的导航菜单。

firefox background-position bottom bug

当背景图片大于页面时，firefox background-position bottom 显示有bug，不是浏览器的左下角而是当前页面可见元素的左下角。

设置 html {height:100%} 后解决问题（也可以 body {height:100%，但有时候不行}）。还有把设置 100%（或者其他百分比）的说法，但似乎不行。

</p> <style> <p>body {background:url(http://www.butone.com/guoshuang/caijue/themes/orange/images/login-back.jpg) left bottom}</p> </style> <p><body></p> <p>文字一</p> <p>文字2</p> <p>文字3</p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

</p> <style> <p>html {height:100%}</p> <p>body {background:url(http://www.butone.com/guoshuang/caijue/themes/orange/images/login-back.jpg) left bottom}</p> </style> <p><body></p> <p>文字一</p> <p>文字2</p> <p>文字3</p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

firefox 控制 legend 也有bug! 这样

这里是legend

来控制。

http://www.tyssendesign.com.au/articles/css/legends-of-style/

label 也有bug，firefox 基本上对 label 的样式表不能正确处理，哪怕是

label#labelid #other 这样的样式也不能识别！

firefox 中不能象 ie 那样直接 top.AAA.cols=”…” 来修改框架宽度，而必须 document.getElementById(”aa”).setAttribute(”cols”,”…”)

</p> <p>This would work everywhere (except NC4 IE4)</p> <p><html></p> <p><script type="text/javascript"></p> <p>function resizeMenu(sinistra,destra)</p> <p>{</p> <p>var attr = sinistra+'‰,'+destra+'‰';</p> <p>document.getElementById("general").setAttribute('cols',attr);;</p> <p>}</p> <p></script></p> <p><frameset id="general" cols="20%,80%"></p> <p><frame id="leftFrame" src="menu.htm"></p> <p><frame id="rightFrame" noresize scrolling="no" src="frame_a.htm"></p> <p></frameset></p> <p></html></p> <p>file ‘frame_a.htm’ :</p> <p><html></p> <p><a href="#" onclick="top.resizeMenu(0,100);return false;">hide menu</a></p> <p><a href="#" onclick="top.resizeMenu(20,80);return false;">show menu</a></p> <p></html></p> <p>