markupnow 代码分析

Jan 24, 2008 Author: | Filed under: Uncategorized

ie6,7 css 打补丁；js；re 类似自定义的简单 $()；body 给 id区分栏目。ie6 css 里用 htc 模拟 hover 等 css 效果。

0 Comments

jquery trim()

Jan 23, 2008 Author: | Filed under: Uncategorized

去掉字符串头尾的空格

0 Comments

Ajax 搜索 guoshuang blog

Jan 23, 2008 Author: admin | Filed under: Uncategorized

测试 jQuery ajax 功能，只搜索文章标题。

点击这里打开新窗口浏览此网页

jquery JSON 的 autocomplete 代码例子

http://www.cs.bgu.ac.il/~ygleyzer/files/utils/jqac/jqac_example.html

http://www.dyve.net/jquery/?autocomplete

0 Comments

jquery UI 效果介绍

Jan 23, 2008 Author: | Filed under: Uncategorized

以下为引用内容:

所有效果说明：

基本的鼠标互动：

拖拽(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

0 Comments

jquery ajax jsp 代码例子

Jan 23, 2008 Author: | Filed under: Uncategorized

有错误，供参考之用。

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

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

0 Comments

jQuery ajax 例子

Jan 23, 2008 Author: | Filed under: Uncategorized

转自 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’);

});

}

0 Comments

Pages (171): « 1 2 3 4 5 » ... Last »

Flickr PhotoStream

郭爽的网页设计资料

markupnow 代码分析

jquery trim()

Ajax 搜索 guoshuang blog

jquery UI 效果介绍

jquery ajax jsp 代码例子

jQuery ajax 例子

Flickr PhotoStream

Recent Posts

Recent Comments

Pages

Categories

Tags

Archives

Blogroll

Meta

Advertising

Most Popular

Recent Comments

Latest Entries