30个精挑细致的Ajax和Javascript 技巧

1) [url=http://icebeat.bitacoras.com/mootools/growl/][color=#0000ff]Growl 2.0 with Mootools[/color][/url]- Daniel Mota使用 Mootools创建了Growl 2.0 , 让我们可以轻松的集成我们的Web应用程序.
O y{I%qhF"U 2R0ooZB$P9r(M(ql7M
[list][*][url=http://icebeat.bitacoras.com/mootools/growl/][color=#0000ff]Demo 演示
Q4UP%|-]\ [/color][/url][*][url=http://icebeat.bitacoras.com/mootools/growl/growl.zip][color=#0000ff]下载[/color][/url][/list][color=#0000ff][/color]2) [url=http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery][color=#0000ff]Easiest Tooltip and Image Preview Using jQuery[/color][/url]- 一个令人难以置信的简单的方法实现的提示效果，类似弹出气泡, 当鼠标悬浮在链接上时, 可以弹出提示或缩略图.
U"m`-o/n.X4A,W [list][*][url=http://cssglobe.com/lab/tooltip/03/][color=#0000ff]Demo 演示
I,sW!CZM-EM [/color][/url][*][url=http://cssglobe.com/lab/tooltip/tooltip.zip][color=#0000ff]从这里下载[/color][/url][/list][color=#0000ff][/color]3) [url=http://woork.blogspot.com/2008/03/sliding-top-panel-using-mootools_05.html][color=#0000ff]Sliding top panel using mootools[/color][/url]- Antonio Lupetti向我们介绍如何使用mootools, 再通过几行简单的CSS和Javascript代码来实现一个展开/闭合的滑动门效果.
+R y^0wH*@3D z
^ [list][*]下载该教程 [url=http://www.box.net/shared/0f90hvzgow][color=#0000ff]点击这里[/color][/url][/list][color=#0000ff][/color]4) [url=http://nettuts.com/html-css-techniques/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/][color=#0000ff]Sliding top panel using mootools[/color][/url]- 滑动效果的顶部导栏 … 基于jQuery! +dffSc$B
[list][*][url=http://nettuts.s3.amazonaws.com/004_Moo/tutorial/demo/demo.html][color=#0000ff]Live Demo[/color][/url][*]下载 tutorial from [url=http://nettuts.s3.amazonaws.com/004_Moo/tutorial/demo/Download.zip][color=#0000ff]Here[/color][/url][/list][color=#0000ff][/color]5) [url=http://nettuts.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/][color=#0000ff]Create a Slick Tabbed Content Area using CSS & jQuery[/color][/url]- 如何使用HTML建立一个简单的Tab标签内容框 ，然后使用一些简单的JavaScript来实现滑动 特效. 基于jQuery
Fh/oBx,fV"s ~ [list][*][url=http://nettuts.s3.amazonaws.com/001_Tabbed/site/jQuery.html][color=#0000ff]ive Demo[/color][/url][/list][color=#0000ff][/color]6) [url=http://www.leigeber.com/2008/04/custom-javascript-dialog-boxes/][color=#0000ff]Custom JavaScript Dialog Boxes[/color][/url]- 该脚本目前主要提供四种对话框风格: 警报，警告，提示和成功。

IyE$c7X*~1yV:rQp~ [list][*][url=http://sandbox.leigeber.com/dialog/dialog_box.html][color=#0000ff]Live Demo[/color][/url][*]下载 tutorial from [url=http://www.leigeber.com/wp-content/uploads/2008/04/dialog.zip][color=#0000ff]Here[/color][/url][/list][color=#0000ff][/color]7) [url=http://davidwalsh.name/facebook-sliders-mootools][color=#0000ff]Facebook Sliders With Mootools and CSS [/color][/url]- 一个很简单的三滑块系统，允许用户通过滑杆来修改高度，宽度和透明度. 基于Mootools, 仿Facebook.
T0|b;Hx8EI&c&y [list][*]Checkout the [url=http://davidwalsh.name/dw-content/sliders.php][color=#0000ff]Live Demo[/color][/url][/list][color=#0000ff][/color]8 ) [url=http://blog.nihilogic.dk/2008/04/making-javascript-video-player.html][color=#0000ff]Making a Javascript Video Player[/color][/url]- 如何创建一个纯JavaScript 的视频播放器. ;c @ C
Jw9nM
[list][*]Checkout the [url=http://www.nihilogic.dk/labs/jsvideo/test2.php][color=#0000ff]Demos here[/color][/url].[/list]9) [url=http://nagoon97.wordpress.com/2008/04/09/ajax-mosaic-builder/][color=#0000ff]Ajax mosaic builder[/color][/url]- 一个Ajax效果的马赛克图片生成工具. ;HJ8eO[
B
[list][*]Checkout the [url=http://nagoon97.com/reading-binary-files-using-ajax/][color=#0000ff]Demo here[/color][/url].[/list]10) [url=http://www.openstudio.fr/jQuery-flipv.html?lang=en][color=#0000ff]jQuery flipv()[/color][/url]- 通过简单的方式实现的垂直文本效果. p#EldqpLF'L7c
[list][*]Checkout the [url=http://www.openstudio.fr/jquery-flipv][color=#0000ff]Demo here[/color][/url].[*]下载 it from [url=http://www.openstudio.fr/download/jquery-flipv.zip][color=#0000ff]here[/color][/url].[/list]

11) [url=http://davidwalsh.name/mootools-drag-drop-lock][color=#0000ff]Drag. Drop. Lock.[/color][/url]- 一个简单的教程, 教你如何在PHP中创建出拖拽效果.
%~\ BPH~} [list][*]Checkout the [url=http://davidwalsh.name/dw-content/drag-drop-lock.php][color=#0000ff]Live Demo[/color][/url][/list][color=#0000ff][/color]12) [url=http://www.webappers.com/2007/07/31/webappers-simple-ajax-progress-bar-with-css/][color=#0000ff]WebAppers Simple Javascript Progress Bar with CSS[/color][/url]- 由 WebAppers 创建的一个醒目的进度条, 其灵感来源于 [url=http://www.barenakedapp.com/the-design/displaying-percentages][color=#0000ff]Bare Naked App[/color][/url] w P&U"}8`I||
[list][*]Checkout the [url=http://www.webappers.com/progressBar][color=#0000ff]Live Demo[/color][/url][*]下载 it from [url=http://www.bram.us/wordpress/download.php?file=http://www.bram.us/wordpress/wp-content/uploads/2007/08/jsprogressbarhandler_01.zip][color=#0000ff]here[/color][/url].[/list]13) [url=http://www.unwieldy.net/moowheel/][color=#0000ff]moowheel[/color][/url]- 使用JavaScript和<canvas>对象，生成个性和优美的可视化数据显示。 :U:[/j"`E}V
[list][*]Checkout the [url=http://www.unwieldy.net/moowheel/demo/heat.html][color=#0000ff]Live Demo[/color][/url][/list][color=#0000ff][/color]14) [url=http://efectorelativo.net/laboratory/noobSlide/sample.html][color=#0000ff]noobSlide[/color][/url]-一个流畅的 Mootools 幻灯片图像画廊展示脚本. ^B5~#s i]
[list][*]Checkout the [url=http://efectorelativo.net/laboratory/noobSlide/sample.html][color=#0000ff]Demo here[/color][/url].[/list]15) [url=http://greghoustondesign.com/demos/mocha/][color=#0000ff]Mocha UI[/color][/url]- Mocha 一个基于Mootools javascript 框架创建的Web应用程序. Mocha GUI 的组件使用canvas标签图型构建而成.
:w }5dz;y^!U|? [list][*]Checkout the [url=http://greghoustondesign.com/demos/mocha/][color=#0000ff]Demo here[/color][/url].[/list]16) [url=http://webhike.de/scripts/dd/ddmenu.html][color=#0000ff]ddMenu[/color][/url]- ddMenu是一个简单的基于MooTools的脚本, 用来创建你自己的文本导航菜单. 2~RT1S8BW
[list][*]Checkout the [url=http://webhike.de/scripts/dd/ddmenu.html][color=#0000ff]Demo here[/color][/url].[*]下载 it from [url=http://webhike.de/scripts/dd/js/moo.ddmenu.0.21.js][color=#0000ff]here[/color][/url].[/list]17) [url=http://www.phatfusion.net/googledrive/][color=#0000ff]googleDrive[/color][/url]- googleDrive是一个小小的google地图mash up应用, 可以让你在Google Maps上面驾驶一辆小小的汽车.
A)dp9LhO K2RV Ot 18) [url=http://www.glassbox-js.com/][color=#0000ff]GlassBox[/color][/url]- GlassBox是一个短小精悍的 Javascript 用户UI库, 结合 Prototype 和 Script.aculo.us 可以生成一些特效. 使用 GlassBox你可以创建透明边框, 多彩布局和类Flash的特效等等.
3yU{1W4Y m2A%U [list][*]Checkout the [url=http://www.glassbox-js.com/][color=#0000ff]Demo here[/color][/url].[*]下载 it from [url=http://www.glassbox-js.com/downloads/glassbox.latest.zip][color=#0000ff]here[/color][/url].[/list]19) [url=http://blog.deensoft.com/2008/03/10/protoflow-first-preview-release/][color=#0000ff]ProtoFlow[/color][/url]- ProtoFlow是一个使用 Javascript脚本的封面循环展示特效. 它基于 [url=http://www.prototypejs.org/][color=#0000ff]Prototype[/color][/url], [url=http://script.aculo.us/][color=#0000ff]Scriptaculous[/color][/url] 和 [url=http://cow.neondragon.net/stuff/reflection/][color=#0000ff]Reflection.js.使用[/color][/url]
U8M&{Z){:O7Ao S [list][*]Checkout the [url=http://www.deensoft.com/lab/protoflow/][color=#0000ff]Demo here[/color][/url].[*]下载 it from [url=http://www.deensoft.com/lab/protoflow/protoflow.zip][color=#0000ff]here[/color][/url].[/list]20) [url=http://convincingemail.com/autosuggest-autocomplete.aspx][color=#0000ff]ASP.NET AJAX AutoComplete Control (Facebook look)[/color][/url]- 一个基于 ASP.NET 语言的 AJAX 扩展, 可以附加任何文本框控制.
oaDD$p;@F,U [list][*]Checkout the [url=http://convincingemail.com/autosuggest-autocomplete.aspx][color=#0000ff]Demo here[/color][/url].[*]下载 it from [url=http://convincingemail.com/Download.aspx][color=#0000ff]here[/color][/url].[/list]

21) [url=https://damnit.jupiterit.com/home/learn][color=#0000ff]ADamnIT - JS error notification[/color][/url]- 一个免费的JS报错脚本, 当你的网页出现 JS 错误的时候, 它会自动发送一封邮件向你报告.
n| Ef&B2]$_l(C;f [list][*]Checkout the [url=https://damnit.jupiterit.com/home/demo][color=#0000ff]Demo here[/color][/url].[*]下载 it from [url=http://javascriptmvc.googlecode.com/files/damnit_demo.html][color=#0000ff]here[/color][/url].[/list]22) [url=http://webplicity.net/flexigrid/][color=#0000ff]Flexigrid[/color][/url]- 一个轻量级但拥有丰富数据的网格脚本, 配合标题与栏目大小, 可以滚动数据，支持连接到一个基于XML的数据源, 支持使用AJAX加载内容。 .j%sf1IzM0RC"r
[list][*]Checkout the [url=http://webplicity.net/flexigrid/][color=#0000ff]Demo here[/color][/url].[*]下载 it from [url=http://webplicity.net/flexigrid/flexigrid.zip][color=#0000ff]here[/color][/url].[/list]23) [url=http://www.no-margin-for-errors.com/projects/prettyPhoto/][color=#0000ff]prettyPhoto a jQuery lightbox clone[/color][/url]- 一个 jQuery 的 类Lightbox灯箱效果的脚本, 可定制的功能比较丰富. t4Z?7H^OK:A&]#V1}
[list][*]Checkout the [url=http://www.no-margin-for-errors.com/projects/prettyPhoto/][color=#0000ff]Demo here[/color][/url].[*]下载 it from [url=http://www.no-margin-for-errors.com/projects/prettyPhoto/prettyPhoto_compressed.zip][color=#0000ff]here[/color][/url].[/list]24) [url=http://www.leigeber.com/2008/05/javascript-color-fading-script/][color=#0000ff]JavaScript Color Fading Script[/color][/url]- 这个轻巧的JavaScript可以很容易的实现色彩过渡, 可以添加褪色效果到表格, DIV层以及更多元素. 并且你可以设置元素的背景，边框或文字颜色.
b!r+lPrd [list][*]Checkout the [url=http://sandbox.leigeber.com/fader/fader.html][color=#0000ff]Demo here[/color][/url].[*]下载 it from [url=http://www.leigeber.com/wp-content/uploads/2008/05/fader.zip][color=#0000ff]here[/color][/url].[/list]25) [url=http://flesler.blogspot.com/2008/02/rotator.html][color=#0000ff]Rotator[/color][/url]
5BWe \&Dy9xLO [list][*]Checkout the [url=http://flesler.webs.com/Rotator/][color=#0000ff]Demo here[/color][/url].[*]下载 it from [url=http://flesler-plugins.googlecode.com/files/rotator-1.0.0.zip][color=#0000ff]here[/color][/url].[/list]26) [url=http://www.askthecssguy.com/2008/04/kotatsu_a_simple_html_table_ge.html][color=#0000ff]Kotatsu - a simple html table generator[/color][/url]- 一个新鲜的工具, 帮助你快速的创建表格. @BRnn)i]NCm
27) [url=http://www.openstudio.fr/jQuery-virtual-tour.html?lang=en][color=#0000ff]jQuery virtual tour[/color][/url]- 这个虚拟导航插件的最大特殊性是, 即使Javascript没有被激活, 同样可以运行, 只是少了一些特效.
`I*Q4_p]/CNRZ [list][*]Checkout the [url=http://openstudio.fr/jquery-virtual-tour/][color=#0000ff]Demo here[/color][/url].[*]下载 it from [url=http://www.openstudio.fr/download/jquery-virtual-tour.zip][color=#0000ff]here[/color][/url].[/list]28) [url=http://www.sitepen.com/blog/2008/04/29/usable-directory-listings-with-a-little-dojo/][color=#0000ff]Usable directory listings with a little Dojo[/color][/url]-为目录列表创建一个简单的过滤浏览脚本.
Y$`F/{+D"m3j u [list][*]Checkout the [url=http://sitepen.com/labs/code/dirindex/data/][color=#0000ff]Demo here[/color][/url].[*]下载 a zip of the header and .htaccess files [url=http://sitepen.com/labs/code/dirindex/dirindex_files.zip][color=#0000ff]here[/color][/url].[/list]29) [url=http://stevesouders.com/cuzillion/][color=#0000ff]Cuzillion’[/color][/url]- 该工具可让你测试出在浏览器中不同的技术性能, 再针对其进行优化，这些测试可以保存和共享到社交网站。
0Ph!MR9QA 30) [url=http://ajaxorized.com/introducing-the-sliding-date-picker/][color=#0000ff]The Sliding date-picker[/color][/url]- 一个滑动效果的日期拾取脚本.
-{/T6Lc J4T [list][*]Checkout the [url=http://www.ajaxorized.com/dateslider/slider.html][color=#0000ff]Demo here[/color][/url].[*]下载 it from [url=http://www.ajaxorized.com/dateslider/dateslider.zip][color=#0000ff]here[/color][/url].[/list]