40多个Ajax,DHTML和Javascript应用技术

原文: Best of Ajax, Dhtml and Javascript- part1
翻译: 帕兰

本文收集了Ajax的滚动技术,渐变效果,实时快速编辑,互动元素,视觉效果,动画,幻灯片,手风琴,评级以及更多的javascripts例子,你可以从中找到很多有用的元素,作用于你的AJAX的Web应用。
Scrolling Techniques 滚动技术
1) Ajax dynamic scrolling pages-Ajax动态滚动页面

这个脚本从你的服务器中载入内容并插入一个HTML空白元素(比如DIV标签)到你的页面中。新的页面可以添加动态效果,脚本将向下滚动显示新页面的内容。

(2) Control.Scroller– Control.Scroller是一个基于Prototype和 script.aculo.us JavaScript 框架的脚 本. 它在script.aculo.us使用Control.Slider并且进行扩大, 使用你可以控制你一个内容容器,对它进行裁剪和滚动。

(3) Text Scroller-文本滚动器。这是另一个可以通过鼠标的滑动来实现文本滚动的脚本。

(4) A Slider DataPager with Dynamic Tooltips– 这是一个小小的Smooth Javascript滚动脚本。

(
渐变效果
5) CSS Text Gradient– CSS文本渐变。文本渐变是简单的CSS技巧,允许你为网页中重要的标题字体添加渐变效果,而仅仅需要使用CSS和一张PNG图片。

(6) CSS Gradient Text Effect– 同样是使用CSS和一张PNG图片实现文本的渐变效果。之前帕兰有专门做过介绍

(
AJAX 实时编辑
7) Instant Edit-实时编辑

(8 ) Digg Style Update Characters While Typing-类似Digg风格的字符输入限制

教你如何实现类似Digg风格的实时显示文本输入的字符数,并且一旦超过你设置的字符限制,将不能再继续输入任何字符。

(9) Easy AJAX inline text edit 2.0-一个简单的Ajax内文编辑应用。让你实时编辑一个文本区域而且不需要使用提交按钮。

(
图像特效
10) SWF Image Replacement -使用JavaScript和Flash, swfIR 解决了一些在CSS和标准的HTML应用中的设计局限, 同时仍然符合标准的设计概念。

(11) Style Your Image Links-这个优秀的脚本可以让你为图片添加悬浮特效,当鼠标悬浮在图片时,出现一个互动作用的点击提示。

(12) Loupe– 可以让你添加一个Loupe也就是放大镜到你网页上的图片中。它使用一个简单的javascript脚本,这意味着你可以保持你的你的代码简洁,并且它支持大多数的主流浏览器。

(
AJAX 星形评级
13) Starbox: star rating script for prototype -Starbox可让你只需要一张PNG图片就创建一个简单的星形评级盒 . 这个脚本基于Prototype javascript框架.

(14) AJAX Star Rating-一个非常小巧但却非常实用的星级评级系统。

(15) Rabid Ratings v1.2-RabidRatings is a simple but eye-caching ratings system which allows users to your website to rate virtually anything.

(
Accordions-手风琴效果
16) Simple Javascript Accordions-一个非常轻量级的手风琴效果Javascript脚本,很容易使用和整合到页面中去。 不需要任何Javascript框架并且支持大多数主流浏览器。

(17)Accordion– 来自RapidWeaver的一个插件. 它从你的网页文本和图像中创建一个动态的交互菜单驱动。

(
SlideShows and Galleries-幻灯片和画廊应用
18)MooFlow– MooFlow是一个用于Gallery画廊的Javascript, 它创建出来的效果很像Apple的iTunes.

(19)Flickrshow– 为你提供最简单的方法在你的网页上显示来自Flickr的相册。

(
Manipulating Fields -处理区域
20) TextboxList meets Autocompletion-基于Mootools脚本库,在搜索区域中使用自动提示和自动完成功能,允许用户增加或删除词句。

(21)Toggler v0.1-这是一个模仿桌面系统功能应用的Javascript, 当你点击Chechbox中的一个Lable的时候,如果你保持鼠标按下并移动鼠标,就可以批量选择Lable。

(
Drag & Drop -拖拽
22)Drag & Drop Sortable Lists -可拖拽的分类菜单

(23) Drag & Drop – 可实现图像和多层拖拽

(
Tooltips 提示工具
24) How to add advanced tooltips on your photo-这篇文章向你介绍如何使用 Taggify widget 来提高你博客的功能,主要是为你的网页上的图片添加一个弹出提示。

(25)Nice titles– 可以让你的链接标题显示的漂亮,更重要的是,它在标题里显示链接和URL地址。

(26)Bubble Tooltips– Bubble Tooltips通过一小个CSS和 javascript,为你的任何页面链接分创建一个花俏的弹出效果样式。

(
Date, Time & Calendars 日期,时间和日历
27) The DHTML / JavaScript Calendar– 显示一个弹出或单调和DHTML日历,拥有相配的日期和时间选择样式。

(28) DateJs– Datejs是一个开源的 JavaScript日期库。

(29) JS Calendar– 这是一个兼容各大浏览器的Javascript日历.

(
AJAX poller-Ajax投票系统
30) AJAX poller script– 这是一个简单的Ajax投票演示. 它使用Ajax(Asyncron Javascript 和XML) 发送投票到你的服务器.,并且实时返回处理的投票结果到你的浏览器中。

(31) How To Make an AJAX Poll

这是一篇相关文章,主要介绍如何创建一个Ajax投票系统

(
Must See Examples – 应该了解的一个实例
32) ShadedBorder -JavaScript实现的圆角阴影效果

点击查看 demo

(33) Change Text Size On Click With Javascript-使用一个小小的 JavaScript 脚本和HTML实现文本字体大小的改变。

(34) Fancy Form -一个强大的checkbox复选框替换脚本,它提供HTML元素所不能达到的灵活性。

点击查看demo演示

(35) Ajax Domain Search– 实时搜索检查你的域名(.com, .net, .org, .info, .biz, .us).

(36) Pushing a shopping cart -一个随浏览器移动的购物车系统应用。好处就是随时悬浮,跟随用户。

(37) Timeline– Timeline时间线是一个DHTML-基于AJAXy的日期事件形象化显示的widget. 它的移动效果有点像Google Maps。

(38) Prototype Window– 这个脚本javascrip允许你添加你窗口到HTML页面中.

(39) Ajax Chess widget-这是一个国际象棋的widget,它使用Aajx从服务器中分析响应国际象棋的动作。

(40) ClickHeat | Clicks heatmap– ClickHeat 在一个页面中加入Heatmap, 显示炎热和寒冷的点击地带.

(41) ScrolLovers– Scrollovers提供一种简便快捷的方法增强你的网页能力, 它能让用户来控制网页中的元素效果。比如使用一个色盘来调整网页中特定字符的颜色。

(42) df Javascript Smooth Scroll -使用一个浮动块来调整内容的显示,并弹出详细的提示信息。

发表评论

电子邮件地址不会被公开。 必填项已用*标注